/* ============================================================
   PROTOTYPE — Calypsos (Standard) — sections 04 onward
   Sticky timeline · interior gallery · pipeline · footer.
   ============================================================ */

/* ----- STICKY 12-WEEK TIMELINE (Standard, civic-plate register) ----- */
function StdTimeline() {
  const steps = [
    { wk: 'PLATE 01 · WK 01', t: 'Site assessment', d: '0.18 acres minimum. Single curb cut. Three weeks of due diligence.', img: 'assets/img/exterior-corner.jpg' },
    { wk: 'PLATE 02 · WK 04', t: 'Foundation',      d: 'Twelve concrete piers. No basement, no slab pour. Two days of work.', img: 'assets/img/exterior-lane.jpg' },
    { wk: 'PLATE 03 · WK 09', t: 'Factory build',   d: 'Sixteen chassis modules finished on an automotive line in Hoboken.', img: 'assets/img/kitchen.jpg' },
    { wk: 'PLATE 04 · WK 11', t: 'Crane day',       d: 'One street closure, six hours, four storeys. Power and water connect.', img: 'assets/img/press.jpg' },
    { wk: 'PLATE 05 · WK 12', t: 'Occupancy',       d: 'Smart locks issued. Residents move in. Operating warranty begins.', img: 'assets/img/living-room.jpg' },
  ];

  return (
    <Pinned height={3.5}>
      {(t) => {
        const n = steps.length;
        const idx = Math.min(n - 1, Math.floor(t * n * 0.999));
        const localT = (t * n) - idx;
        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: ST.panel, color: ST.bg,
            display: 'grid', gridTemplateColumns: '1fr 1fr',
          }}>
            {/* left: changing image, civic plate */}
            <div style={{ position: 'relative', overflow: 'hidden', padding: 28 }}>
              <div style={{
                position: 'absolute', inset: 28,
                border: `1px solid rgba(168, 133, 90, 0.42)`,
                pointerEvents: 'none',
                zIndex: 3,
              }} />
              {steps.map((s, i) => (
                <img key={i} src={s.img} alt=""
                  style={{
                    position: 'absolute', inset: 28,
                    width: 'calc(100% - 56px)', height: 'calc(100% - 56px)', objectFit: 'cover',
                    filter: 'saturate(0.78) contrast(1.04) brightness(0.82)',
                    opacity: i === idx ? 1 : 0,
                    transform: i === idx ? `scale(${1 + localT * 0.03})` : 'scale(1.03)',
                    transition: 'opacity 0.6s ease-out, transform 4s ease-out',
                  }}
                />
              ))}
              <div style={{
                position: 'absolute', top: 50, left: 50, zIndex: 4,
                color: ST.brass, fontFamily: 'Matter', fontSize: 10,
                letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 600,
              }}>{steps[idx].wk}</div>
              <div style={{
                position: 'absolute', bottom: 60, left: 50, right: 50, zIndex: 4,
                color: ST.bg, fontSize: 'clamp(48px, 6vw, 88px)',
                fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 0.96,
              }}>{steps[idx].t}.</div>
            </div>

            {/* right: itinerary list */}
            <div style={{ padding: '48px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <StdPlateLabel n="04" label="Foundation to occupancy" color={ST.brass} />
              <h2 style={{ margin: '24px 0 36px', fontSize: 'clamp(32px, 3.4vw, 44px)', fontWeight: 600, letterSpacing: '-0.022em', lineHeight: 1.05, color: ST.bg, maxWidth: '18ch' }}>
                Twelve weeks, five plates, one truck.
              </h2>

              <div style={{ borderTop: `1px solid rgba(168,133,90,0.3)` }}>
                {steps.map((s, i) => {
                  const active = i === idx;
                  const done = i < idx;
                  return (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '36px 1fr auto',
                      gap: 18, alignItems: 'center',
                      padding: '16px 0',
                      borderBottom: `1px solid rgba(168,133,90,0.3)`,
                      opacity: active ? 1 : (done ? 0.6 : 0.35),
                      transition: 'opacity 0.4s',
                    }}>
                      <span style={{
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        width: 28, height: 28,
                        border: `1.5px solid ${active || done ? ST.brass : 'rgba(168,133,90,0.4)'}`,
                        borderRadius: 999,
                        background: active ? ST.brass : 'transparent',
                        color: active ? ST.ink : ST.brass,
                        fontFamily: 'Matter', fontWeight: 600, fontSize: 11,
                        transition: 'all 0.4s',
                      }}>{String(i + 1).padStart(2, '0')}</span>
                      <div>
                        <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.008em', color: ST.bg }}>{s.t}</div>
                        <div style={{ fontSize: 13, color: 'rgba(239, 233, 220, 0.6)', lineHeight: 1.5, marginTop: 4, maxWidth: '46ch' }}>{s.d}</div>
                      </div>
                      <div style={{
                        fontFamily: 'JetBrains Mono, monospace',
                        fontSize: 11, color: active || done ? ST.brass : 'rgba(168,133,90,0.4)',
                        letterSpacing: '0.1em',
                      }}>WK {(['01', '04', '09', '11', '12'])[i]}</div>
                    </div>
                  );
                })}
              </div>

              {/* progress band */}
              <div style={{ marginTop: 30, height: 3, background: 'rgba(168,133,90,0.18)', position: 'relative' }}>
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0,
                  width: `${t * 100}%`, background: ST.brick,
                  transition: 'width 0.1s linear',
                }} />
              </div>
            </div>
          </div>
        );
      }}
    </Pinned>
  );
}

