/* Summary / review / order screen — final step with deposit form */

function Summary({ config, onBack, onPlace, variant = 'spec', onShare }) {
  const model = window.LE200.MODELS.find(m => m.id === config.size);
  const data = window.LE200;
  const price = computePrice(config, data);
  const lead = leadTime(config, data);

  const [placed, setPlaced] = useState(false);
  const [contact, setContact] = useState({ name: '', email: '', studio: '', zip: '' });

  if (placed) return <OrderConfirmation config={config} model={model} price={price} lead={lead} contact={contact} />;

  const configString = `${model.sku} · ${config.airflow} · ${config.gas === 'lpg' ? 'propane' : 'natural gas'} · ${config.insulation === 'b23' ? '2,300°F brick' : config.insulation === 'b26' ? '2,600°F brick' : 'fiber'} · ${config.door}-hinge · ${config.controls}-panel${config.doorStyle === 'guillotine' ? ' · guillotine' : ''}${config.cart === 'cart' ? ' · cart' : ''}`;

  return (
    <div className="page">
      <main>
        <section className="container" style={{ paddingTop: 32, paddingBottom: 16 }}>
          <SectionHeader
            tag="[04] · Step 4 of 4 · Review & order"
            title="Your kiln, summarized."
            sub="One last look. If everything's right, lock it in with a 20% deposit and we start cutting steel."
            action={
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-ghost" onClick={onShare}>↗ Save / share</button>
                <button className="btn btn-ghost" onClick={() => window.print()}>⎙ Print spec sheet</button>
              </div>
            }
          />
        </section>

        {variant === 'hero' && (
          <HeroSummary model={model} config={config} price={price} lead={lead} configString={configString} />
        )}

        {variant === 'receipt' && (
          <ReceiptSummary model={model} config={config} price={price} lead={lead} configString={configString} />
        )}

        {variant === 'spec' && (
          <SpecSheetSummary model={model} config={config} price={price} lead={lead} configString={configString} />
        )}

        {/* Order block — same regardless of variant */}
        <section className="container" style={{ paddingTop: 60, paddingBottom: 80 }}>
          <div style={{ border: '1px solid var(--ink)', background: 'var(--ink)', color: 'var(--field)', padding: 40, position: 'relative' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
              <div>
                <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 14 }}>
                  [05] · Place your order
                </div>
                <h2 className="display" style={{ fontSize: 56, margin: 0, lineHeight: 0.95 }}>
                  Reserve your<br />
                  build slot.
                </h2>
                <p style={{ fontSize: 14, color: 'color-mix(in oklab, var(--field), transparent 30%)', marginTop: 20, lineHeight: 1.55, maxWidth: 440 }}>
                  A 20% deposit holds your slot on the shop schedule. Final freight quoted to your zip after we confirm load-in details. Balance due at crating. Refundable up to week 2 of fabrication.
                </p>

                <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <ContactField label="Your name" v={contact.name} onChange={(v) => setContact({ ...contact, name: v })} dark />
                  <ContactField label="Email" type="email" v={contact.email} onChange={(v) => setContact({ ...contact, email: v })} dark />
                  <ContactField label="Studio / org name" v={contact.studio} onChange={(v) => setContact({ ...contact, studio: v })} dark />
                  <ContactField label="ZIP for freight" v={contact.zip} onChange={(v) => setContact({ ...contact, zip: v })} dark />
                </div>

                <div style={{ marginTop: 24, padding: '14px 16px', border: '1px dashed color-mix(in oklab, var(--field), transparent 70%)', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 32, height: 20, background: 'color-mix(in oklab, var(--field), transparent 80%)', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink)' }}>•••• 4242</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'color-mix(in oklab, var(--field), transparent 30%)' }}>Card on file · update at checkout</span>
                </div>
              </div>

              <div>
                <div style={{ border: '1px solid color-mix(in oklab, var(--field), transparent 70%)', padding: 24 }}>
                  <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 10 }}>Total</div>
                  <div className="display" style={{ fontSize: 56, lineHeight: 0.9 }}>{fmtUSD(price.total)}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'color-mix(in oklab, var(--field), transparent 30%)', marginTop: 6 }}>
                    {fmtUSD(price.subtotal)} kiln + {fmtUSD(price.crating)} crate · freight quoted separately
                  </div>

                  <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px dashed color-mix(in oklab, var(--field), transparent 70%)' }}>
                    <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 10 }}>Deposit today (20%)</div>
                    <div className="display" style={{ fontSize: 40, lineHeight: 0.9 }}>{fmtUSD(price.deposit)}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'color-mix(in oklab, var(--field), transparent 30%)', marginTop: 6 }}>
                      Balance {fmtUSD(price.total - price.deposit)} due at crating
                    </div>
                  </div>

                  <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'color-mix(in oklab, var(--field), transparent 30%)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 4, lineHeight: 1.7 }}>
                    <span>Lead time</span><span>{lead} weeks</span>
                    <span>Build slot</span><span>{nextSlot()}</span>
                    <span>Refundable</span><span>through week 2</span>
                  </div>

                  <button
                    className="btn btn-accent btn-arrow"
                    style={{ width: '100%', justifyContent: 'center', marginTop: 24 }}
                    onClick={() => setPlaced(true)}
                  >
                    Place order · {fmtUSD(price.deposit)} deposit
                  </button>
                  <button
                    className="btn btn-ghost"
                    style={{
                      width: '100%', justifyContent: 'center', marginTop: 8,
                      borderColor: 'color-mix(in oklab, var(--field), transparent 70%)',
                      color: 'var(--field)',
                    }}
                  >
                    Request a quote instead
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}

