/* ============================================================
   PROTOTYPE — Calypsos product page in STANDARD register
   Civic: navy ink, warm cream, terracotta brick.
   Numbered plates, Matter Semibold display, sharp corners.
   Long-scroll. Developer/investor tone.
   ============================================================ */

const ST = {
  bg:      '#efe9dc',
  paper:   '#f7f3ea',
  surface: '#ffffff',
  ink:     '#1a2436',
  ink2:    '#4a546a',
  mute:    '#7a7568',
  hair:    '#c8c1ad',
  brick:   '#a14a2a',
  brass:   '#a8855a',
  panel:   '#1a2436',
};

/* Plate label — numbered circle + uppercase tag */
function StdPlateLabel({ n, label, color = ST.ink, size = 'sm' }) {
  const d = size === 'lg' ? 32 : 26;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: d, height: d, border: `1.5px solid ${color}`, borderRadius: 999,
        fontFamily: 'Matter', fontWeight: 600, fontSize: size === 'lg' ? 12 : 11, color,
      }}>{n}</span>
      <span style={{ fontSize: size === 'lg' ? 12 : 11, letterSpacing: '0.26em', textTransform: 'uppercase', color, fontWeight: 600 }}>
        {label}
      </span>
    </div>
  );
}

/* ----- NAV (civic letterhead) ----- */
function StdNav() {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 8, background: ST.bg }}>
      <div style={{ borderBottom: `2px solid ${ST.ink}`, padding: '14px 36px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color: ST.ink, fontFamily: 'Matter', fontWeight: 600, fontSize: 16, letterSpacing: '0.02em' }}>
          <VMark color={ST.ink} size={20} />
          <span>VESSEL</span>
        </div>
        <div style={{ display: 'flex', gap: 32, fontSize: 13, color: ST.ink, fontWeight: 500 }}>
          <span>Calypsos</span>
          <span>For Developers</span>
          <span>Communities</span>
          <span>Press</span>
        </div>
        <button style={{
          background: ST.ink, color: ST.bg, border: 'none',
          padding: '10px 18px', fontFamily: 'inherit', fontSize: 12.5, fontWeight: 600,
          borderRadius: 2, letterSpacing: '0.02em',
        }}>Prospectus →</button>
      </div>
      <div style={{
        padding: '8px 36px', display: 'flex', justifyContent: 'space-between',
        borderBottom: `1px solid ${ST.hair}`, fontSize: 10.5, color: ST.mute,
        letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
      }}>
        <span>The Calypsos Programme</span>
        <span>For site developers and municipal partners</span>
        <span>Issued 2026 · Vol. III</span>
      </div>
    </div>
  );
}

