// jsx/Console.jsx: the Console product page. Namespace: cp- (never hp-/ch-:
// this page is the home for the nine-chapter tour Tour.jsx already defines,
// so it loads TopNav, Glyphs, Tour, Console and Footer only). Composition:
// TopNav -> ConsoleHero -> the nine tour chapters (talk, channels, inbox,
// projects, workforce, memory, nebula, process, cost) -> ConsoleCta ->
// Footer. The hero sits in the register of the homepage hero (same display
// scale, same two-line headline shape, same trailing magenta dot) but is
// its own cp- CSS: the chapters below are the show, this page just opens
// the door to them.

// ── hero ─────────────────────────────────────────────────────────────────
function ConsoleHero() {
  return (
    <header className="section cp-hero" id="top">
      <div className="shell">
        <p className="chapter-mark ch-rev">The Zarco Console</p>
        <h1 className="cp-h1 ch-rev">
          <span className="cp-line">The employee you have</span>
          <span className="cp-line">been trying to hire<span className="cp-dot">.</span></span>
        </h1>
        <div className="cp-hero-row ch-rev">
          <p className="cp-hero-sub">The Console is Zarco's own platform: an AI executive assistant for your business, with specialist agents behind it. We set it up around your company, connect your tools and manage it while it works. Talk to it, hand it real work, and anything that matters waits for your approval.</p>
          <div className="cp-hero-ctas">
            <a className="btn btn-primary" href="index.html#contact">Discuss a project</a>
            <a className="btn btn-ghost" href="#process">How we get you live</a>
          </div>
        </div>
      </div>
    </header>
  );
}

// ── closing CTA: a quiet paper band between the last chapter and the
// footer, the same register as UseCases.jsx's crosslinks strip. No dark
// panel here: the nine chapters above already made the case with proof, so
// this band just points at the next real step. ─────────────────────────
function ConsoleCta() {
  return (
    <section className="section cp-cta ch-rev">
      <div className="shell cp-cta-inner">
        <h2 className="h2 cp-cta-title">See it around your own workflows.</h2>
        <p className="cp-cta-sub">Thirty minutes with the person who built it. We will walk the Console through work like yours, not a canned demo.</p>
        <a className="btn btn-primary" href="index.html#contact">Discuss a project</a>
      </div>
    </section>
  );
}

function ConsolePage() {
  React.useEffect(() => window.initRevealObserver(), []);
  return (
    <div className="console-page">
      <TopNav current="console" />
      <ConsoleHero />
      <ChTalk /><ChChannels /><ChInbox /><ChProjects />
      <ChWorkforce /><ChMemory /><ChNebula /><ChProcess /><ChCost />
      <ConsoleCta />
      <Footer />
    </div>
  );
}

const consoleCss = `
/* ── hero: paper, under the fixed nav, matching the homepage hero's
   display scale (App.jsx .hp-h1/.hp-hero-row) so it genuinely reads as
   the same register. Only the section padding below is this page's own,
   since the chapters that follow are the show, not this hero. ── */
.cp-hero { padding-top: clamp(64px, 10vh, 116px); padding-bottom: clamp(48px, 7vh, 80px); border-bottom: none; }
.cp-h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(52px, 7.4vw, 96px); line-height: .98; letter-spacing: -.03em;
  margin: 18px 0 0; max-width: 14ch;
}
.cp-line { display: block; }
.cp-dot { color: var(--magenta); }
.cp-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; margin-top: 36px; flex-wrap: wrap;
}
.cp-hero-sub { max-width: 46ch; color: var(--ink-60); font-size: 18px; line-height: 1.55; margin: 0; }
.cp-hero-ctas { display: flex; align-items: center; gap: 22px; padding-bottom: 4px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cp-h1 { max-width: none; }
  .cp-hero-row { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ── closing CTA band ── */
.cp-cta { background: var(--ink-04); border-bottom: none; text-align: center; padding-top: clamp(72px, 10vh, 116px); padding-bottom: clamp(72px, 10vh, 116px); }
.cp-cta-inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cp-cta-title { margin: 0; }
.cp-cta-sub { margin: 0; max-width: 50ch; color: var(--ink-60); font-size: 17px; line-height: 1.55; }
`;

window.ConsolePage = ConsolePage;
window.ConsoleHero = ConsoleHero;
window.ConsoleCta = ConsoleCta;
window.consoleCss = consoleCss;