/* TV Frame Builder — the hero builder */
const { FRAME_STYLES, TV_BRANDS, IMAGES: TVIMG } = window.SAM;

const StepPip = ({ steps, current }) => (
  <div className="steppip" style={{ flexWrap: 'wrap' }}>
    {steps.map((s, i) => {
      const done = i < current;
      const active = i === current;
      return (
        <Fragment key={s}>
          <span className={`pip ${done ? 'done' : ''} ${active ? 'active' : ''}`}>
            {done ? <Icon name="Check" size={12}/> : i + 1}
          </span>
          <span style={{
            fontWeight: active ? 600 : 400,
            color: active ? 'var(--ink)' : 'var(--muted)',
            fontSize: 13
          }}>{s}</span>
          {i < steps.length - 1 && <span className={`seg ${done ? 'done' : ''}`}/>}
        </Fragment>
      );
    })}
  </div>
);

const FrameVisual = ({ frame, x = 55, y = 32, label = 'Your TV' }) => {
  // Render a stylized frame around a TV silhouette using the chosen frame style
  const aspect = (Number(x) || 55) / (Number(y) || 32);
  const w = 360;
  const h = w / aspect;
  const fw = 22; // frame thickness in svg units
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', maxWidth: 560, display: 'block', margin: '0 auto' }}>
      {/* outer frame */}
      <rect x="0" y="0" width={w} height={h} fill={frame.color}
        stroke="rgba(0,0,0,0.15)" strokeWidth="0.5"/>
      {/* inner bevel */}
      <rect x={fw - 4} y={fw - 4} width={w - 2 * (fw - 4)} height={h - 2 * (fw - 4)}
        fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth="1"/>
      {/* tv screen */}
      <rect x={fw} y={fw} width={w - 2 * fw} height={h - 2 * fw} fill="#0F0F0F"/>
      {/* subtle reflection */}
      <rect x={fw} y={fw} width={w - 2 * fw} height={(h - 2 * fw) * 0.4}
        fill="url(#shine)" opacity="0.18"/>
      <defs>
        <linearGradient id="shine" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#fff"/>
          <stop offset="1" stopColor="#fff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <text x={w / 2} y={h / 2 + 4} fontSize="10" fill="#5A5A55"
        fontFamily="JetBrains Mono" textAnchor="middle">{label}</text>
    </svg>
  );
};

