/* ============================================================
   PROTOTYPE — Calypsos product page in MONOLITH register
   Warm off-white, graphite ink, single ember accent.
   Long-scroll. Developer/investor tone.
   ============================================================ */

const MT = {
  bg:        '#f6f4ef',
  surface:   '#ffffff',
  ink:       '#1a1714',
  ink2:      '#3d3833',
  mute:      '#8e887d',
  hair:      '#d9d4ca',
  ember:     '#c46818',
  emberSoft: '#e8a674',
  bone:      '#ebe6dc',
  panel:     '#0d0c0a',
};

/* ----- nav ----- */
function MonoNav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    let container = document.querySelector('[data-mono-col]');
    if (!container) return;
    const onScroll = () => setScrolled(container.scrollTop > 40);
    container.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => container.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position: 'sticky', top: 32, zIndex: 8,
      margin: '0 24px',
      pointerEvents: 'none',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: scrolled ? '10px 18px' : '14px 22px',
        background: scrolled ? 'rgba(246,244,239,0.78)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
        border: scrolled ? `1px solid ${MT.hair}` : '1px solid transparent',
        borderRadius: 999,
        transition: 'all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1)',
        pointerEvents: 'auto',
        color: MT.ink,
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, fontFamily: 'Matter', fontWeight: 500, fontSize: 14, letterSpacing: '0.32em', textTransform: 'uppercase' }}>
          <VMark color={MT.ink} size={16} />
          <span>VESSEL</span>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 12.5, color: MT.ink2, fontWeight: 400 }}>
          <span>The product</span>
          <span>Economics</span>
          <span>Pipeline</span>
          <span>Company</span>
        </div>
        <button style={{
          background: MT.ink, color: MT.bg, border: 'none',
          padding: '8px 16px', borderRadius: 999,
          fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
          letterSpacing: '0.04em',
        }}>Reserve a site ›</button>
      </div>
    </div>
  );
}

