<?php if (!defined('ABSPATH')) exit; $admin_test = !empty($admin_test); $complexity_descriptions=['simple'=>'One main ridge and two roof planes','average'=>'A hip, valley, or small intersecting section','complex'=>'Several valleys, dormers, or roof sections','very_complex'=>'Many intersecting sections, valleys, or dormers']; ?>
<div class="rfec" data-rfec<?php if($s['accent_color']): ?> style="--rfec-accent:<?php echo esc_attr($s['accent_color']); ?>"<?php endif; ?>>
  <script type="application/json" class="rfec__config"><?php echo wp_json_encode($config); ?></script>
  <form class="rfec__form" novalidate>
    <header class="rfec__header"><h2><?php echo $admin_test ? 'Internal Test Estimate' : 'Roof Cost Estimator'; ?></h2><p><?php echo $admin_test ? 'Test saved pricing without recording a lead.' : 'Complete five quick steps for a ballpark roof replacement range.'; ?></p></header>
    <div class="rfec__progress" aria-hidden="true"><?php for($i=0;$i<5;$i++): ?><span<?php echo $i===0?' class="is-active"':''; ?>></span><?php endfor; ?></div>

    <section class="rfec__step is-active" data-step="1"><p class="rfec__question-number">Step 1 of 5</p><h3>Which roofing system are you considering?</h3>
      <div class="rfec__material-grid"><?php foreach($this->available_materials($s) as $key=>$label): ?><label class="rfec__material-card"><input type="radio" name="material" value="<?php echo esc_attr($key); ?>"><span><img src="<?php echo esc_url($this->material_image_url($key,$s)); ?>" alt=""><b><?php echo esc_html($label); ?></b><small><?php echo esc_html($s['currency_symbol'].number_format_i18n($s['material_rates'][$key],2).' / sq ft'); ?></small></span></label><?php endforeach; ?></div>
      <p class="rfec__validation" role="alert"></p><div class="rfec__actions"><button type="button" class="rfec__next">Continue</button></div>
    </section>

    <section class="rfec__step" data-step="2"><p class="rfec__question-number">Step 2 of 5</p><h3>Tell us about the roof size, slope and height</h3>
      <div class="rfec__grid rfec__grid--3"><label class="rfec__field"><span>Estimated roof area (sq ft)</span><input type="number" name="roof_area" min="100" max="50000" placeholder="2000" required></label><label class="rfec__field"><span>Roof pitch</span><select name="pitch"><option value="low">Low slope — under about 18°</option><option value="standard" selected>Typical slope — about 18° to 30°</option><option value="steep">Steep — about 31° to 40°</option><option value="very_steep">Very steep — over 40°</option></select><small>Pitch describes how sharply the roof rises. If unsure, choose “Typical slope.”</small></label><label class="rfec__field"><span>Stories</span><select name="stories"><option value="one">1 story</option><option value="two" selected>2 stories</option><option value="three_plus">3+ stories</option></select></label></div>
      <p class="rfec__validation" role="alert"></p><div class="rfec__actions"><button type="button" class="rfec__back">Back</button><button type="button" class="rfec__next">Continue</button></div>
    </section>

    <section class="rfec__step" data-step="3"><p class="rfec__question-number">Step 3 of 5</p><h3>Which illustration looks most like your roof?</h3><p class="rfec__hint">Compare the overall shape, valleys, dormers and intersecting roof sections—not the exact architectural style.</p>
      <div class="rfec__roof-shapes"><?php foreach($this->complexity_options($s) as $key=>$label): ?><label class="rfec__roof-shape"><input type="radio" name="complexity" value="<?php echo esc_attr($key); ?>" <?php checked($key,'average'); ?>><span><img src="<?php echo esc_url($this->complexity_image_url($key,$s)); ?>" alt=""><b><?php echo esc_html($label); ?></b><small><?php echo esc_html($complexity_descriptions[$key] ?? 'Roof shape and complexity'); ?></small></span></label><?php endforeach; ?></div>
      <div class="rfec__grid"><label class="rfec__field"><span>Site access</span><select name="access"><option value="open">Open access for crew and bin</option><option value="limited">Limited equipment / bin access</option><option value="hand_carry">Materials must be hand-carried</option></select></label></div>
      <div class="rfec__actions"><button type="button" class="rfec__back">Back</button><button type="button" class="rfec__next">Continue</button></div>
    </section>

    <section class="rfec__step" data-step="4"><p class="rfec__question-number">Step 4 of 5</p><h3>Add roof penetrations and details</h3>
      <div class="rfec__grid rfec__grid--2"><label class="rfec__field"><span>Roof vents</span><input type="number" name="vents" min="0" max="30" value="4"></label><label class="rfec__field"><span>Skylights</span><input type="number" name="skylights" min="0" max="20" value="0"></label><label class="rfec__field"><span>Chimneys</span><input type="number" name="chimneys" min="0" max="10" value="0"></label><label class="rfec__field"><span>Are there solar panels on any part of the roof?</span><select name="solar_array"><option value="none">None</option><option value="small">Small array (1 to 10 panels)</option><option value="medium">Medium array (11–20 panels)</option><option value="large">Large array (21 or more panels)</option></select></label></div>
      <div class="rfec__actions"><button type="button" class="rfec__back">Back</button><button type="button" class="rfec__next">Continue</button></div>
    </section>

    <section class="rfec__step" data-step="5"><p class="rfec__question-number">Step 5 of 5</p><h3>Which project options should we account for?</h3>
      <div class="rfec__option-list"><label><input type="checkbox" name="disposal" checked><span><b>Removal, disposal and site cleanup</b><small>Includes removal of one standard existing roof layer.</small></span></label><label><input type="checkbox" name="ventilation_upgrade"><span><b>Ventilation review / upgrade</b><small>Adds one system allowance in addition to individual vents.</small></span></label><label><input type="checkbox" name="permit"><span><b>Permit handling allowance</b><small>Contractor-managed applications where required.</small></span></label></div>
      <div class="rfec__actions"><button type="button" class="rfec__back">Back</button><button type="button" class="rfec__estimate">See my estimate</button></div>
    </section>

    <section class="rfec__step" data-step="6"><div class="rfec__result" aria-live="polite"><span>Ballpark project range</span><strong data-range></strong><small>Estimated midpoint: <b data-midpoint></b></small></div><p class="rfec__notice" data-tax-note></p><div class="rfec__line-items"><h3>Estimate details</h3><table><tbody data-lines></tbody></table></div><p>This planning range is not a quote. Final pricing requires verified roof measurements and an inspection of decking, flashing, ventilation, access and code requirements.</p>
      <?php if(!$admin_test): ?><div class="rfec__lead"><h3><?php echo esc_html($s['form_heading']); ?></h3><p><?php echo esc_html($s['cta_text']); ?></p><div class="rfec__grid rfec__grid--2"><label class="rfec__field"><span>Name *</span><input name="name" required></label><label class="rfec__field"><span>Email *</span><input type="email" name="email" required></label><label class="rfec__field"><span>Phone *</span><input name="phone" required></label><label class="rfec__field"><span>Street address *</span><input name="address" required></label><label class="rfec__field"><span>City *</span><input name="city" required></label><label class="rfec__field"><span>Postal / ZIP code *</span><input name="postal" required></label></div><label class="rfec__hp" aria-hidden="true">Website<input name="website" tabindex="-1"></label><p class="rfec__submit-message" role="alert"></p><button type="submit" class="rfec__email"><?php echo esc_html($s['submit_button_text']); ?></button></div><?php endif; ?>
      <div class="rfec__actions"><button type="button" class="rfec__edit rfec__back">Edit answers</button><button type="button" class="rfec__print">Print estimate</button></div>
    </section>
  </form>
</div>