const Step1Method = ({ method, setMethod }) => (
  <div>
    <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
      How do you want to spec your TV?
    </h2>
    <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
      Two options — measure yourself, or just send us your TV's make & model and we'll handle it.
    </p>
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginTop: 28
    }} className="m-grid">
      {[
        { id: 'measure', icon: 'Ruler', title: 'Enter my measurements',
          desc: 'X, Y, and Z dimensions — we show you exactly how to measure.' },
        { id: 'model', icon: 'Tv', title: "Send my TV's make & model",
          desc: "Pick from a list. We'll look up the exact dimensions." },
      ].map(opt => (
        <button key={opt.id} onClick={() => setMethod(opt.id)} style={{
          textAlign: 'left', padding: 24, borderRadius: 10,
          border: '1.5px solid ' + (method === opt.id ? 'var(--ink)' : 'var(--hair-strong)'),
          background: method === opt.id ? '#FAFAF8' : '#fff',
          cursor: 'pointer', position: 'relative',
          transition: 'all .15s'
        }}>
          {method === opt.id && (
            <span style={{
              position: 'absolute', top: 14, right: 14,
              width: 22, height: 22, borderRadius: 999,
              background: 'var(--ink)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <Icon name="Check" size={12}/>
            </span>
          )}
          <Icon name={opt.icon} size={24} style={{ color: 'var(--red)' }}/>
          <div className="display" style={{ fontSize: 18, fontWeight: 700, marginTop: 12 }}>
            {opt.title}
          </div>
          <div style={{ fontSize: 14, color: 'var(--ink-body)', marginTop: 4 }}>
            {opt.desc}
          </div>
        </button>
      ))}
    </div>
    <style>{`
      @media (max-width: 700px) { .m-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </div>
);

const DimInput = ({ label, value, onChange, sub, helpImg, helpAlt, helpLabel, min = 18, max = 90 }) => {
  const [tip, setTip] = useState(false);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <label className="label">{label}</label>
        <button onClick={() => setTip(v => !v)} style={{
          background: 'transparent', border: 0, color: 'var(--muted)',
          fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 4
        }}>
          <Icon name="Info" size={13}/> How to measure
        </button>
      </div>
      <div style={{ position: 'relative' }}>
        <input type="number" className="input input-lg"
          value={value} onChange={e => onChange(e.target.value)}
          min={min} max={max} step="0.25"/>
        <span className="mono" style={{
          position: 'absolute', right: 18, top: '50%', transform: 'translateY(-50%)',
          color: 'var(--muted)', fontSize: 14
        }}>inches</span>
      </div>
      <div className="helper">{sub}</div>
      {tip && (
        <div style={{
          marginTop: 12, padding: 14, background: '#FFF9F4',
          border: '1px solid #F1DACE', borderRadius: 8,
          display: 'flex', gap: 14, alignItems: 'flex-start'
        }}>
          <div style={{ width: 96, flexShrink: 0 }}>
            <div style={{ aspectRatio: '1/1', borderRadius: 4, overflow: 'hidden' }}>
              <SmartImg src={helpImg} alt={helpAlt} label={helpLabel}/>
            </div>
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-body)', lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--ink)' }}>{label}</strong> — {sub}
            <br/><span style={{ color: 'var(--muted)' }}>
              Tip: measure to the outermost edge of the TV bezel.
            </span>
          </div>
        </div>
      )}
    </div>
  );
};

const Step2Measure = ({ method, dims, setDims, model, setModel }) => {
  if (method === 'model') {
    return (
      <div>
        <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
          Tell us about your TV.
        </h2>
        <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
          Brand and model number — that's all we need. We'll look up the exact dimensions.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 28 }} className="m-grid">
          <div>
            <label className="label">TV Brand</label>
            <select className="select input-lg" value={model.brand}
              onChange={e => setModel({ ...model, brand: e.target.value })}>
              {TV_BRANDS.map(b => <option key={b}>{b}</option>)}
            </select>
          </div>
          <div>
            <label className="label">Model Number</label>
            <input className="input input-lg"
              placeholder="e.g. QN65Q80C"
              value={model.modelNumber}
              onChange={e => setModel({ ...model, modelNumber: e.target.value })}/>
          </div>
        </div>
        <div style={{
          marginTop: 24, padding: 14,
          background: 'var(--soft)', borderRadius: 8, fontSize: 13,
          color: 'var(--ink-body)', display: 'flex', gap: 10
        }}>
          <Icon name="Info" size={16} style={{ color: 'var(--red)', flexShrink: 0, marginTop: 2 }}/>
          <div>
            Don't know your model? Check the sticker on the back of the TV, or
            switch to "Enter my measurements" — it's only three numbers.
          </div>
        </div>
      </div>
    );
  }
  return (
    <div>
      <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
        Three critical measurements.
      </h2>
      <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
        All of which are easy to measure — we'll show you how.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 28 }} className="dim-grid">
        <DimInput
          label="X Dimension · Width"
          value={dims.x} onChange={v => setDims({ ...dims, x: v })}
          sub="Overall width of the TV to the outermost edge."
          helpImg={TVIMG.TV_MEASURE_FRONT}
          helpAlt="How to measure TV width and height"
          helpLabel="Measurement diagram · TV front · X & Y"
        />
        <DimInput
          label="Y Dimension · Height"
          value={dims.y} onChange={v => setDims({ ...dims, y: v })}
          sub="Overall height of the TV to the outermost edge."
          helpImg={TVIMG.TV_MEASURE_FRONT}
          helpAlt="How to measure TV height"
          helpLabel="Measurement diagram · TV front"
          min={12} max={60}
        />
        <DimInput
          label="Z Dimension · Depth"
          value={dims.z} onChange={v => setDims({ ...dims, z: v })}
          sub="Depth from the front edge of the TV to the wall."
          helpImg={TVIMG.TV_MEASURE_SIDE}
          helpAlt="How to measure TV depth"
          helpLabel="Measurement diagram · TV side · Z"
          min={1} max={12}
        />
      </div>
      <style>{`
        @media (max-width: 700px) {
          .dim-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
};

const Step3Style = ({ frame, setFrame }) => (
  <div>
    <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
      Pick a frame style.
    </h2>
    <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
      Six standard mouldings. Want something custom? Just note it in the quote request.
    </p>
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 28
    }} className="style-grid">
      {FRAME_STYLES.map(f => {
        const sel = frame.id === f.id;
        return (
          <button key={f.id} onClick={() => setFrame(f)} style={{
            border: '1.5px solid ' + (sel ? 'var(--ink)' : 'var(--hair-strong)'),
            borderRadius: 10, padding: 14, textAlign: 'left',
            background: sel ? '#FAFAF8' : '#fff', cursor: 'pointer',
            transition: 'all .15s', position: 'relative'
          }}>
            {sel && (
              <span style={{
                position: 'absolute', top: 10, right: 10,
                width: 22, height: 22, borderRadius: 999,
                background: 'var(--ink)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name="Check" size={12}/>
              </span>
            )}
            <div style={{
              aspectRatio: '4/3', borderRadius: 4,
              background: f.color, border: '1px solid rgba(0,0,0,0.1)',
              padding: 10, marginBottom: 10
            }}>
              <div style={{
                width: '100%', height: '100%', background: '#0F0F0F',
                borderRadius: 1
              }}/>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div className="display" style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>
                {f.name}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>
                {f.id}
              </div>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>
              {f.profile}
            </div>
          </button>
        );
      })}
    </div>
    <style>{`
      @media (max-width: 700px) { .style-grid { grid-template-columns: 1fr 1fr !important; } }
    `}</style>
  </div>
);

const Step4Install = ({ install, setInstall }) => (
  <div>
    <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
      How should we install it?
    </h2>
    <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
      Two ways to mount a TV frame. Easy & cheap, or fully wall-hung.
    </p>
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 28
    }} className="m-grid">
      {[
        { id: 'strap', title: 'Strap to TV', sub: 'Easy & cheap.',
          desc: 'The frame straps directly to the TV itself. Quickest install — works for renters or anyone who reorganizes often.',
          price: '+$0' },
        { id: 'wallhung', title: 'Wall-hung mount', sub: '2×4 mounted to studs.',
          desc: 'A 2×4 mounted to studs, frame slides onto it. Cleaner look, more secure for larger TVs.',
          price: '+$45' },
      ].map(opt => {
        const sel = install === opt.id;
        return (
          <button key={opt.id} onClick={() => setInstall(opt.id)} style={{
            textAlign: 'left', padding: 22, borderRadius: 10,
            border: '1.5px solid ' + (sel ? 'var(--ink)' : 'var(--hair-strong)'),
            background: sel ? '#FAFAF8' : '#fff',
            cursor: 'pointer', position: 'relative'
          }}>
            {sel && (
              <span style={{
                position: 'absolute', top: 14, right: 14,
                width: 22, height: 22, borderRadius: 999,
                background: 'var(--ink)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name="Check" size={12}/>
              </span>
            )}
            {/* Mini diagram */}
            <div style={{
              height: 100, borderRadius: 6, background: '#F1F0EC',
              padding: 12, marginBottom: 14, position: 'relative',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
            }}>
              {opt.id === 'strap' ? (
                <svg viewBox="0 0 160 80" style={{ width: '100%', height: '100%' }}>
                  <rect x="20" y="10" width="120" height="60" fill="none" stroke="#1A1A1A" strokeWidth="3"/>
                  <rect x="28" y="18" width="104" height="44" fill="#0F0F0F"/>
                  <path d="M 20 30 L 8 30 M 20 50 L 8 50 M 140 30 L 152 30 M 140 50 L 152 50"
                    stroke="var(--red)" strokeWidth="2" strokeDasharray="2 2"/>
                </svg>
              ) : (
                <svg viewBox="0 0 160 80" style={{ width: '100%', height: '100%' }}>
                  <line x1="0" y1="75" x2="160" y2="75" stroke="#8A8A85" strokeWidth="1.5"/>
                  <rect x="60" y="50" width="40" height="6" fill="#C9A671"/>
                  <text x="80" y="68" fontSize="6" fill="#8A8A85" textAnchor="middle" fontFamily="JetBrains Mono">2×4 mount</text>
                  <rect x="20" y="10" width="120" height="50" fill="none" stroke="#1A1A1A" strokeWidth="3"/>
                  <rect x="28" y="18" width="104" height="34" fill="#0F0F0F"/>
                </svg>
              )}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div className="display" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink)' }}>
                {opt.title}
              </div>
              <div className="mono" style={{ fontSize: 13, color: 'var(--green)', fontWeight: 600 }}>
                {opt.price}
              </div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>
              {opt.sub}
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-body)', marginTop: 10, marginBottom: 0 }}>
              {opt.desc}
            </p>
          </button>
        );
      })}
    </div>
  </div>
);

const Step5Quote = ({ summary, contact, setContact, submitted, onSubmit }) => {
  if (submitted) {
    return (
      <div style={{ textAlign: 'center', padding: '20px 0' }}>
        <div style={{
          width: 64, height: 64, borderRadius: 999, background: 'var(--green)',
          margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff'
        }}>
          <Icon name="Check" size={28} stroke={2.4}/>
        </div>
        <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: '20px 0 8px' }}>
          Quote request submitted.
        </h2>
        <p style={{ color: 'var(--ink-body)', fontSize: 16, maxWidth: 460, margin: '0 auto' }}>
          We'll send you a final price and turnaround estimate within 24 hours — usually
          same day if it's before 5 PM Central.
        </p>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#/products" className="btn btn-ghost">Back to products</a>
          <a href="#/examples/tv-frames" className="btn btn-red">See finished TV frames →</a>
        </div>
      </div>
    );
  }
  return (
    <div>
      <h2 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
        Almost there — review your build.
      </h2>
      <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
        We'll send a final quote within 24 hours.
      </p>
      <div style={{
        marginTop: 24, padding: 20, borderRadius: 10,
        background: '#FAFAF8', border: '1px solid var(--hair)'
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', rowGap: 14, columnGap: 24 }}>
          {summary.map(row => (
            <div key={row.label} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px dashed var(--hair-strong)', paddingBottom: 8 }}>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>{row.label}</span>
              <span className="mono" style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{row.value}</span>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 18, display: 'flex', justifyContent: 'space-between',
          alignItems: 'baseline'
        }}>
          <span style={{ fontSize: 13, color: 'var(--muted)' }}>Estimated price (final pending review)</span>
          <span className="display" style={{ fontSize: 28, fontWeight: 700, color: 'var(--ink)' }}>
            ~${summary[0]?.priceEst || 365}
          </span>
        </div>
      </div>

      <h3 className="display" style={{ fontSize: 18, fontWeight: 700, marginTop: 32, marginBottom: 12 }}>
        Your contact info
      </h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }} className="m-grid">
        <div>
          <label className="label">Name</label>
          <input className="input" value={contact.name}
            onChange={e => setContact({ ...contact, name: e.target.value })}/>
        </div>
        <div>
          <label className="label">Email</label>
          <input className="input" type="email" value={contact.email}
            onChange={e => setContact({ ...contact, email: e.target.value })}/>
        </div>
        <div>
          <label className="label">Phone</label>
          <input className="input" type="tel" value={contact.phone}
            onChange={e => setContact({ ...contact, phone: e.target.value })}/>
        </div>
        <div>
          <label className="label">Zip code</label>
          <input className="input" value={contact.zip}
            onChange={e => setContact({ ...contact, zip: e.target.value })}/>
        </div>
        <div style={{ gridColumn: 'span 2' }}>
          <label className="label">Anything else we should know? (optional)</label>
          <textarea className="input" rows="3" placeholder="Wall color, room photo, special install notes, etc."
            value={contact.notes}
            onChange={e => setContact({ ...contact, notes: e.target.value })}/>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 24 }}>
        <button className="btn btn-green btn-lg" onClick={onSubmit}>
          Get my quote <Icon name="ArrowRight" size={16}/>
        </button>
      </div>
    </div>
  );
};

