(function(){
/* global React, Link, Icon, Breadcrumbs */
const { useState, useEffect, useMemo } = React;

const ZAPIER_WEBHOOK = 'https://hooks.zapier.com/hooks/catch/21809085/uv1ibvd/';

const STEPS = [
  { id: 'property', title: 'Your property', sub: "So we know what we're working with." },
  { id: 'project',  title: 'Project type', sub: 'Install, replace, repair, clean, or guards.' },
  { id: 'style',    title: 'Gutter style', sub: 'Profile and shape.' },
  { id: 'material', title: 'Material', sub: 'Aluminum, copper, or galvanized.' },
  { id: 'size',     title: 'Size', sub: 'Capacity by roof area.' },
  { id: 'color',    title: 'Color & finish', sub: 'Match your fascia, trim, or house color.' },
  { id: 'addons',   title: 'Add-ons', sub: 'Guards, chains, extensions, heat tape.' },
  { id: 'timeline', title: 'Timeline & budget', sub: 'When, and rough range.' },
  { id: 'contact',  title: 'Contact info', sub: 'How should we reach you?' },
  { id: 'photos',   title: 'Photos (optional)', sub: 'Helps us quote faster.' },
  { id: 'review',   title: 'Review & submit', sub: 'One look, then send.' },
];

const COLORS = [
  ['White','#F2F1EC'],['Almond','#E3D8C3'],['Linen','#E8E0CE'],['Clay','#BDA37A'],
  ['Sandstone','#C7B490'],['Terratone','#8A6F52'],['Musket Brown','#4A3B2E'],['Royal Brown','#3E2B21'],
  ['Forest Green','#2D3F38'],['Colonial Red','#7E2F2A'],['Charcoal','#3B3B3B'],['Black','#1C1C1C'],
  ['Copper (raw)','#B56A3A'],['Patina','#4E8B76'],['Custom color match','repeating-linear-gradient(135deg,#ccc 0 6px,#eee 6px 12px)'],
];

const INITIAL = {
  address: '', city: '', zip: '',
  homeType: '', stories: '', roofType: '', linearFeet: '',
  projectType: [],
  style: '',
  material: '',
  size: '',
  color: '',
  addons: [],
  timeline: '', budget: '',
  name: '', email: '', phone: '', contactPref: 'phone',
  photos: [],
};

function GutterGuide() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState(() => {
    try { return JSON.parse(localStorage.getItem('cgp_guide') || 'null') || INITIAL; } catch { return INITIAL; }
  });
  const [submitStatus, setSubmitStatus] = useState('idle');
  const [touched, setTouched] = useState({});

  useEffect(() => { localStorage.setItem('cgp_guide', JSON.stringify(data)); }, [data]);

  const pct = Math.round((step / (STEPS.length - 1)) * 100);
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData((d) => {
    const arr = d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v];
    return { ...d, [k]: arr };
  });

  const validate = () => {
    const id = STEPS[step].id;
    if (id === 'property') return data.address && data.city && data.zip;
    if (id === 'project') return data.projectType.length > 0;
    if (id === 'style') return !!data.style;
    if (id === 'material') return !!data.material;
    if (id === 'size') return !!data.size;
    if (id === 'color') return !!data.color;
    if (id === 'timeline') return data.timeline && data.budget;
    if (id === 'contact') return data.name && data.email && data.phone;
    return true;
  };

  const next = () => {
    setTouched(t => ({ ...t, [STEPS[step].id]: true }));
    if (!validate()) return;
    setStep((s) => Math.min(STEPS.length - 1, s + 1));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  const back = () => setStep((s) => Math.max(0, s - 1));

  const submit = async () => {
    setSubmitStatus('sending');
    try {
      const payload = {
        form_source: 'gutter_guide',
        submitted_at: new Date().toISOString(),
        page_url: window.location.href,
        user_agent: navigator.userAgent,
        ...data,
      };
      const params = new URLSearchParams();
      Object.entries(payload).forEach(([key, value]) => {
        params.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value));
      });
      const res = await fetch(ZAPIER_WEBHOOK, { method: 'POST', body: params });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      localStorage.removeItem('cgp_guide');
      setSubmitStatus('success');
    } catch (err) {
      setSubmitStatus('error');
    }
  };

  if (submitStatus === 'success') return <ThanksScreen data={data} reset={() => { setData(INITIAL); setSubmitStatus('idle'); setStep(0); }}/>;

  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Gutter Guide' }]}/></div>
      <section style={{ padding: '16px 0 56px' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 320px', gap: 32, alignItems: 'start' }}>
            <aside style={{ position: 'sticky', top: 96 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Gutter Guide</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--color-primary)', marginBottom: 20 }}>Build your quote</h3>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 4 }}>
                {STEPS.map((s, i) => {
                  const active = i === step, done = i < step;
                  return (
                    <li key={s.id}>
                      <button onClick={() => setStep(i)}
                        style={{ width: '100%', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 10, alignItems: 'center', padding: '8px 10px', borderRadius: 8, background: active ? 'var(--color-accent-soft)' : 'transparent', textAlign: 'left' }}>
                        <span style={{
                          width: 24, height: 24, borderRadius: 99,
                          background: done ? 'var(--color-primary)' : active ? 'var(--color-primary)' : 'var(--color-border)',
                          color: done || active ? '#F8F4EC' : 'var(--color-text-muted)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 11, fontWeight: 600,
                        }}>
                          {done ? <Icon name="check" size={12}/> : i + 1}
                        </span>
                        <span style={{ fontSize: 13, fontWeight: active ? 600 : 500, color: active || done ? 'var(--color-primary)' : 'var(--color-text-muted)' }}>{s.title}</span>
                      </button>
                    </li>
                  );
                })}
              </ol>
            </aside>

            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
                <div style={{ flex: 1, height: 6, background: 'var(--color-border)', borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${pct}%`, background: 'var(--color-primary)', transition: 'width .25s ease' }}/>
                </div>
                <div style={{ fontSize: 13, color: 'var(--color-text-muted)', fontWeight: 600 }}>{pct}% done</div>
              </div>

              <div className="card" style={{ padding: 36 }}>
                <div style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 8 }}>Step {step + 1} of {STEPS.length}</div>
                <h2 style={{ fontSize: 26, fontWeight: 500, marginBottom: 6 }}>{STEPS[step].title}</h2>
                <p className="muted" style={{ marginBottom: 28 }}>{STEPS[step].sub}</p>

                <StepBody step={STEPS[step].id} data={data} update={update} toggle={toggle} touched={touched[STEPS[step].id]} />

                {submitStatus === 'error' && step === STEPS.length - 1 && (
                  <div style={{ marginTop: 24, padding: '14px 18px', borderRadius: 10, background: '#FAEEED', color: '#7A3A38', fontSize: 14 }}>
                    We couldn't submit your quote request. Your answers are saved — please try again, or call <a href="tel:+13234521809" style={{ color: '#7A3A38', textDecoration: 'underline', fontWeight: 600 }}>(323) 452-1809</a> or email <a href="mailto:admin@coastlinegutterpros.com" style={{ color: '#7A3A38', textDecoration: 'underline', fontWeight: 600 }}>admin@coastlinegutterpros.com</a>.
                  </div>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--color-border)' }}>
                  <button onClick={back} disabled={step === 0 || submitStatus === 'sending'} className="btn btn-ghost" style={{ opacity: step === 0 ? 0.4 : 1 }}>
                    <Icon name="arrow" size={14} stroke={1.8}/> <span style={{ transform: 'rotate(180deg)', display: 'inline-block' }}></span>Back
                  </button>
                  {step < STEPS.length - 1 ? (
                    <button onClick={next} className="btn btn-primary">Continue <Icon name="arrow" size={14}/></button>
                  ) : (
                    <button onClick={submit} className="btn btn-primary btn-lg" disabled={submitStatus === 'sending'}>
                      {submitStatus === 'sending' ? 'Sending…' : <>Submit quote request <Icon name="check" size={14}/></>}
                    </button>
                  )}
                </div>
              </div>
            </div>

            <SummaryCard data={data} step={step}/>
          </div>
        </div>
        <style>{`
          @media(max-width: 1100px){
            section .wrap > div { grid-template-columns: 1fr !important; }
            aside { position: static !important; }
            aside ol { display: flex !important; overflow-x: auto; gap: 6px !important; padding-bottom: 8px !important; }
            aside ol li { flex: none; }
          }
        `}</style>
      </section>
    </div>
  );
}

function StepBody({ step, data, update, toggle, touched }) {
  if (step === 'property') {
    return (
      <div style={{ display: 'grid', gap: 16 }}>
        <div className="field">
          <label>Street address</label>
          <input className="input" placeholder="123 Sierra Madre Blvd" value={data.address} onChange={e => update('address', e.target.value)}/>
          {touched && !data.address && <ErrorMsg>We need an address to quote accurately.</ErrorMsg>}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
          <div className="field"><label>City</label><input className="input" value={data.city} onChange={e => update('city', e.target.value)}/></div>
          <div className="field"><label>ZIP</label><input className="input" value={data.zip} onChange={e => update('zip', e.target.value)}/></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="field">
            <label>Home type</label>
            <select className="select" value={data.homeType} onChange={e => update('homeType', e.target.value)}>
              <option value="">Select…</option>
              <option>Single-family</option><option>Duplex / multi-family</option><option>Townhome</option><option>Commercial / mixed-use</option>
            </select>
          </div>
          <div className="field">
            <label>Number of stories</label>
            <select className="select" value={data.stories} onChange={e => update('stories', e.target.value)}>
              <option value="">Select…</option>
              <option>1 story</option><option>1.5 stories</option><option>2 stories</option><option>3+ stories</option>
            </select>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="field">
            <label>Roof type</label>
            <select className="select" value={data.roofType} onChange={e => update('roofType', e.target.value)}>
              <option value="">Select…</option>
              <option>Composition shingle</option><option>Spanish / clay tile</option><option>Concrete tile</option>
              <option>Standing seam metal</option><option>Flat / torchdown</option><option>Shake / wood</option><option>Not sure</option>
            </select>
          </div>
          <div className="field">
            <label>Linear feet (if known)</label>
            <input className="input" placeholder="e.g. 120" value={data.linearFeet} onChange={e => update('linearFeet', e.target.value)}/>
            <span className="hint">Optional — we'll measure at the estimate.</span>
          </div>
        </div>
      </div>
    );
  }

  if (step === 'project') {
    const opts = [
      ['install', 'New installation', 'No gutters currently, or adding to an addition.'],
      ['replace', 'Full replacement', 'Existing gutters removed and replaced.'],
      ['repair',  'Repair', 'Leaks, sags, fallen sections, or damaged miters.'],
      ['clean',   'Cleaning', 'Debris removal and downspout flush.'],
      ['guards',  'Gutter guards', 'Protect existing or new gutters from debris.'],
    ];
    return (
      <>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {opts.map(([id, title, sub]) => (
            <CheckCard key={id} active={data.projectType.includes(id)} onClick={() => toggle('projectType', id)} title={title} sub={sub}/>
          ))}
        </div>
        <p className="hint" style={{ marginTop: 14, fontSize: 13, color: 'var(--color-text-muted)' }}>Pick one or more.</p>
        {touched && !data.projectType.length && <ErrorMsg>Choose at least one.</ErrorMsg>}
      </>
    );
  }

  if (step === 'style') {
    const styles = [
      ['k-style', 'K-style', 'Residential standard. Ogee profile.'],
      ['half-round', 'Half-round', 'Period-accurate curve. Craftsman / Tudor / Spanish.'],
      ['european', 'European', 'Bead-fronted half-round. Exposed hangers.'],
      ['box', 'Box / commercial', 'Integrated into roof edge. Flat-roof and commercial.'],
      ['not-sure', 'Not sure yet', "We'll walk you through it at the estimate."],
    ];
    return (
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {styles.map(([id, t, s]) => (
          <RadioCard key={id} active={data.style === id} onClick={() => update('style', id)} title={t} sub={s}/>
        ))}
      </div>
    );
  }

  if (step === 'material') {
    const m = [
      ['aluminum', 'Seamless aluminum', '.032″ standard · 25+ finishes · Best value'],
      ['copper', 'Copper', '16oz · hand-soldered · 3–5× price · Heritage'],
      ['galvanized', 'Galvanized steel', '26-ga G90 · industrial / commercial'],
      ['not-sure', 'Help me decide', "We'll recommend based on your home."],
    ];
    return (
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {m.map(([id, t, s]) => (
          <RadioCard key={id} active={data.material === id} onClick={() => update('material', id)} title={t} sub={s}/>
        ))}
      </div>
    );
  }

  if (step === 'size') {
    const sizes = [
      ['5', '5 inch', 'Standard residential. Fine for most LA homes.'],
      ['6', '6 inch', 'Larger roof areas or heavier rainfall.'],
      ['7', '7 inch', 'Oversized. Commercial or very large roof areas.'],
      ['not-sure', "I'm not sure", "We'll calculate based on roof area."],
    ];
    return (
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {sizes.map(([id, t, s]) => (
          <RadioCard key={id} active={data.size === id} onClick={() => update('size', id)} title={t} sub={s}/>
        ))}
      </div>
    );
  }

  if (step === 'color') {
    return (
      <div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {COLORS.map(([name, swatch]) => {
            const active = data.color === name;
            return (
              <button key={name} onClick={() => update('color', name)}
                style={{
                  padding: 10, borderRadius: 12, textAlign: 'center',
                  background: active ? 'var(--color-accent-soft)' : 'var(--color-surface)',
                  border: '1px solid', borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
                  transition: 'all .15s', cursor: 'pointer',
                }}>
                <div style={{ aspectRatio: '1', borderRadius: 8, background: swatch, border: '1px solid rgba(0,0,0,0.08)', marginBottom: 8 }}/>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--color-primary)' }}>{name}</div>
              </button>
            );
          })}
        </div>
        <p className="hint" style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 14 }}>We'll bring a physical color fan to the estimate — these are approximations.</p>
      </div>
    );
  }

  if (step === 'addons') {
    const addons = [
      ['guards', 'Gutter guards', 'Micro-mesh or reverse-curve to prevent debris build-up.'],
      ['chains', 'Rain chains', 'Decorative alternative to a traditional downspout.'],
      ['extensions', 'Downspout extensions', 'Move water 4–6 ft away from foundation.'],
      ['splash', 'Splash blocks', 'Concrete or poly diverter at the base of a downspout.'],
      ['heat', 'Heat tape', 'Rarely needed in LA, but useful in higher-elevation areas.'],
      ['buried', 'Buried drains', 'PVC routing to a pop-up or the street.'],
    ];
    return (
      <>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {addons.map(([id, t, s]) => (
            <CheckCard key={id} active={data.addons.includes(id)} onClick={() => toggle('addons', id)} title={t} sub={s}/>
          ))}
        </div>
        <p className="hint" style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 14 }}>Optional — add any you're interested in.</p>
      </>
    );
  }

  if (step === 'timeline') {
    return (
      <div style={{ display: 'grid', gap: 22 }}>
        <div className="field">
          <label>When do you need this done?</label>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginTop: 4 }}>
            {['ASAP (within 2 weeks)', 'This month', 'Next 1–3 months', 'Just planning ahead'].map((t) => (
              <RadioCard key={t} active={data.timeline === t} onClick={() => update('timeline', t)} title={t}/>
            ))}
          </div>
        </div>
        <div className="field">
          <label>Rough budget</label>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4 }}>
            {['Under $1,500', '$1,500 – $4,000', '$4,000 – $8,000', '$8,000 – $15,000', '$15,000+', 'Not sure yet'].map((t) => (
              <RadioCard key={t} active={data.budget === t} onClick={() => update('budget', t)} title={t}/>
            ))}
          </div>
          <span className="hint">This stays between us — we use it to recommend materials that fit.</span>
        </div>
      </div>
    );
  }

  if (step === 'contact') {
    return (
      <div style={{ display: 'grid', gap: 16 }}>
        <div className="field">
          <label>Your name</label>
          <input className="input" value={data.name} onChange={e => update('name', e.target.value)}/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="field"><label>Email</label><input className="input" type="email" value={data.email} onChange={e => update('email', e.target.value)}/></div>
          <div className="field"><label>Phone</label><input className="input" type="tel" value={data.phone} onChange={e => update('phone', e.target.value)}/></div>
        </div>
        <div className="field">
          <label>Preferred contact method</label>
          <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
            {['phone', 'text', 'email'].map((m) => (
              <button key={m} onClick={() => update('contactPref', m)}
                style={{
                  padding: '10px 18px', borderRadius: 999, fontWeight: 500,
                  background: data.contactPref === m ? 'var(--color-primary)' : 'var(--color-surface)',
                  color: data.contactPref === m ? '#F8F4EC' : 'var(--color-primary)',
                  border: '1px solid', borderColor: data.contactPref === m ? 'var(--color-primary)' : 'var(--color-border)',
                  textTransform: 'capitalize', cursor: 'pointer',
                }}>{m}</button>
            ))}
          </div>
        </div>
        {touched && (!data.name || !data.email || !data.phone) && <ErrorMsg>Name, email, and phone are all required.</ErrorMsg>}
      </div>
    );
  }

  if (step === 'photos') {
    return (
      <div>
        <label style={{ display: 'block' }}>
          <div style={{
            border: '2px dashed var(--color-border)', borderRadius: 14,
            padding: 48, textAlign: 'center', cursor: 'pointer',
            background: 'var(--color-bg)',
          }}>
            <Icon name="upload" size={26}/>
            <div style={{ marginTop: 14, fontWeight: 600, color: 'var(--color-primary)' }}>Drop photos here or click to upload</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>Helpful: front elevation, problem spots, fascia detail, existing downspouts. JPG/PNG, up to 10 MB each.</div>
          </div>
          <input type="file" multiple accept="image/*" style={{ display: 'none' }}
                 onChange={(e) => update('photos', Array.from(e.target.files || []).map(f => f.name))}/>
        </label>
        {data.photos.length > 0 && (
          <div style={{ marginTop: 18, display: 'grid', gap: 8 }}>
            {data.photos.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, background: 'var(--color-accent-soft)', borderRadius: 8, fontSize: 13 }}>
                <Icon name="check" size={14}/> {p}
              </div>
            ))}
          </div>
        )}
        <p className="hint" style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 16 }}>Photos are optional — we can quote without them.</p>
      </div>
    );
  }

  if (step === 'review') {
    const rows = [
      ['Property', `${data.address || '—'}, ${data.city || '—'} ${data.zip}`],
      ['Home', [data.homeType, data.stories, data.roofType].filter(Boolean).join(' · ') || '—'],
      ['Project', data.projectType.join(', ') || '—'],
      ['Style', data.style || '—'],
      ['Material', data.material || '—'],
      ['Size', data.size ? `${data.size}″` : '—'],
      ['Color', data.color || '—'],
      ['Add-ons', data.addons.join(', ') || '—'],
      ['Timeline', data.timeline || '—'],
      ['Budget', data.budget || '—'],
      ['Contact', `${data.name} · ${data.email} · ${data.phone} (prefers ${data.contactPref})`],
      ['Photos', data.photos.length ? `${data.photos.length} attached` : 'None'],
    ];
    return (
      <div>
        <p style={{ marginBottom: 20, color: 'var(--color-text-muted)' }}>Double-check everything, then hit submit.</p>
        <div style={{ display: 'grid', gap: 0, border: '1px solid var(--color-border)', borderRadius: 12, overflow: 'hidden' }}>
          {rows.map(([k, v], i) => (
            <div key={k} style={{
              display: 'grid', gridTemplateColumns: '160px 1fr',
              padding: '14px 18px',
              background: i % 2 ? 'var(--color-bg)' : 'var(--color-surface)',
              fontSize: 14,
            }}>
              <div style={{ color: 'var(--color-text-muted)', fontWeight: 600 }}>{k}</div>
              <div style={{ color: 'var(--color-primary)' }}>{v || '—'}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

function CheckCard({ active, onClick, title, sub }) {
  return (
    <button onClick={onClick}
      style={{
        textAlign: 'left', padding: 18, borderRadius: 12, cursor: 'pointer',
        background: active ? 'var(--color-accent-soft)' : 'var(--color-surface)',
        border: '1px solid', borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
        display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'start', transition: 'all .15s',
      }}>
      <div style={{
        width: 20, height: 20, borderRadius: 6, marginTop: 2,
        border: '1.5px solid', borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
        background: active ? 'var(--color-primary)' : 'transparent',
        color: '#F8F4EC', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {active && <Icon name="check" size={12}/>}
      </div>
      <div>
        <div style={{ fontWeight: 600, color: 'var(--color-primary)' }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 4 }}>{sub}</div>}
      </div>
    </button>
  );
}

function RadioCard({ active, onClick, title, sub }) {
  return (
    <button onClick={onClick}
      style={{
        textAlign: 'left', padding: 18, borderRadius: 12, cursor: 'pointer',
        background: active ? 'var(--color-accent-soft)' : 'var(--color-surface)',
        border: '1px solid', borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
        display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'start', transition: 'all .15s',
      }}>
      <div style={{
        width: 20, height: 20, borderRadius: 99, marginTop: 2,
        border: '1.5px solid', borderColor: active ? 'var(--color-primary)' : 'var(--color-border)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {active && <div style={{ width: 10, height: 10, borderRadius: 99, background: 'var(--color-primary)' }}/>}
      </div>
      <div>
        <div style={{ fontWeight: 600, color: 'var(--color-primary)' }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 4 }}>{sub}</div>}
      </div>
    </button>
  );
}

function ErrorMsg({ children }) {
  return <div style={{ padding: '10px 14px', borderRadius: 10, background: '#FAEEED', color: '#7A3A38', fontSize: 13, marginTop: 8 }}>{children}</div>;
}

function SummaryCard({ data, step }) {
  const rows = [
    ['Property', [data.address, data.city].filter(Boolean).join(', ') || '—'],
    ['Project', data.projectType.join(', ') || '—'],
    ['Style', data.style || '—'],
    ['Material', data.material || '—'],
    ['Size', data.size ? `${data.size}″` : '—'],
    ['Color', data.color || '—'],
    ['Add-ons', data.addons.length ? `${data.addons.length} selected` : '—'],
    ['Budget', data.budget || '—'],
  ];
  return (
    <aside style={{ position: 'sticky', top: 96 }}>
      <div className="card" style={{ padding: 24, background: 'var(--color-bg)' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Live summary</div>
        <h3 style={{ fontSize: 16, marginBottom: 16 }}>Your quote-in-progress</h3>
        <div style={{ display: 'grid', gap: 10, fontSize: 13 }}>
          {rows.map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, paddingBottom: 8, borderBottom: '1px solid var(--color-border)' }}>
              <span style={{ color: 'var(--color-text-muted)', fontWeight: 500 }}>{k}</span>
              <span style={{ color: 'var(--color-primary)', fontWeight: 500, textAlign: 'right', textTransform: 'capitalize' }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20, padding: 14, background: 'var(--color-accent-soft)', borderRadius: 10, fontSize: 13, color: 'var(--color-primary)' }}>
          <Icon name="clock" size={13}/> <strong>15-minute callback</strong> during business hours — after you submit.
        </div>
      </div>
    </aside>
  );
}

function ThanksScreen({ data, reset }) {
  return (
    <section style={{ padding: '96px 0 120px' }}>
      <div className="wrap-n" style={{ textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 99, background: 'var(--color-primary)', color: '#F8F4EC', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
          <Icon name="check" size={32}/>
        </div>
        <h1>Thanks, {data.name.split(' ')[0] || 'friend'}.</h1>
        <p style={{ fontSize: 18, color: 'var(--color-text-muted)', maxWidth: 520, margin: '20px auto 0' }}>
          We got your request and a real human has it now. Expect a call at <strong style={{ color: 'var(--color-primary)' }}>{data.phone || 'your number'}</strong> within 15 minutes during business hours.
        </p>
        <div className="card" style={{ textAlign: 'left', padding: 28, marginTop: 36 }}>
          <h3 style={{ marginBottom: 12 }}>What happens next</h3>
          <ol style={{ margin: 0, paddingLeft: 20, display: 'grid', gap: 10, color: 'var(--color-text)', fontSize: 15 }}>
            <li>We'll call to confirm your address and walk through your project over the phone.</li>
            <li>We'll schedule an on-site measurement at a time that works for you.</li>
            <li>You'll get a written, itemized quote same day — no upsells, no pressure.</li>
          </ol>
        </div>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <a href="tel:+13234521809" className="btn btn-secondary"><Icon name="phone" size={14}/> (323) 452-1809</a>
          <button onClick={reset} className="btn btn-ghost">Start a new quote</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GutterGuide });

})();