function nextSlot() {
  const d = new Date();
  d.setMonth(d.getMonth() + 3);
  return d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
}

function ContactField({ label, v, onChange, type = 'text', dark }) {
  return (
    <label style={{ display: 'block' }}>
      <span className="mono upper" style={{ fontSize: 10, color: dark ? 'color-mix(in oklab, var(--field), transparent 40%)' : 'var(--ink-3)', letterSpacing: '0.12em' }}>{label}</span>
      <input
        type={type}
        value={v}
        onChange={(e) => onChange(e.target.value)}
        style={{
          width: '100%',
          marginTop: 6,
          padding: '12px 14px',
          background: 'transparent',
          border: '1px solid color-mix(in oklab, ' + (dark ? 'var(--field)' : 'var(--ink)') + ', transparent 70%)',
          color: dark ? 'var(--field)' : 'var(--ink)',
          fontFamily: 'var(--font-body)',
          fontSize: 14,
        }}
      />
    </label>
  );
}

// ─────────────────────────────────────────────────── SPEC SHEET variant
function SpecSheetSummary({ model, config, price, lead, configString }) {
  const data = window.LE200;
  return (
    <section className="container" style={{ paddingBottom: 40 }}>
      <div style={{
        border: '1px solid var(--ink)',
        background: 'var(--field)',
        position: 'relative',
      }}>
        {/* Spec sheet header strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
          borderBottom: '1px solid var(--ink)',
        }}>
          <div style={{ padding: '16px 24px', borderRight: '1px solid var(--ink)' }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>Spec sheet</div>
            <div className="display" style={{ fontSize: 22, marginTop: 4 }}>LE200 · Configured Build</div>
          </div>
          <div style={{ padding: '16px 24px', borderRight: '1px solid var(--ink)' }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>Quote no.</div>
            <div className="mono" style={{ fontSize: 14, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>LE{Date.now().toString().slice(-7)}</div>
          </div>
          <div style={{ padding: '16px 24px', borderRight: '1px solid var(--ink)' }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>Issued</div>
            <div className="mono" style={{ fontSize: 14, marginTop: 4 }}>{new Date().toLocaleDateString()}</div>
          </div>
          <div style={{ padding: '16px 24px' }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>Valid</div>
            <div className="mono" style={{ fontSize: 14, marginTop: 4 }}>30 days</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', borderBottom: '1px solid var(--ink)' }}>
          {/* LEFT — kiln + visuals */}
          <div style={{ padding: 32, borderRight: '1px solid var(--ink)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
              <div>
                <div className="display" style={{ fontSize: 96, lineHeight: 0.85, letterSpacing: '-0.02em' }}>
                  {model.sku.split('-')[1]}
                </div>
                <div className="display" style={{ fontSize: 20, color: 'var(--accent-deep)', marginTop: 8 }}>
                  {model.capacity} cu ft · {model.burners} burner
                </div>
                <div className="script" style={{ fontSize: 26, color: 'var(--accent-deep)', marginTop: 16, lineHeight: 1.1 }}>
                  "{model.persona}"
                </div>
              </div>
              <div>
                <DimensionedKiln model={model} config={config} showDims={true} />
              </div>
            </div>

            <div style={{
              marginTop: 24, padding: '12px 14px',
              background: 'var(--field-2)',
              border: '1px dashed color-mix(in oklab, var(--ink), transparent 60%)',
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              color: 'var(--ink-2)', lineHeight: 1.6,
            }}>
              <span className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>[CONFIG STRING] </span>
              <span style={{ color: 'var(--ink)' }}>{configString}</span>
            </div>
          </div>

          {/* RIGHT — spec table */}
          <div style={{ padding: 32 }}>
            <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 16 }}>
              [Tech] Build specifications
            </div>
            <table className="spec-table">
              <tbody>
                <tr><td className="k">Capacity</td><td className="v">{model.capacity} cu ft</td></tr>
                <tr><td className="k">Setting area</td><td className="v">{model.settingArea} cu ft</td></tr>
                <tr><td className="k">Interior stacking</td><td className="v">{model.stacking.join(' × ')}"</td></tr>
                <tr><td className="k">Exterior W×D×H</td><td className="v">{model.footprint[0]} × {config.airflow === 'downdraft' ? model.footprint[1] + 6 : model.footprint[1]} × {model.footprint[2]}"</td></tr>
                <tr><td className="k">Max BTU/hr</td><td className="v">{model.btu.toLocaleString()}</td></tr>
                <tr><td className="k">Burners · type</td><td className="v">{model.burners} × True-Fire venturi</td></tr>
                <tr><td className="k">Fuel</td><td className="v">{config.gas === 'lpg' ? 'Propane (LPG) · 14" WC min' : 'Natural gas · 6" WC min'}</td></tr>
                <tr><td className="k">Insulation</td><td className="v">{config.insulation === 'b23' ? '2,300°F K-26 brick' : config.insulation === 'b26' ? '2,600°F K-26 brick' : 'Fiber panels · 6"'}</td></tr>
                <tr><td className="k">Air flow</td><td className="v">{config.airflow === 'updraft' ? 'Updraft natural' : 'Downdraft'}</td></tr>
                <tr><td className="k">Door</td><td className="v">{config.doorStyle === 'guillotine' ? 'Guillotine lift' : config.door + '-mounted hinge'}</td></tr>
                <tr><td className="k">Control panel</td><td className="v">{config.controls}-side</td></tr>
                <tr><td className="k">Cert.</td><td className="v">ETL Intertek · AGA I-94 · C.S.A. C22.2</td></tr>
                <tr><td className="k">Ship weight</td><td className="v">{model.shipWeight.toLocaleString()} lb</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* Line items */}
        <div style={{ padding: 32, borderBottom: '1px solid var(--ink)' }}>
          <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 16 }}>
            [Order] Itemized
          </div>
          <table className="spec-table" style={{ fontSize: 13 }}>
            <tbody>
              {price.items.map((it, i) => (
                <tr key={i}>
                  <td className="k" style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 'normal' }}>{it.label}</td>
                  <td className="v" style={{ textAlign: 'right', width: 'auto' }}>{fmtUSD(it.amount)}</td>
                </tr>
              ))}
              <tr>
                <td className="k" style={{ color: 'var(--ink-3)' }}>Crating</td>
                <td className="v" style={{ textAlign: 'right' }}>{fmtUSD(price.crating)}</td>
              </tr>
              <tr>
                <td className="k" style={{ color: 'var(--ink-3)' }}>Freight</td>
                <td className="v" style={{ textAlign: 'right', color: 'var(--ink-3)' }}>quoted to zip</td>
              </tr>
              <tr style={{ borderTop: '2px solid var(--ink)', borderBottom: 'none' }}>
                <td style={{ padding: '14px 0', fontWeight: 600, fontSize: 16, fontFamily: 'var(--font-display)', letterSpacing: '0.02em' }}>TOTAL · ex-freight</td>
                <td style={{ padding: '14px 0', textAlign: 'right', fontWeight: 600, fontFamily: 'var(--font-display)', fontSize: 28 }}>{fmtUSD(price.total)}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* What's included */}
        <div style={{ padding: 32 }}>
          <details>
            <summary style={{ cursor: 'pointer', listStyle: 'none' }}>
              <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', display: 'inline-flex', gap: 12 }}>
                <span>[Included] What ships with every LE200 ▾</span>
              </div>
            </summary>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '6px 24px', marginTop: 16, fontSize: 13, fontFamily: 'var(--font-mono)', color: 'var(--ink-2)' }}>
              {data.INCLUDED.map((i, k) => (
                <div key={k} style={{ paddingLeft: 16, position: 'relative' }}>
                  <span style={{ position: 'absolute', left: 0, color: 'var(--accent-deep)' }}>•</span>
                  {i}
                </div>
              ))}
            </div>
          </details>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────── RECEIPT variant (compact)