const StickySummary = ({ frame, dims, install, method, model }) => (
  <div className="card" style={{ padding: 18, position: 'sticky', top: 96 }}>
    <div style={{ aspectRatio: '4/3', marginBottom: 14 }}>
      <FrameVisual frame={frame} x={dims.x} y={dims.y} label={method === 'model' ? (model.brand + ' ' + (model.modelNumber || '')) : `${dims.x}" × ${dims.y}"`}/>
    </div>
    <div className="eyebrow" style={{ marginBottom: 8 }}>Your build</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
      <Row label="Method" value={method === 'model' ? 'Make & model' : 'Measurements'}/>
      {method === 'measure' && (
        <Row label="Size" value={`${dims.x}" × ${dims.y}" × ${dims.z}" deep`}/>
      )}
      {method === 'model' && (
        <Row label="TV" value={`${model.brand}${model.modelNumber ? ' · ' + model.modelNumber : ''}`}/>
      )}
      <Row label="Style" value={frame.name}/>
      <Row label="Install" value={install === 'strap' ? 'Strap to TV' : 'Wall-hung mount'}/>
    </div>
    <hr className="hairline" style={{ margin: '14px 0' }}/>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span style={{ fontSize: 12, color: 'var(--muted)' }}>Est. price</span>
      <span className="display" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>
        ~$365
      </span>
    </div>
    <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>
      Final quote within 24 hours · turnaround 4–7 business days
    </div>
  </div>
);
const Row = ({ label, value }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
    <span style={{ color: 'var(--muted)' }}>{label}</span>
    <span style={{ color: 'var(--ink)', fontWeight: 500, textAlign: 'right' }}>{value}</span>
  </div>
);