/* ----- INTERIOR GALLERY (plate-labeled) ----- */
function StdPlateImage({ plate, src, t, sub, style }) {
  const ref = useRef(null);
  useReveal(ref);
  const [hover, setHover] = useState(false);
  return (
    <div ref={ref} className="r r-scale" style={{ position: 'relative', overflow: 'hidden', background: ST.paper, ...style }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    >
      <img src={src} alt={t} style={{
        width: '100%', height: '100%', objectFit: 'cover',
        filter: 'saturate(0.94) contrast(1.02)',
        transform: hover ? 'scale(1.05)' : 'scale(1.01)',
        transition: 'transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1)',
      }} />
      {/* plate # ribbon */}
      <div style={{
        position: 'absolute', top: 0, left: 0,
        background: ST.ink, color: ST.bg, padding: '6px 12px',
        fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
      }}>{plate}</div>
      <div style={{
        position: 'absolute', inset: 0,
        background: hover
          ? 'linear-gradient(180deg, rgba(26,36,54,0) 30%, rgba(26,36,54,0.82) 100%)'
          : 'linear-gradient(180deg, rgba(26,36,54,0) 55%, rgba(26,36,54,0.45) 100%)',
        transition: 'background 0.5s',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', left: 20, right: 20, bottom: 18,
        color: ST.bg,
        transform: hover ? 'translateY(0)' : 'translateY(6px)',
        transition: 'transform 0.4s',
      }}>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.008em' }}>{t}</div>
        <div style={{ fontSize: 12.5, color: 'rgba(239,233,220,0.8)', marginTop: 4 }}>{sub}</div>
      </div>
    </div>
  );
}

function StdGallery() {
  return (
    <section style={{ background: ST.paper, color: ST.ink, padding: '110px 56px' }}>
      <Reveal><StdPlateLabel n="05" label="The product" /></Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'flex-end', marginTop: 24 }}>
        <Reveal as="h2" delay={100} style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 68px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 0.98, maxWidth: '18ch' }}>
          The home, plated and recorded.
        </Reveal>
        <Reveal delay={200} style={{ fontSize: 15, color: ST.ink2, lineHeight: 1.65, maxWidth: '42ch' }}>
          Yoga Kitchen™ counters, 9-foot ceilings, anti-microbial surfaces,
          and a 45 ft² floor-to-ceiling window. Every plate identical, every
          Calypsos identical — civic-grade quality at residential cost.
        </Reveal>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gridTemplateRows: 'repeat(2, 320px)',
        gap: 16,
        marginTop: 48,
      }}>
        <StdPlateImage plate="Plate 014 · Living"  src="assets/img/living-room.jpg"      t="The living room"  sub="18 ft open kitchen + living, every door" style={{ gridColumn: 'span 2', gridRow: 'span 1' }} />
        <StdPlateImage plate="Plate 015 · Bed"     src="assets/img/bedroom.jpg"          t="The bedroom"      sub="9 ft ceilings · floor-to-ceiling window"  style={{ gridColumn: 'span 1', gridRow: 'span 2' }} />
        <StdPlateImage plate="Plate 016 · Kitchen" src="assets/img/kitchen.jpg"          t="The Yoga Kitchen" sub="Counters that move with the body"          style={{ gridColumn: 'span 1', gridRow: 'span 2' }} />
        <StdPlateImage plate="Plate 017 · Detail"  src="assets/img/bed-gradient.jpg"      t="The detail"       sub="Yacht-grade finishes · no drywall"         style={{ gridColumn: 'span 2', gridRow: 'span 1' }} />
      </div>
    </section>
  );
}