function ReceiptSummary({ model, config, price, lead, configString }) {
  return (
    <section className="container" style={{ paddingBottom: 40 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32 }}>
        <div style={{ border: '1px solid var(--rule)', background: 'var(--field)', padding: 32, position: 'relative' }}>
          <Crosshairs />
          <div style={{ textAlign: 'center', borderBottom: '2px dashed var(--ink)', paddingBottom: 24, marginBottom: 24 }}>
            <LagunaSig size={48} />
            <div className="mono upper" style={{ fontSize: 10, marginTop: 12, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>
              Order receipt · pre-deposit
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>
              No. LE{Date.now().toString().slice(-7)} · {new Date().toLocaleDateString()}
            </div>
          </div>

          <table style={{ width: '100%', fontFamily: 'var(--font-mono)', fontSize: 12, fontVariantNumeric: 'tabular-nums' }}>
            <tbody>
              {price.items.map((it, i) => (
                <tr key={i}>
                  <td style={{ padding: '6px 0', verticalAlign: 'top' }}>{it.label}</td>
                  <td style={{ padding: '6px 0', textAlign: 'right', whiteSpace: 'nowrap' }}>{fmtUSD(it.amount)}</td>
                </tr>
              ))}
              <tr><td colSpan={2} style={{ padding: '8px 0', borderTop: '1px dashed var(--ink)' }}></td></tr>
              <tr>
                <td>Crating</td>
                <td style={{ textAlign: 'right' }}>{fmtUSD(price.crating)}</td>
              </tr>
              <tr><td colSpan={2} style={{ padding: '8px 0', borderTop: '2px solid var(--ink)' }}></td></tr>
              <tr style={{ fontWeight: 700, fontSize: 14 }}>
                <td>Total</td>
                <td style={{ textAlign: 'right' }}>{fmtUSD(price.total)}</td>
              </tr>
              <tr style={{ color: 'var(--accent-deep)', fontWeight: 600 }}>
                <td>Deposit due</td>
                <td style={{ textAlign: 'right' }}>{fmtUSD(price.deposit)}</td>
              </tr>
            </tbody>
          </table>

          <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px dashed var(--ink)', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
            Lead time {lead} wks · Ship: City of Industry, CA<br />
            Thank you for choosing Laguna ♥
          </div>
        </div>

        <div>
          <DimensionedKiln model={model} config={config} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────── HERO variant (configured-object hero)
function HeroSummary({ model, config, price, lead, configString }) {
  return (
    <section className="container" style={{ paddingBottom: 40 }}>
      <div style={{
        border: '1px solid var(--rule)',
        background: 'var(--field-2)',
        padding: 60,
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 60,
        alignItems: 'center',
      }}>
        <Crosshairs />
        <div>
          <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.14em' }}>
            Your {model.sku} · made to order
          </div>
          <div className="display" style={{ fontSize: 'clamp(80px, 12vw, 180px)', lineHeight: 0.85, marginTop: 16 }}>
            {model.capacity}<br />
            <span style={{ fontSize: '0.4em', color: 'var(--ink-3)' }}>cu ft</span>
          </div>
          <div className="script" style={{ fontSize: 36, color: 'var(--accent-deep)', marginTop: 16, lineHeight: 1.1, maxWidth: 360 }}>
            "{model.persona}"
          </div>

          <div style={{
            marginTop: 32, padding: '14px 16px',
            background: 'var(--field)',
            border: '1px solid color-mix(in oklab, var(--ink), transparent 80%)',
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: 'var(--ink-2)', lineHeight: 1.6,
          }}>
            <span style={{ color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 10 }}>[CONFIGURATION] </span>
            {configString}
          </div>

          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
            {[
              { k: 'Total', v: fmtUSD(price.total) },
              { k: 'Deposit', v: fmtUSD(price.deposit) },
              { k: 'Lead time', v: `${lead} wk` },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '16px 12px',
                borderRight: i < 2 ? '1px dashed color-mix(in oklab, var(--ink), transparent 70%)' : 'none',
              }}>
                <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>{s.k}</div>
                <div className="display" style={{ fontSize: 22, marginTop: 6 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <DimensionedKiln model={model} config={config} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────── Order confirmation
function OrderConfirmation({ config, model, price, lead, contact }) {
  return (
    <div className="page">
      <main>
        <section className="container" style={{ paddingTop: 80, paddingBottom: 120, textAlign: 'center', maxWidth: 720 }}>
          <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent-deep)', letterSpacing: '0.16em', marginBottom: 24 }}>
            [Confirmed] Build slot reserved
          </div>
          <div style={{
            width: 100, height: 100, margin: '0 auto', position: 'relative',
            border: '1.5px solid var(--accent-deep)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div className="script" style={{ fontSize: 60, color: 'var(--accent-deep)', lineHeight: 1 }}>✓</div>
            <Crosshairs />
          </div>
          <h1 className="display" style={{ fontSize: 64, marginTop: 32, lineHeight: 0.95 }}>
            We've got it<br /> from here{contact.name && <>, <span style={{ color: 'var(--accent-deep)' }}>{contact.name.split(' ')[0]}</span></>}.
          </h1>
          <p style={{ marginTop: 24, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55 }}>
            Your <strong>{model.sku}</strong> build slot is held. A Laguna tech will reach out within 1 business day to confirm freight to {contact.zip || 'your zip'} and walk through your install spot.
          </p>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
            {[
              { k: "Order no.", v: `LE${Date.now().toString().slice(-7)}` },
              { k: "Deposit charged", v: fmtUSD(price.deposit) },
              { k: "Balance at crating", v: fmtUSD(price.total - price.deposit) },
              { k: "Build slot", v: nextSlot() },
            ].map((s, i) => (
              <div key={i} style={{ padding: 20, borderRight: i < 3 ? '1px dashed color-mix(in oklab, var(--ink), transparent 70%)' : 'none' }}>
                <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>{s.k}</div>
                <div className="display" style={{ fontSize: 20, marginTop: 8 }}>{s.v}</div>
              </div>
            ))}
          </div>
          <p className="mono" style={{ marginTop: 40, fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
            Receipt and a printable spec sheet are on their way to {contact.email || 'your email'}.
          </p>
        </section>
      </main>
      <Footer />
    </div>
  );
}

window.Summary = Summary;