const TvBuilder = () => {
  const STEPS = ['Method', 'Size', 'Style', 'Install', 'Review'];
  const [step, setStep] = useState(0);
  const [method, setMethod] = useState('measure');
  const [dims, setDims] = useState({ x: 55, y: 32, z: 3 });
  const [model, setModel] = useState({ brand: TV_BRANDS[0], modelNumber: '' });
  const [frame, setFrame] = useState(FRAME_STYLES[0]);
  const [install, setInstall] = useState('strap');
  const [contact, setContact] = useState({ name: '', email: '', phone: '', zip: '', notes: '' });
  const [submitted, setSubmitted] = useState(false);

  const summary = [
    { label: 'Method', value: method === 'model' ? 'Make & model' : 'Measurements', priceEst: 365 },
    { label: method === 'model' ? 'TV' : 'Size',
      value: method === 'model' ? `${model.brand}${model.modelNumber ? ' · ' + model.modelNumber : ''}` :
             `${dims.x}" × ${dims.y}" × ${dims.z}" deep` },
    { label: 'Frame style', value: frame.name },
    { label: 'Profile', value: frame.profile },
    { label: 'Install method', value: install === 'strap' ? 'Strap to TV' : 'Wall-hung mount' },
    { label: 'Turnaround', value: '4–7 business days' },
  ];

  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16, marginBottom: 24
        }}>
          <div>
            <a href="#/products" style={{
              fontSize: 13, color: 'var(--muted)', display: 'inline-flex', alignItems: 'center', gap: 6
            }}>
              <Icon name="ArrowLeft" size={13}/> Back to products
            </a>
            <h1 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 700, margin: '8px 0 4px' }}>
              Frame Your TV
            </h1>
            <Eyebrow>Signature · Make it look like art</Eyebrow>
          </div>
          <span className="pill pill-ink">Step {step + 1} of {STEPS.length}</span>
        </div>

        <div style={{
          marginBottom: 32, padding: 16, background: '#fff',
          border: '1px solid var(--hair)', borderRadius: 10, overflow: 'auto'
        }}>
          <StepPip steps={STEPS} current={step}/>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32,
        }} className="b-grid">
          <div style={{
            background: '#fff', border: '1px solid var(--hair)',
            borderRadius: 12, padding: 'clamp(20px, 3vw, 40px)'
          }}>
            {step === 0 && <Step1Method method={method} setMethod={setMethod}/>}
            {step === 1 && <Step2Measure method={method} dims={dims} setDims={setDims} model={model} setModel={setModel}/>}
            {step === 2 && <Step3Style frame={frame} setFrame={setFrame}/>}
            {step === 3 && <Step4Install install={install} setInstall={setInstall}/>}
            {step === 4 && <Step5Quote summary={summary} contact={contact} setContact={setContact}
              submitted={submitted} onSubmit={() => setSubmitted(true)}/>}

            {!submitted && (
              <div style={{
                marginTop: 40, paddingTop: 20, borderTop: '1px solid var(--hair)',
                display: 'flex', justifyContent: 'space-between'
              }}>
                <button onClick={() => setStep(s => Math.max(0, s - 1))}
                  disabled={step === 0}
                  className="btn btn-ghost"
                  style={{ opacity: step === 0 ? 0.4 : 1 }}>
                  <Icon name="ArrowLeft" size={14}/> Back
                </button>
                {step < STEPS.length - 1 && (
                  <button onClick={() => setStep(s => Math.min(STEPS.length - 1, s + 1))}
                    className="btn btn-green">
                    Next: {STEPS[step + 1]} <Icon name="ArrowRight" size={14}/>
                  </button>
                )}
              </div>
            )}
          </div>

          <div className="b-side">
            <StickySummary frame={frame} dims={dims} install={install} method={method} model={model}/>
          </div>
        </div>

        {/* How it works */}
        <div style={{ marginTop: 80 }}>
          <SectionHeader eyebrow="How it works" title="Five simple steps."/>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
            gap: 20
          }}>
            {[
              'Configure your frame online',
              'Get a quote within 24 hours',
              'Approve and pay',
              'We build it on-premises',
              'Delivery + optional install',
            ].map((s, i) => (
              <div key={s} className="card" style={{ padding: 20 }}>
                <div className="display" style={{ fontSize: 28, fontWeight: 800, color: 'var(--red)' }}>
                  0{i + 1}
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink)', marginTop: 8, fontWeight: 500 }}>
                  {s}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .b-grid { grid-template-columns: 1fr !important; }
          .b-side { order: -1; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { TvBuilder, StepPip, FrameVisual });