/* ----- HERO ----- */
function StdHero() {
  return (
    <section style={{ background: ST.bg, color: ST.ink, padding: '60px 56px 0' }}>
      <Reveal delay={120}>
        <StdPlateLabel n="01" label="Calypsos · the housing programme" size="lg" />
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, marginTop: 28, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingBottom: 56 }}>
          <Reveal as="h1" delay={200} style={{
            margin: '24px 0 0', fontWeight: 600, fontSize: 'clamp(60px, 7.4vw, 116px)',
            lineHeight: 0.92, letterSpacing: '-0.04em', color: ST.ink, maxWidth: '12ch',
          }}>
            A standard for the next million<br /><span style={{ color: ST.brick }}>homes.</span>
          </Reveal>

          <div>
            <Reveal delay={340} style={{ fontSize: 18, lineHeight: 1.55, color: ST.ink2, maxWidth: '44ch', fontWeight: 400 }}>
              Calypsos is a turnkey housing programme: chassis, finishes,
              mechanical, and a five-year operating warranty — delivered as
              one line on a balance sheet. The same product whether you sell
              market or affordable.
            </Reveal>
            <Reveal delay={460} style={{ marginTop: 36, display: 'flex', gap: 12 }}>
              <button style={{
                background: ST.ink, color: ST.bg, border: 'none',
                padding: '15px 26px', fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
                letterSpacing: '0.04em', borderRadius: 2,
                transition: 'background 0.3s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = ST.brick; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = ST.ink; }}
              >Request prospectus →</button>
              <button style={{
                background: 'transparent', color: ST.ink, border: `1.5px solid ${ST.ink}`,
                padding: '14px 24px', fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
                borderRadius: 2,
              }}>For developers</button>
            </Reveal>
          </div>
        </div>

        <Reveal variant="r-scale" delay={300} style={{ position: 'relative', overflow: 'hidden' }}>
          <video
            autoPlay muted loop playsInline
            poster="assets/img/vessel-intro-poster.jpg"
            style={{
              width: '100%', height: '100%', objectFit: 'cover',
              filter: 'saturate(0.95) 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', bottom: 0, left: 0, right: 0,
            background: ST.ink, color: ST.bg, padding: '14px 22px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: ST.brass, fontWeight: 600 }}>
                Plate 014 · Calypsos · Reel 01
              </div>
              <div style={{ fontSize: 14, marginTop: 4, fontWeight: 600 }}>
                1012 Bank Street · Hoboken, NJ · 16 doors
              </div>
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.08em', fontFamily: 'JetBrains Mono, monospace' }}>
              41′ × 13′ 2″
            </div>
          </div>
          {/* film-strip plate # — top-left */}
          <div style={{
            position: 'absolute', top: 14, left: 14,
            padding: '5px 10px',
            background: ST.bg, color: ST.ink,
            fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            border: `1px solid ${ST.hair}`,
          }}>
            <span style={{ width: 7, height: 7, background: ST.brick, display: 'inline-block' }} />
            REC · 00:00 / 00:42
          </div>
        </Reveal>
      </div>

      {/* spec strip across the bottom */}
      <Reveal delay={520} style={{
        marginTop: 0,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: `1.5px solid ${ST.ink}`,
        borderBottom: `1.5px solid ${ST.ink}`,
        background: ST.paper,
      }}>
        {[
          { v: '9′',     k: 'Vaulted ceilings' },
          { v: '540 ft²',k: 'Per door' },
          { v: '100%',   k: 'Electric · solar' },
          { v: '12 wk',  k: 'Order to occupancy' },
        ].map((s, i) => (
          <div key={i} style={{ padding: '22px 24px', borderRight: i < 3 ? `1px solid ${ST.hair}` : 'none' }}>
            <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.022em', color: ST.ink, fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
            <div style={{ fontSize: 10.5, color: ST.mute, marginTop: 8, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>{s.k}</div>
          </div>
        ))}
      </Reveal>
    </section>
  );
}

/* ----- PROPOSITION ----- */
function StdProposition() {
  return (
    <section style={{ background: ST.paper, color: ST.ink, padding: '110px 56px' }}>
      <Reveal><StdPlateLabel n="02" label="The case" /></Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'flex-start', marginTop: 32 }}>
        <Reveal as="h2" delay={100} style={{ margin: 0, fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 600, letterSpacing: '-0.032em', lineHeight: 0.98, maxWidth: '14ch' }}>
          Mass-market <span style={{ color: ST.brick }}>luxury,</span> at a per-door cost that pencils.
        </Reveal>
        <div>
          <Reveal delay={220} style={{ fontSize: 17, lineHeight: 1.65, color: ST.ink2, maxWidth: '46ch' }}>
            Wood-frame multifamily is a hundred-year-old technology that costs
            $350K per door, takes 30 months, and lasts 40 years.
          </Reveal>
          <Reveal delay={320} style={{ fontSize: 17, lineHeight: 1.65, color: ST.ink2, maxWidth: '46ch', marginTop: 22 }}>
            Calypsos replaces it with a sealed steel chassis built on an
            automotive line. One product, one price, one timeline —
            repeated to scale. The same home, every door.
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ----- ECONOMICS (four-up plate grid) ----- */
function StdEconomics() {
  const stats = [
    { v: 148,  prefix: '$', suffix: 'K', k: 'All-in cost per door',  s: 'chassis · finishes · MEP · smart stack' },
    { v: 1850, prefix: '$', suffix: '/mo', k: 'Achievable rent',     s: 'Hoboken, NJ comp set · audited' },
    { v: 12,   suffix: 'wk', k: 'Order to occupancy',                s: '8 wk factory · 1 wk install · 3 wk finish' },
    { v: 12.4, suffix: '%', k: 'Unlevered yield',                    s: 'pro-forma · year 3 stabilised', decimals: 1, accent: true },
  ];
  return (
    <section style={{ background: ST.bg, color: ST.ink, padding: '110px 56px' }}>
      <Reveal><StdPlateLabel n="03" label="The unit economics" color={ST.brick} /></Reveal>
      <Reveal as="h2" delay={80} style={{ margin: '24px 0 56px', fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1, maxWidth: '18ch' }}>
        The same numbers in every market.
      </Reveal>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: `1.5px solid ${ST.ink}`,
        borderBottom: `1.5px solid ${ST.ink}`,
      }}>
        {stats.map((s, i) => (
          <Reveal key={i} delay={i * 100} style={{
            padding: '32px 24px 28px',
            borderRight: i < 3 ? `1px solid ${ST.hair}` : 'none',
            background: i === 3 ? ST.paper : 'transparent',
            transition: 'background 0.3s',
          }}>
            <div style={{
              fontSize: 'clamp(48px, 5vw, 64px)',
              fontWeight: 600, letterSpacing: '-0.032em', lineHeight: 1,
              color: s.accent ? ST.brick : ST.ink,
              fontVariantNumeric: 'tabular-nums',
            }}>
              <CountUp to={s.v} prefix={s.prefix} suffix={s.suffix} decimals={s.decimals || 0} />
            </div>
            <div style={{ fontSize: 11, color: ST.ink, marginTop: 14, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>{s.k}</div>
            <div style={{ fontSize: 12.5, color: ST.mute, marginTop: 6, lineHeight: 1.55 }}>{s.s}</div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={500} style={{
        marginTop: 18, fontSize: 11, color: ST.mute,
        letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>Source · Vessel internal · Q1 2026 · audited by RSM</span>
        <span style={{ color: ST.brick, cursor: 'pointer' }}>View pro-forma →</span>
      </Reveal>
    </section>
  );
}

Object.assign(window, { ST, StdPlateLabel, StdNav, StdHero, StdProposition, StdEconomics });