// ============================================================
// BVS — Home
// ============================================================
function Hero({ onNav }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="dotgrid" style={{ background: PAPER, position: 'relative', overflow: 'hidden', padding: '76px 0 68px' }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <Eyebrow className="reveal" slash={false} style={{ color: 'rgba(10,10,10,0.45)', letterSpacing: '0.28em' }}>bleu venture studios</Eyebrow>
        <h1 className="reveal h-disp" style={{ fontSize: 'clamp(36px,5vw,72px)', lineHeight: 1.02, marginTop: 16, maxWidth: 900, ...delay(1) }}>
          We <span style={{ color: BLUE }}>globalize</span> you and re-engineer you for the future.
        </h1>
        <p className="reveal" style={{ fontSize: 'clamp(16px,1.3vw,19px)', fontWeight: 500, lineHeight: 1.5, color: 'rgba(10,10,10,0.62)', maxWidth: 600, marginTop: 22, ...delay(2) }}>
          One studio. Three engines — <strong style={{ color: INK }}>AI growth systems</strong>, an owned <strong style={{ color: INK }}>venture portfolio</strong>, and a full <strong style={{ color: INK }}>media department</strong>.
        </p>
        <div className="reveal" style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap', ...delay(3) }}>
          <Button kind="blue" onClick={() => onNav('contact')} arrow>Book a Discovery Call</Button>
          <Button kind="ghost-b" onClick={() => onNav('work')}>View Our Work</Button>
        </div>
      </div>
    </section>
  );
}

