/* ============================================================
   PROTOTYPE — Calypsos (Monolith) — sections 03 onward
   Sticky 12-week timeline, interior gallery, pipeline, footer.
   ============================================================ */

/* ----- STICKY 12-WEEK TIMELINE ----- */
function MonoTimeline() {
  const steps = [
    { wk: '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: 'WK 04', t: 'Foundation', d: 'Twelve concrete piers. No basement, no slab pour. Two days of work.', img: 'assets/img/exterior-lane.jpg' },
    { wk: 'WK 09', t: 'Factory build', d: 'Sixteen chassis modules finished on an automotive line in Hoboken.', img: 'assets/img/kitchen.jpg' },
    { wk: 'WK 11', t: 'Crane day', d: 'One street closure, six hours, four storeys. Power and water connect.', img: 'assets/img/press.jpg' },
    { wk: '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) => {
        // t is 0..1, divide into N steps
        const n = steps.length;
        const idx = Math.min(n - 1, Math.floor(t * n * 0.999));
        const localT = (t * n) - idx; // 0..1 within current step
        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: MT.ink, color: MT.bg,
            display: 'grid', gridTemplateColumns: '1.1fr 0.9fr',
          }}>
            {/* left: changing image */}
            <div style={{ position: 'relative', overflow: 'hidden' }}>
              {steps.map((s, i) => (
                <img key={i} src={s.img} alt=""
                  style={{
                    position: 'absolute', inset: 0,
                    width: '100%', height: '100%', objectFit: 'cover',
                    filter: 'saturate(0.7) contrast(1.05) brightness(0.78)',
                    opacity: i === idx ? 1 : 0,
                    transform: i === idx ? `scale(${1 + localT * 0.04})` : 'scale(1.04)',
                    transition: 'opacity 0.7s ease-out, transform 4s ease-out',
                  }}
                />
              ))}
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(135deg, rgba(26,23,20,0.4), rgba(26,23,20,0.1) 50%, rgba(26,23,20,0.5))`,
              }} />
              {/* big week stamp */}
              <div style={{
                position: 'absolute', top: 36, left: 36,
                fontSize: 13, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: MT.emberSoft, fontWeight: 500,
              }}>
                {steps[idx].wk}
              </div>
              <div style={{
                position: 'absolute', bottom: 40, left: 36,
                fontSize: 'clamp(56px, 7vw, 96px)', fontWeight: 300,
                letterSpacing: '-0.035em', lineHeight: 0.96,
                color: MT.bg,
              }}>
                {steps[idx].t}.
              </div>
            </div>

            {/* right: list */}
            <div style={{ padding: '0 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: MT.emberSoft, fontWeight: 500, marginBottom: 28 }}>
                <span style={{ display: 'inline-block', width: 6, height: 6, background: MT.ember, marginRight: 12, verticalAlign: 'middle' }} />
                03 · Foundation to occupancy
              </div>
              <h2 style={{ margin: 0, fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1.1, color: MT.bg, marginBottom: 36, maxWidth: '20ch' }}>
                Twelve weeks. Five milestones. One truck.
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {steps.map((s, i) => {
                  const active = i === idx;
                  const done = i < idx;
                  return (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '74px 1fr',
                      gap: 16, alignItems: 'baseline',
                      padding: '14px 0',
                      borderTop: i === 0 ? `1px solid rgba(255,255,255,0.12)` : 'none',
                      borderBottom: `1px solid rgba(255,255,255,0.12)`,
                      opacity: active ? 1 : (done ? 0.55 : 0.35),
                      transition: 'opacity 0.4s',
                    }}>
                      <div style={{
                        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                        letterSpacing: '0.12em',
                        color: active ? MT.ember : (done ? MT.emberSoft : MT.bone),
                      }}>{s.wk}</div>
                      <div>
                        <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', color: MT.bg }}>{s.t}</div>
                        <div style={{ fontSize: 13, color: 'rgba(231,227,220,0.65)', lineHeight: 1.5, marginTop: 4, maxWidth: '40ch' }}>{s.d}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
              {/* progress bar */}
              <div style={{ marginTop: 32, height: 2, background: 'rgba(255,255,255,0.12)', position: 'relative' }}>
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0,
                  width: `${t * 100}%`, background: MT.ember,
                  transition: 'width 0.1s linear',
                }} />
              </div>
            </div>
          </div>
        );
      }}
    </Pinned>
  );
}

/* ----- INTERIOR GALLERY ----- */
function MonoGallery() {
  const items = [
    { src: 'assets/img/living-room.jpg', t: 'The living room', sub: '18 ft open kitchen + living, every door', size: 'large' },
    { src: 'assets/img/bedroom.jpg',     t: 'The bedroom',     sub: 'Floor-to-ceiling window. 9 ft ceilings.', size: 'tall' },
    { src: 'assets/img/kitchen.jpg',     t: 'The Yoga Kitchen', sub: 'Counters that move with the body.', size: 'tall' },
    { src: 'assets/img/bed-gradient.jpg', t: 'The detail', sub: 'Yacht-grade finishes. No drywall. No studs.', size: 'wide' },
  ];
  return (
    <section style={{ background: MT.bg, color: MT.ink, padding: '100px 56px' }}>
      <Reveal style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: MT.mute, fontWeight: 500 }}>
        04 · The product
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'flex-end', marginTop: 16 }}>
        <Reveal as="h2" delay={100} style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, letterSpacing: '-0.03em', lineHeight: 0.98, maxWidth: '18ch' }}>
          A 540-ft² home you would actually <span style={{ color: MT.ember, fontWeight: 500, fontStyle: 'italic' }}>want</span> to live in.
        </Reveal>
        <Reveal delay={250} style={{ fontSize: 15, color: MT.ink2, lineHeight: 1.6, maxWidth: '42ch' }}>
          Yoga Kitchen™ counters, 9-foot ceilings, anti-microbial surfaces,
          and a 45 ft² floor-to-ceiling window. The same finish in every
          unit; the same finish in every Calypsos, everywhere.
        </Reveal>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gridTemplateRows: 'repeat(2, 320px)',
        gap: 12,
        marginTop: 56,
      }}>
        <GalleryCard {...items[0]} style={{ gridColumn: 'span 2', gridRow: 'span 1' }} />
        <GalleryCard {...items[1]} style={{ gridColumn: 'span 1', gridRow: 'span 2' }} />
        <GalleryCard {...items[2]} style={{ gridColumn: 'span 1', gridRow: 'span 2' }} />
        <GalleryCard {...items[3]} style={{ gridColumn: 'span 2', gridRow: 'span 1' }} />
      </div>
    </section>
  );
}

function GalleryCard({ 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: MT.bone, ...style }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    >
      <img src={src} alt={t} style={{
        width: '100%', height: '100%', objectFit: 'cover',
        filter: 'saturate(0.92) contrast(1.02)',
        transform: hover ? 'scale(1.06)' : 'scale(1.02)',
        transition: 'transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: hover
          ? 'linear-gradient(180deg, rgba(26,23,20,0) 30%, rgba(26,23,20,0.78) 100%)'
          : 'linear-gradient(180deg, rgba(26,23,20,0) 50%, rgba(26,23,20,0.5) 100%)',
        transition: 'background 0.5s',
      }} />
      <div style={{
        position: 'absolute', left: 20, right: 20, bottom: 18,
        color: MT.bg,
        transform: hover ? 'translateY(0)' : 'translateY(8px)',
        transition: 'transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1)',
      }}>
        <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>{t}</div>
        <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.78)', marginTop: 4,
          opacity: hover ? 1 : 0.78, transition: 'opacity 0.3s' }}>{sub}</div>
      </div>
    </div>
  );
}

/* ----- PIPELINE ----- */
function MonoPipeline() {
  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: MT.surface, color: MT.ink, padding: '110px 56px' }}>
      <Reveal style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: MT.mute, fontWeight: 500 }}>
        05 · 2026 pipeline
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'flex-end', marginTop: 16 }}>
        <Reveal as="h2" delay={80} style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 68px)', fontWeight: 300, letterSpacing: '-0.03em', lineHeight: 0.98, maxWidth: '14ch' }}>
          One-seventy-six doors under contract.
        </Reveal>
        <Reveal delay={200} style={{ display: 'flex', gap: 22, alignItems: 'center', fontSize: 12, color: MT.mute, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: MT.ember, marginRight: 8 }} />Live</span>
          <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: MT.ink, marginRight: 8 }} />Confirmed</span>
        </Reveal>
      </div>

      <div style={{ marginTop: 56 }}>
        {sites.map((s, i) => (
          <Reveal key={i} delay={i * 80} style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1.4fr 0.6fr 1fr 2fr',
            gap: 28,
            alignItems: 'center',
            padding: '26px 0',
            borderTop: `1px solid ${MT.hair}`,
            borderBottom: i === sites.length - 1 ? `1px solid ${MT.hair}` : 'none',
            cursor: 'pointer',
            transition: 'background 0.3s, padding 0.3s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = MT.bg; e.currentTarget.style.padding = '26px 16px'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.padding = '26px 0'; }}
          >
            <div>
              <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.012em' }}>{s.site}</div>
              <div style={{ fontSize: 12, color: MT.mute, marginTop: 4, letterSpacing: '0.04em' }}>{s.city}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: MT.ink2 }}>
              {s.live && <span style={{ width: 8, height: 8, borderRadius: 999, background: MT.ember, boxShadow: `0 0 0 4px ${MT.ember}22` }} />}
              {s.status}
            </div>
            <div style={{ fontSize: 24, fontWeight: 300, letterSpacing: '-0.02em', color: MT.ink, fontVariantNumeric: 'tabular-nums' }}>{s.doors}</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: MT.mute, letterSpacing: '0.04em' }}>{s.stage}</div>
            <div style={{ height: 2, background: MT.hair, position: 'relative' }}>
              <Reveal delay={300 + i * 80} variant="r-fade" style={{
                position: 'absolute', inset: 0, transformOrigin: 'left center',
              }}>
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0,
                  width: `${s.pct}%`, background: s.live ? MT.ember : MT.ink,
                  transition: 'width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1)',
                }} />
              </Reveal>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ----- FOOTER CTA ----- */
function MonoFooter() {
  return (
    <section style={{ background: MT.panel, color: MT.bg, padding: '120px 56px 56px' }}>
      <Reveal style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: MT.ember, fontWeight: 500 }}>
        <span style={{ display: 'inline-block', width: 6, height: 6, background: MT.ember, marginRight: 12, verticalAlign: 'middle' }} />
        Speak to Vessel
      </Reveal>
      <Reveal as="h2" delay={100} style={{
        margin: '22px 0 60px',
        fontSize: 'clamp(48px, 6vw, 96px)',
        fontWeight: 300, letterSpacing: '-0.035em', lineHeight: 0.96,
        maxWidth: '20ch',
      }}>
        Eight sites left in the 2026 cohort.<br />
        <span style={{ color: MT.ember, fontWeight: 500 }}>Reserve yours.</span>
      </Reveal>

      <Reveal delay={200} style={{ display: 'flex', gap: 14, marginBottom: 80 }}>
        <button style={{
          background: MT.ember, color: MT.surface, border: 'none',
          padding: '18px 28px', borderRadius: 999,
          fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
        }}>Book a partner call ›</button>
        <button style={{
          background: 'transparent', color: MT.bg, border: '1px solid rgba(255,255,255,0.3)',
          padding: '17px 26px', borderRadius: 999,
          fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
        }}>Download prospectus</button>
      </Reveal>

      <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 32, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, fontFamily: 'Matter', fontWeight: 500, fontSize: 15, letterSpacing: '0.32em', textTransform: 'uppercase', color: MT.bg }}>
            <VMark color={MT.bg} size={16} />
            <span>VESSEL</span>
          </div>
          <div style={{ fontSize: 12.5, color: '#8e887d', marginTop: 14, lineHeight: 1.55, maxWidth: '38ch' }}>
            A masstige housing standard. Calypsos is the first product.
            Built in Hoboken, deliverable anywhere.
          </div>
        </div>
        {[
          { h: 'Product',     l: ['The chassis', 'Yoga Kitchen™', 'Finishes', 'Floor plan'] },
          { h: 'Developers',  l: ['Unit economics', 'Pipeline', 'Prospectus', 'Reserve a site'] },
          { h: 'Company',     l: ['Team', 'Press', 'Careers', 'Contact'] },
        ].map((c, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6e695f', marginBottom: 14 }}>{c.h}</div>
            {c.l.map((x, j) => (
              <div key={j} style={{ fontSize: 13, color: '#b8b1a4', marginTop: 8, cursor: 'pointer' }}>{x}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 60, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#6e695f', letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace' }}>
        <span>© 2026 Vessel Technologies, Inc.</span>
        <span>US Patent #10,704,251 B1</span>
        <span>legal@myvessel.com</span>
      </div>
    </section>
  );
}

/* ----- ROOT ----- */
function MonolithPrototype() {
  return (
    <>
      <MonoNav />
      <MonoHero />
      <MonoProposition />
      <MonoEconomics />
      <MonoTimeline />
      <MonoGallery />
      <MonoPipeline />
      <MonoFooter />
    </>
  );
}

Object.assign(window, { MonolithPrototype });