/* Landing screen — hero, line overview, persona ladder, CTA into the configurator */

function Landing({ onStart, onJumpToSize }) {
  return (
    <div className="page">
      <main>
        {/* HERO ------------------------------------------------- */}
        <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'start' }}>
            <div>
              <div className="sec-tag">[00] LE200 Series · Front-loading gas kilns</div>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 7vw, 112px)', margin: '24px 0 0', textTransform: 'uppercase' }}>
                Precision<br />
                made,<br />
                <span style={{ color: 'var(--accent-deep)' }}>built to last.</span>
              </h1>
              <p style={{ marginTop: 32, maxWidth: 480, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                Five sizes, one philosophy. Every LE200 is configured at point of order, fabricated to spec in our City of Industry shop, and crated on a pallet that ships when you say go. No "off the shelf" SKUs. No surprises.
              </p>
              <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap' }}>
                <button className="btn btn-accent btn-arrow" onClick={onStart}>Configure your kiln</button>
                <button className="btn btn-ghost" onClick={() => onJumpToSize('recommend')}>Help me pick a size</button>
              </div>

              <div style={{
                marginTop: 56,
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
                borderTop: '1px solid var(--rule)',
                borderBottom: '1px solid var(--rule)',
              }}>
                {[
                  { k: "Sizes", v: "5", sub: "9 → 40 cu ft" },
                  { k: "Cone", v: "10", sub: "Capable" },
                  { k: "Cert.", v: "ETL", sub: "AGA I-94" },
                  { k: "Built", v: "USA", sub: "CA · since 1976" },
                ].map((s, i) => (
                  <div key={i} style={{
                    padding: '20px 18px',
                    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: 32, marginTop: 8 }}>{s.v}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{s.sub}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Hero kiln */}
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
                <Crosshairs />
              </div>
              <div style={{
                position: 'relative',
                padding: 32,
                background: 'color-mix(in oklab, var(--field-2), transparent 30%)',
                border: '1px solid color-mix(in oklab, var(--ink), transparent 85%)',
              }}>
                <img src="assets/le200-iso.png" alt="LE200 isometric"
                     style={{ width: '100%', filter: 'drop-shadow(0 30px 50px rgba(14, 53, 61, 0.2))' }} />
                <div style={{ position: 'absolute', top: 16, left: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  Fig. 01 · LE200-24 cutaway
                </div>
                <div style={{ position: 'absolute', bottom: 16, right: 24, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  NE isometric · 1:24
                </div>

                {/* Annotation callouts */}
                <div style={{
                  position: 'absolute', top: '20%', left: -8,
                  fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-2)',
                  textTransform: 'uppercase', letterSpacing: '0.08em',
                  background: 'var(--field)', padding: '4px 8px',
                  border: '1px solid color-mix(in oklab, var(--ink), transparent 70%)',
                }}>
                  ① K-26 firebrick
                </div>
                <div style={{
                  position: 'absolute', top: '50%', right: -16,
                  fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-2)',
                  textTransform: 'uppercase', letterSpacing: '0.08em',
                  background: 'var(--field)', padding: '4px 8px',
                  border: '1px solid color-mix(in oklab, var(--ink), transparent 70%)',
                }}>
                  ② True-fire venturi
                </div>
                <div style={{
                  position: 'absolute', bottom: '20%', left: -8,
                  fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-2)',
                  textTransform: 'uppercase', letterSpacing: '0.08em',
                  background: 'var(--field)', padding: '4px 8px',
                  border: '1px solid color-mix(in oklab, var(--ink), transparent 70%)',
                }}>
                  ③ Sure-fit hinge
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* SIZE LADDER ------------------------------------------ */}
        <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
          <SectionHeader
            tag="[01] · The Line"
            title="Five sizes. One philosophy."
            sub="Each LE200 is matched to a way of working. The smallest fits in a garage; the largest swallows a class. Pick by capacity, or tell us how you fire and we'll point you to the right one."
            action={<button className="btn btn-ghost" onClick={() => onJumpToSize('recommend')}>Take the recommender →</button>}
          />

          {/* Visual silhouette ladder */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5, 1fr)',
            gap: 0,
            border: '1px solid var(--rule)',
            background: 'var(--field-2)',
            position: 'relative',
            padding: '40px 20px 0',
          }}>
            {window.LE200.MODELS.map((m, i) => {
              const maxCap = 40;
              const heightPct = 28 + (m.capacity / maxCap) * 72;
              return (
                <button
                  key={m.id}
                  onClick={() => onJumpToSize(m.id)}
                  style={{
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                    padding: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'relative',
                    color: 'inherit',
                    fontFamily: 'inherit',
                    borderRight: i < 4 ? '1px dashed color-mix(in oklab, var(--ink), transparent 70%)' : 'none',
                  }}
                  className="ladder-rung"
                >
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em',
                    color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 8,
                  }}>
                    {m.sku}
                  </div>
                  <div className="display" style={{ fontSize: 28, color: 'var(--ink)' }}>
                    {m.capacity}<span style={{ fontSize: 14, color: 'var(--ink-3)', marginLeft: 4 }}>cu ft</span>
                  </div>
                  <div style={{
                    height: 280,
                    display: 'flex',
                    alignItems: 'flex-end',
                    marginTop: 16,
                  }}>
                    <img src={m.front} alt={m.sku} style={{
                      height: heightPct + '%',
                      width: 'auto',
                      maxHeight: 280,
                      filter: 'drop-shadow(0 12px 16px rgba(14, 53, 61, 0.18))',
                    }} />
                  </div>
                  <div className="script" style={{
                    fontSize: 22,
                    color: 'var(--accent-deep)',
                    marginTop: 16,
                    padding: '0 8px',
                    textAlign: 'center',
                    maxWidth: '90%',
                    lineHeight: 1.1,
                  }}>
                    "{m.persona}"
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 8, marginBottom: 16, textAlign: 'center', padding: '0 8px' }}>
                    {m.buyer}
                  </div>
                  <div style={{
                    width: '100%',
                    padding: '12px 8px',
                    borderTop: '1px solid var(--rule)',
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    fontVariantNumeric: 'tabular-nums',
                    color: 'var(--ink)',
                  }}>
                    {fmtUSD(m.price)}
                  </div>
                </button>
              );
            })}
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-4)',
            letterSpacing: '0.1em', textTransform: 'uppercase',
            marginTop: 12,
          }}>
            <span>Scale 1:24 · drawings to relative size</span>
            <span>Need bigger? Custom builds to 54+ cu ft on request</span>
          </div>
        </section>

        {/* WHY IT'S BUILT THIS WAY -------------------------------- */}
        <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
          <SectionHeader
            tag="[02] · Engineered for the work"
            title="The pieces that matter."
            sub="These are the parts a serious potter notices. Surfacing them isn't marketing — it's how you'll know this kiln was built for the way you fire."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
            {[
              { n: "01", k: "Frame", t: "Structural steel · 2 crossbeams", body: "The shell is welded mild steel with two full crossbeams. It carries the brick load for the life of the kiln, not the warranty period." },
              { n: "02", k: "Brick", t: "K-26 firebrick, arch built up", body: "Standard. Step up to 2,600°F brick for Cone 10, or fiber panels to shed 35% of ship weight and gain reduction speed." },
              { n: "03", k: "Burners", t: "True-fire premium-alloy venturi", body: "Ceramic-tip natural-draft burners with direct-spark ignition. Sized at the factory to natural gas or propane — pick one." },
              { n: "04", k: "Door", t: "Sure-fit hinge, gasketed seal", body: "The hinge is adjustable. As the brick settles and the door drifts, you re-clock it — the seal stays tight for years." },
            ].map((f, i) => (
              <div key={f.n} style={{
                padding: 24,
                borderRight: i < 3 ? '1px solid var(--rule)' : 'none',
                position: 'relative',
                display: 'flex', flexDirection: 'column', gap: 8,
                minHeight: 220,
              }}>
                <div className="display" style={{ fontSize: 42, color: 'var(--accent-deep)', lineHeight: 1 }}>{f.n}</div>
                <div className="mono upper" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', marginTop: 8 }}>{f.k}</div>
                <div style={{ fontWeight: 600, fontSize: 16 }}>{f.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{f.body}</div>
              </div>
            ))}
          </div>
        </section>

        {/* MADE-TO-ORDER process row ----------------------------- */}
        <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
          <SectionHeader
            tag="[03] · How it's made"
            title="Made to order. Built on a clock."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32, position: 'relative' }}>
            {/* connecting dashed line */}
            <div style={{
              position: 'absolute', top: 36, left: '10%', right: '10%',
              borderTop: '1px dashed color-mix(in oklab, var(--ink), transparent 60%)', zIndex: 0,
            }} />
            {[
              { wk: "Wk 0", k: "Configure", t: "Specify size, fuel, insulation, and door hinge. Lock in price and lead time." },
              { wk: "Wk 1", k: "Deposit", t: "20% deposit reserves your build slot. We confirm freight to your zip." },
              { wk: "Wk 2-8", k: "Fabricate", t: "Frame welded, brick laid, burners tuned, panel wired to your fuel." },
              { wk: "Wk 9-10", k: "Test fire", t: "Each kiln is fired to cone 10 before it leaves the shop." },
              { wk: "Wk 12+", k: "Crate & ship", t: "Pallet-loaded. Tail-lift delivery. Inside-shop install on request." },
            ].map((s, i) => (
              <div key={i} style={{ position: 'relative', zIndex: 1, background: 'var(--field)', padding: '0 8px' }}>
                <div style={{
                  width: 56, height: 56,
                  borderRadius: '50%',
                  border: '1.5px solid var(--ink)',
                  background: 'var(--field)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 20,
                  marginBottom: 14,
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent-deep)', letterSpacing: '0.12em', marginBottom: 4 }}>{s.wk}</div>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 6 }}>{s.k}</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{s.t}</div>
              </div>
            ))}
          </div>
        </section>

        {/* CTA stripe -------------------------------------------- */}
        <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
          <div style={{
            position: 'relative',
            border: '1px solid var(--ink)',
            padding: 60,
            background: 'var(--ink)',
            color: 'var(--field)',
            display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 40, alignItems: 'center',
          }}>
            <div>
              <div className="mono upper" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 16 }}>
                [04] · Ready when you are
              </div>
              <h2 className="display" style={{ fontSize: 56, margin: 0, lineHeight: 0.95 }}>
                Configure the<br />
                kiln <span className="script" style={{ color: 'var(--accent)', fontSize: 88, letterSpacing: 'normal' }}>your</span><br />
                studio actually<br />
                needs.
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'color-mix(in oklab, var(--field), transparent 25%)', margin: 0 }}>
                Five minutes to configure. Lead time and crating quoted on the spot. 20% to reserve your build slot.
              </p>
              <button className="btn btn-accent btn-arrow" onClick={onStart}>Start configuring</button>
              <span className="mono" style={{ fontSize: 11, color: 'color-mix(in oklab, var(--field), transparent 40%)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                Or call 800.4.LAGUNA · M-F 8a-5p PT
              </span>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}

window.Landing = Landing;