/* ----- HERO ----- */
function MonoHero() {
  return (
    <section style={{ position: 'relative', minHeight: '94vh', background: MT.bg, color: MT.ink, padding: '40px 56px 56px', display: 'flex', flexDirection: 'column' }}>
      {/* tag row */}
      <Reveal delay={120} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: MT.mute, marginTop: 24 }}>
        <span><span style={{ display: 'inline-block', width: 6, height: 6, background: MT.ember, marginRight: 12, verticalAlign: 'middle' }} /> Calypsos · the housing standard</span>
        <span>For developers · 2026 cohort</span>
      </Reveal>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, marginTop: 56, alignItems: 'stretch' }}>
        {/* left — copy */}
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <Reveal as="h1" delay={180} style={{
              margin: 0, fontWeight: 300, fontSize: 'clamp(56px, 7.2vw, 108px)',
              lineHeight: 0.95, letterSpacing: '-0.035em', color: MT.ink,
              maxWidth: '14ch',
            }}>
              Sixteen doors.<br />
              One steel chassis.<br />
              <span style={{ fontWeight: 500 }}>Twelve weeks to keys.</span>
            </Reveal>
            <Reveal delay={320} style={{
              fontSize: 17, lineHeight: 1.5, color: MT.ink2,
              maxWidth: '44ch', marginTop: 36, fontWeight: 400,
            }}>
              Calypsos is a factory-finished, four-storey housing platform.
              It arrives on a flatbed, is craned into place in a week, and
              pencils at <strong style={{ fontWeight: 500, color: MT.ink }}>$148K per door</strong> all-in —
              the same chassis whether you sell market or affordable.
            </Reveal>
          </div>
          <Reveal delay={460} style={{ display: 'flex', gap: 12, marginTop: 48 }}>
            <button style={{
              background: MT.ink, color: MT.bg, border: 'none',
              padding: '16px 26px', borderRadius: 999,
              fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
              letterSpacing: '0.01em',
              transition: 'transform 0.3s, background 0.3s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = MT.ember; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = MT.ink; }}
            >Reserve a site ›</button>
            <button style={{
              background: 'transparent', color: MT.ink, border: `1px solid ${MT.ink}`,
              padding: '15px 24px', borderRadius: 999,
              fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
              transition: 'background 0.3s, color 0.3s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = MT.ink; e.currentTarget.style.color = MT.bg; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = MT.ink; }}
            >Download prospectus</button>
          </Reveal>
        </div>

        {/* right — hero video */}
        <Reveal variant="r-scale" delay={300} style={{ position: 'relative', overflow: 'hidden', background: MT.bone }}>
          <video
            autoPlay muted loop playsInline
            poster="assets/img/vessel-intro-poster.jpg"
            style={{
              width: '100%', height: '100%', objectFit: 'cover',
              filter: 'saturate(0.86) contrast(1.02)',
              background: 'url(assets/img/vessel-intro-poster.jpg) center/cover no-repeat',
            }}
          >
            <source src="assets/video/vessel-intro.mp4" type="video/mp4" />
          </video>
          <div style={{
            position: 'absolute', left: 16, bottom: 16, padding: '10px 14px',
            background: 'rgba(26,23,20,0.82)', backdropFilter: 'blur(10px)',
            color: MT.bg, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: MT.ember, boxShadow: `0 0 0 4px ${MT.ember}33` }} />
            Live · Calypsos · Hoboken NJ · 16 doors
          </div>
          {/* tiny muted indicator, bottom-right */}
          <div style={{
            position: 'absolute', right: 16, bottom: 16,
            padding: '6px 10px',
            background: 'rgba(26,23,20,0.5)', backdropFilter: 'blur(10px)',
            color: MT.bg, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M1 3v4h2l3 2V1L3 3H1z" /><path d="M7.5 2.5l2 2-2 2M9.5 2.5l-2 2 2 2" stroke="currentColor" strokeWidth="0.6" fill="none" /></svg>
            Muted
          </div>
        </Reveal>
      </div>

      {/* hero footer row */}
      <Reveal delay={500} style={{ marginTop: 36, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `1px solid ${MT.hair}`, paddingTop: 22, fontSize: 12, color: MT.mute, fontFamily: 'JetBrains Mono, monospace' }}>
        <span>41′ 0″ × 13′ 2″ × 38′ tall</span>
        <span>540 ft² / door</span>
        <span>5,400 kg per module</span>
        <span style={{ color: MT.ember }}>↓ scroll</span>
      </Reveal>
    </section>
  );
}

/* ----- PROPOSITION ----- */
function MonoProposition() {
  return (
    <section style={{ background: MT.surface, color: MT.ink, padding: '120px 56px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
        <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' }} />
          01 · The case
        </Reveal>
        <div>
          <Reveal as="h2" style={{ margin: 0, fontSize: 'clamp(36px, 4.4vw, 60px)', fontWeight: 300, letterSpacing: '-0.028em', lineHeight: 1.04 }}>
            The smallest unit of <span style={{ color: MT.ember, fontWeight: 500 }}>city,</span> rethought from the steel up.
          </Reveal>
          <Reveal delay={150} style={{ fontSize: 17, lineHeight: 1.6, color: MT.ink2, maxWidth: '54ch', marginTop: 28 }}>
            Wood-frame multifamily is a hundred-year-old technology that costs
            $350K per door, takes 30 months, and lasts 40 years. Calypsos
            replaces it with a sealed steel chassis built on an automotive
            line. One product, one price, one timeline — repeated to scale.
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ----- ECONOMICS STAT BAND ----- */
function MonoEconomics() {
  const stats = [
    { v: 148, prefix: '$', suffix: 'K', k: 'all-in per door', s: 'chassis · MEP · finishes · smart stack' },
    { v: 12,  suffix: 'wk', k: 'order to occupancy', s: '8 factory · 1 install · 3 finish' },
    { v: 12.4, suffix: '%', k: 'unlevered yield', s: 'pro-forma, year 3 stabilised', decimals: 1 },
    { v: 100, suffix: 'yr', k: 'service life', s: 'vs. 40yr wood-frame', highlight: true },
  ];
  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 }}>
        02 · Unit economics
      </Reveal>
      <Reveal as="h2" delay={100} style={{ margin: '20px 0 64px', fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, letterSpacing: '-0.03em', lineHeight: 0.98, maxWidth: '18ch' }}>
        Pencils at market. <span style={{ color: MT.ember, fontWeight: 500 }}>Pencils at affordable.</span>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid ${MT.hair}` }}>
        {stats.map((s, i) => (
          <Reveal key={i} delay={i * 100} style={{
            padding: '36px 28px 32px',
            borderRight: i < 3 ? `1px solid ${MT.hair}` : 'none',
            borderBottom: `1px solid ${MT.hair}`,
          }}>
            <div style={{
              fontSize: 'clamp(54px, 6vw, 84px)',
              fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 0.96,
              color: s.highlight ? MT.ember : MT.ink,
              fontVariantNumeric: 'tabular-nums',
            }}>
              <CountUp to={s.v} prefix={s.prefix} suffix={s.suffix} decimals={s.decimals || 0} />
            </div>
            <div style={{ fontSize: 12, color: MT.ink, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500, marginTop: 18 }}>{s.k}</div>
            <div style={{ fontSize: 13, color: MT.mute, marginTop: 6, lineHeight: 1.5 }}>{s.s}</div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={500} style={{ marginTop: 36, fontSize: 13, color: MT.mute, fontFamily: 'JetBrains Mono, monospace', display: 'flex', justifyContent: 'space-between' }}>
        <span>SOURCE: Vessel internal · Hoboken NJ comp set · audited Q1 2026</span>
        <span style={{ color: MT.ember, cursor: 'pointer' }}>View full pro-forma →</span>
      </Reveal>
    </section>
  );
}

Object.assign(window, { MT, MonoNav, MonoHero, MonoProposition, MonoEconomics });