/* ----- PIPELINE ----- */
function StdPipeline() {
  const sites = [
    { city: 'Hoboken, NJ',     site: 'Kreiger Lane',  doors: 16, status: 'In production', stage: 'WK 09 OF 12', pct: 75, live: true },
    { city: 'Hoboken, NJ',     site: 'Bank Street',   doors: 16, status: 'Foundation',    stage: 'WK 04 OF 12', pct: 33 },
    { city: 'Jersey City, NJ', site: 'Communipaw',    doors: 32, status: 'Entitled',      stage: 'PRE-BUILD',    pct: 12 },
    { city: 'Newark, NJ',      site: 'Mulberry Row',  doors: 48, status: 'In contract',   stage: 'Q3 START',     pct: 6 },
    { city: 'Boston, MA',      site: 'Allston Yards', doors: 64, status: 'Optioned',      stage: 'Q4 START',     pct: 3 },
  ];
  return (
    <section style={{ background: ST.bg, color: ST.ink, padding: '110px 56px' }}>
      <Reveal><StdPlateLabel n="06" label="2026 pipeline" /></Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'flex-end', marginTop: 24 }}>
        <Reveal as="h2" delay={80} style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1, maxWidth: '14ch' }}>
          One-seventy-six doors under contract.
        </Reveal>
        <Reveal delay={180} style={{ display: 'flex', gap: 26, alignItems: 'center', fontSize: 11, color: ST.mute, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600 }}>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 0, background: ST.brick, marginRight: 8 }} />Live</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 0, background: ST.ink, marginRight: 8 }} />Confirmed</span>
        </Reveal>
      </div>

      {/* table header */}
      <div style={{
        display: 'grid', gridTemplateColumns: '40px 1.4fr 1.4fr 0.6fr 1fr 2fr',
        gap: 24, alignItems: 'center',
        marginTop: 48, padding: '10px 0',
        borderTop: `1.5px solid ${ST.ink}`,
        borderBottom: `1px solid ${ST.ink}`,
        fontSize: 10.5, color: ST.ink, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
      }}>
        <span>#</span>
        <span>Site</span>
        <span>Status</span>
        <span>Doors</span>
        <span>Stage</span>
        <span>Progress</span>
      </div>

      {sites.map((s, i) => (
        <Reveal key={i} delay={i * 80} style={{
          display: 'grid', gridTemplateColumns: '40px 1.4fr 1.4fr 0.6fr 1fr 2fr',
          gap: 24, alignItems: 'center',
          padding: '22px 0',
          borderBottom: `1px solid ${ST.hair}`,
          background: 'transparent',
          transition: 'background 0.3s, padding-left 0.3s, padding-right 0.3s',
          cursor: 'pointer',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = ST.paper; e.currentTarget.style.paddingLeft = '14px'; e.currentTarget.style.paddingRight = '14px'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.paddingRight = '0'; }}
        >
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 26, height: 26, border: `1.5px solid ${ST.ink}`, borderRadius: 999,
            fontWeight: 600, fontSize: 11, color: ST.ink,
          }}>{String(i + 1).padStart(2, '0')}</span>
          <div>
            <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.012em' }}>{s.site}</div>
            <div style={{ fontSize: 12, color: ST.mute, marginTop: 4, letterSpacing: '0.04em' }}>{s.city}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: ST.ink2 }}>
            {s.live && <span style={{ width: 8, height: 8, background: ST.brick }} />}
            {s.status}
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.018em', color: ST.ink, fontVariantNumeric: 'tabular-nums' }}>{s.doors}</div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: ST.mute, letterSpacing: '0.1em', fontWeight: 500 }}>{s.stage}</div>
          <div style={{ height: 4, background: ST.hair, position: 'relative' }}>
            <Reveal delay={300 + i * 80} variant="r-fade" style={{ position: 'absolute', inset: 0 }}>
              <div style={{
                position: 'absolute', left: 0, top: 0, bottom: 0,
                width: `${s.pct}%`, background: s.live ? ST.brick : ST.ink,
                transition: 'width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1)',
              }} />
            </Reveal>
          </div>
        </Reveal>
      ))}
    </section>
  );
}