// ---- clickable AI / Media split ----
function TwoWorlds({ onNav }) {
  const [hover, setHover] = useState(null);
  const panels = [
    { id: 'solutions', kind: 'AI & Systems', mark: 'BVS', title: 'We build the systems', sub: 'ai growth solutions',
      desc: 'AI agents, operating systems, dashboards and decision engines — plus an owned venture portfolio. Lower costs, higher output, faster growth.',
      tags: ['AI & Voice Agents', 'Custom TMS / WMS / HRMS', 'Venture Portfolio'], bg: BLUE, fg: '#fff' },
    { id: 'media', kind: 'Media · BMG', mark: 'BMG', title: 'We make you the brand', sub: 'all you do is film',
      desc: 'Bleu Media Group is your full media department — strategy, production, editing and mass distribution. 3.2B+ views and counting.',
      tags: ['Pre-Production', 'Post-Production', 'Distribution'], bg: INK, fg: '#fff' },
  ];
  return (
    <section style={{ background: '#000' }}>
      <div className="wrap" style={{ paddingTop: 64, paddingBottom: 32 }}>
        <Eyebrow onBlue style={{ color: 'rgba(255,255,255,0.55)' }}>two engines, one studio</Eyebrow>
        <h2 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(26px,3.4vw,44px)', marginTop: 14, maxWidth: 1000 }}>Choose your side of the build<span style={{ color: 'rgba(255,255,255,0.4)' }}>.</span></h2>
      </div>
      <div className="two" style={{ display: 'flex', minHeight: 'min(460px, 62vh)' }}>
        {panels.map((p) => {
          const grow = hover === p.id ? 1.35 : hover ? 0.65 : 1;
          return (
            <div key={p.id} className="split-panel" onMouseEnter={() => setHover(p.id)} onMouseLeave={() => setHover(null)} onClick={() => onNav(p.id)}
              style={{ flex: grow, background: p.bg, color: p.fg, position: 'relative', overflow: 'hidden', cursor: 'pointer', borderLeft: p.id === 'media' ? '1px solid rgba(255,255,255,0.14)' : 'none', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 'clamp(36px,4vw,56px)' }}>
              <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
                <VMark size={18} color="#fff" />
                <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.8 }}>{p.kind}</span>
              </div>
              <div style={{ position: 'relative' }}>
                <div className="mono" style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>{p.sub}</div>
                <h3 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(24px,2.8vw,38px)', lineHeight: 1.04, marginBottom: 16 }}>{p.title}<span style={{ color: 'rgba(255,255,255,0.45)' }}>.</span></h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.5, maxWidth: 440, color: 'rgba(255,255,255,0.78)', margin: '0 0 22px', fontWeight: 500 }}>{p.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 26 }}>
                  {p.tags.map((t) => <Chip key={t} tone="onblue">{t}</Chip>)}
                </div>
                <span className="btn btn-ghost-w" style={{ pointerEvents: 'none' }}>Enter {p.id === 'solutions' ? 'AI & Systems' : 'Media'} <span className="arr">→</span></span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---- combined metric strip (AI track record + media reach) ----
function MetricStrip() {
  const ref = useReveal();
  const groups = [
    { head: 'ai & systems', tone: BLUE, stats: [['5+', 'AI & SaaS systems shipped'], ['5', 'industries served'], ['24/7', 'AI communication coverage']] },
    { head: 'media · bmg', tone: INK, stats: [['3.2B+', 'total views generated'], ['$10M+', 'generated for clients'], ['9M+', 'followers managed']] },
  ];
  return (
    <section ref={ref} style={{ background: PAPER, padding: '64px 0' }}>
      <div className="wrap">
        <div className="metric-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
          {groups.map((g, gi) => (
            <div key={g.head} className="reveal" style={delay(gi)}>
              <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: g.tone, marginBottom: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 26, height: 2, background: g.tone }} />{g.head}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
                {g.stats.map(([n, l], i) => (
                  <div key={i} style={{ borderTop: '1px solid var(--bvs-line)', paddingTop: 16 }}>
                    <div className="h-disp" style={{ fontSize: 'clamp(30px,3vw,46px)', color: gi === 0 ? BLUE : INK }}>{n}</div>
                    <div style={{ fontSize: 13, color: 'rgba(10,10,10,0.6)', marginTop: 10, lineHeight: 1.4, fontWeight: 500 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- what we build (capabilities) ----
function Capabilities({ onNav }) {
  const ref = useReveal();
  const rows = [
    ['AI Agents & Voice', 'WhatsApp, web, voice and email agents that qualify, schedule and route — with policy-aligned human hand-off.'],
    ['Operating Systems', 'Ground-up TMS, WMS, HRMS and internal tooling — audit-ready, tenant-aware, built around how your team works.'],
    ['Venture Portfolio', 'We don’t just build for clients — we own equity. LicenseOS, BLEUX and a global healthcare-AI play.'],
    ['Media Department', 'Bleu Media Group runs the whole content engine: strategy, production, editing and mass distribution.'],
  ];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '76px 0' }}>
      <div className="wrap cap-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start' }}>
        <div className="reveal sticky-col">
          <Eyebrow>what we build</Eyebrow>
          <h2 className="h-disp" style={{ fontSize: 'clamp(28px,3vw,44px)', marginTop: 16, marginBottom: 18 }}>Systems and <span style={{ color: BLUE }}>stories</span>.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(10,10,10,0.62)', maxWidth: 360, marginBottom: 24, fontWeight: 500 }}>BVS goes beyond automation. We architect AI systems and produce category-defining media — end-to-end.</p>
          <Button kind="ghost-b" onClick={() => onNav('solutions')} arrow>Explore Capabilities</Button>
        </div>
        <div>
          {rows.map((r, i) => (
            <div key={r[0]} className="reveal hair" style={{ ...delay(i), padding: '26px 0', display: 'grid', gridTemplateColumns: '46px 1fr', gap: 24, alignItems: 'baseline' }}>
              <div className="mono" style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', color: BLUE }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="h-disp" style={{ fontSize: 'clamp(20px,2vw,27px)', marginBottom: 8 }}>{r[0]}</div>
                <div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(10,10,10,0.6)', maxWidth: 580, fontWeight: 500 }}>{r[1]}</div>
              </div>
            </div>
          ))}
          <div className="hair" />
        </div>
      </div>
    </section>
  );
}

function Home({ onNav }) {
  return (
    <div className="page-enter">
      <Hero onNav={onNav} />
      <TwoWorlds onNav={onNav} />
      <MetricStrip />
      <Capabilities onNav={onNav} />
      <CtaBand onNav={onNav} />
    </div>
  );
}

Object.assign(window, { Home });