/* ----- FOOTER CTA ----- */
function StdFooter() {
  return (
    <section style={{ background: ST.panel, color: ST.bg, padding: '100px 56px 48px' }}>
      <Reveal><StdPlateLabel n="07" label="Speak to Vessel" color={ST.brass} /></Reveal>
      <Reveal as="h2" delay={100} style={{
        margin: '24px 0 56px',
        fontSize: 'clamp(48px, 6vw, 96px)',
        fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 0.96,
        maxWidth: '18ch',
      }}>
        Eight sites left in the 2026 cohort. <span style={{ color: ST.brass }}>Speak to Vessel.</span>
      </Reveal>

      <Reveal delay={200} style={{ display: 'flex', gap: 14, marginBottom: 72 }}>
        <button style={{
          background: ST.brick, color: ST.paper, border: 'none',
          padding: '16px 28px', fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
          borderRadius: 2, letterSpacing: '0.02em',
        }}>Book a partner call →</button>
        <button style={{
          background: 'transparent', color: ST.bg, border: `1.5px solid rgba(239,233,220,0.4)`,
          padding: '15px 26px', fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
          borderRadius: 2,
        }}>Request prospectus (PDF)</button>
      </Reveal>

      {/* developer programme plate */}
      <Reveal delay={300} style={{
        border: `1px solid ${ST.brass}`,
        padding: '22px 26px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24,
        marginBottom: 56,
      }}>
        <div>
          <div style={{ fontSize: 10.5, color: ST.brass, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
            Developer programme · 2026 cohort
          </div>
          <div style={{ fontSize: 19, fontWeight: 600, marginTop: 8 }}>
            Next partner call · 03 June 2026 · 10:00 EST · in-person Hoboken HQ
          </div>
        </div>
        <button style={{
          background: 'transparent', color: ST.brass, border: `1px solid ${ST.brass}`,
          padding: '10px 18px', fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
          borderRadius: 2, letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>RSVP →</button>
      </Reveal>

      <div style={{ borderTop: `1px solid rgba(168,133,90,0.3)`, paddingTop: 32, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color: ST.bg, fontFamily: 'Matter', fontWeight: 600, fontSize: 16, letterSpacing: '0.02em' }}>
            <VMark color={ST.bg} size={20} />
            <span>VESSEL</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'rgba(239,233,220,0.55)', marginTop: 14, lineHeight: 1.6, maxWidth: '38ch' }}>
            A civic-grade housing standard. Calypsos is the first product.
            Built in Hoboken, deliverable anywhere.
          </div>
        </div>
        {[
          { h: 'Programme',  l: ['Calypsos', 'For Developers', 'For Communities', 'Press'] },
          { h: 'Economics',  l: ['Unit economics', 'Pipeline', 'Pro-forma', 'RSM audit (PDF)'] },
          { h: 'Company',    l: ['Team', 'Careers', 'Patents', 'Legal'] },
        ].map((c, i) => (
          <div key={i}>
            <div style={{ fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase', color: ST.brass, marginBottom: 14, fontWeight: 600 }}>{c.h}</div>
            {c.l.map((x, j) => (
              <div key={j} style={{ fontSize: 13, color: 'rgba(239,233,220,0.75)', marginTop: 8, cursor: 'pointer' }}>{x}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 56, display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'rgba(168,133,90,0.6)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
        <span>© 2026 Vessel Technologies, Inc.</span>
        <span>US Patent #10,704,251 B1</span>
        <span>legal@myvessel.com</span>
      </div>
    </section>
  );
}

/* ----- ROOT ----- */
function StandardPrototype() {
  return (
    <>
      <StdNav />
      <StdHero />
      <StdProposition />
      <StdEconomics />
      <StdTimeline />
      <StdGallery />
      <StdPipeline />
      <StdFooter />
    </>
  );
}

Object.assign(window, { StandardPrototype });