// sections.jsx — Prospicio marketing site sections

// ── Wordmark ────────────────────────────────────────────────────────────────
function Wordmark({ size = 22, light = false }) {
  return (
    <span className="wordmark" style={{ fontSize: size, color: light ? 'var(--bone)' : 'inherit' }}>
      prospicio
    </span>);

}

// ── Reveal-on-scroll wrapper ────────────────────────────────────────────────
function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  const ref = React.useRef(null);
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) {setTimeout(() => setShow(true), delay);io.disconnect();}},
      { threshold: 0.15 }
    );
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [delay]);
  const Cmp = as;
  return (
    <Cmp ref={ref} className={`reveal ${show ? 'in' : ''} ${className}`} {...rest}>
      {children}
    </Cmp>);

}

// ── Eyebrow with bronze tick ────────────────────────────────────────────────
function Eyebrow({ children }) {
  return <div className="eyebrow"><span className="bronze"></span>{children}</div>;
}

// ── Mobile menu (shared between Nav variants) ───────────────────────────────
function MobileMenu({ items, signinHref = '#signin' }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const drawer =
  <div className={`mobile-menu${open ? ' open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
      <nav className="mobile-menu-list">
        {items.map((it) =>
      <a
        key={it.label}
        href={it.href}
        aria-current={it.current ? 'page' : undefined}
        onClick={() => setOpen(false)}>
            {it.label}
          </a>
      )}
      </nav>
      <a className="mobile-menu-signin" href={signinHref} onClick={() => setOpen(false)}>
        Sign in
        <svg width="12" height="10" viewBox="0 0 12 10" fill="none">
          <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>;

  return (
    <>
      <button
        className="nav-burger"
        aria-label={open ? 'Close menu' : 'Open menu'}
        aria-expanded={open}
        onClick={() => setOpen((v) => !v)}>
        <span className="bar"></span>
        <span className="bar"></span>
      </button>
      {typeof document !== 'undefined' && ReactDOM.createPortal(drawer, document.body)}
    </>);

}

// ── Nav ─────────────────────────────────────────────────────────────────────
function Nav() {
  const items = [
  { href: '#how', label: 'How it works' },
  { href: 'scenarios.html', label: 'Scenarios' },
  { href: '#opponent', label: 'The opponent' },
  { href: '#report', label: 'Feedback' },
  { href: 'pricing.html', label: 'Pricing' }];

  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#top" style={{ textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={22} />
        </a>
        <nav className="nav-links">
          {items.map((it) => <a key={it.label} href={it.href}>{it.label}</a>)}
        </nav>
        <div className="nav-cta">
          <a href="#signin" className="nav-signin">Sign in</a>
          <MobileMenu items={items} />
          <a href="#begin" className="btn">Begin
            <svg className="arrow" width="12" height="10" viewBox="0 0 12 10" fill="none">
              <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </header>);

}

// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ headline, sub }) {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div>
          <Eyebrow>Prospicere · to look ahead</Eyebrow>
          <h1 style={{ marginTop: 28, fontFamily: "\"Instrument Serif\"" }}>
            {headline === 'look-ahead' && <>Look <em style={{ fontFamily: "\"Instrument Serif\"" }}>ahead.</em></>}
            {headline === 'before' && <>The conversation <em>before</em><br />the conversation.</>}
            {headline === 'decide' && <>For the moments<br />that <em>decide.</em></>}
          </h1>
          <p className="lede">{sub}</p>
          <div className="hero-meta">
            <a href="#begin" className="btn">Start a free trial
              <svg className="arrow" width="12" height="10" viewBox="0 0 12 10" fill="none">
                <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <a href="#how" className="btn btn-ghost">How it works</a>
          </div>
          <div style={{ marginTop: 48, display: 'flex', gap: 32, alignItems: 'flex-start', maxWidth: 520, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span className="mono" style={{ color: 'var(--muted)' }}>Latency</span>
              <span className="body" style={{ fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '-0.01em' }}>&lt; 600 ms</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span className="mono" style={{ color: 'var(--muted)' }}>SCENARIOS</span>
              <span className="body" style={{ fontSize: 22, letterSpacing: '-0.01em', fontFamily: "\"Instrument Serif\"" }}>Four</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span className="mono" style={{ color: 'var(--muted)' }}>Recordings</span>
              <span className="body" style={{ fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '-0.01em' }}>Yours only</span>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="img-placeholder hero-img">
            <span className="caption">PHOTO · WOMAN AT HOTEL DESK · DUSK</span>
          </div>
          <div style={{
            position: 'absolute', bottom: -20, left: -20,
            background: 'var(--bg)', padding: '16px 18px',
            border: '0.5px solid var(--rule)', maxWidth: 280,
            display: 'flex', flexDirection: 'column', gap: 8
          }}>
            <span className="mono" style={{ color: 'var(--muted)' }}>Tonight · 9:42 PM</span>
            <span style={{ fontFamily: 'var(--display)', fontSize: 18, letterSpacing: '-0.01em' }}>
              Salary conversation. Tuesday.
            </span>
            <span className="body-small">Run it twice tonight.</span>
            <span className="load-line" style={{ marginTop: 4 }}></span>
          </div>
        </div>
      </div>
    </section>);

}

// ── Marquee ─────────────────────────────────────────────────────────────────
function Marquee() {
  const words = [
  'ahead', 'foresight', 'rehearse', 'prepare', 'stance', 'the moment',
  'the conversation', 'the pitch', 'the room', 'before', 'ready', 'sparring',
  'craft', 'practice', 'discipline', 'calibrate', 'clarity', 'pressure', 'posture'];

  const sep = <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>·</span>;
  const row =
  <>
      {words.map((w, i) =>
    <React.Fragment key={i}>
          <span>{w}</span>
          {sep}
        </React.Fragment>
    )}
    </>;

  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>);

}

// ── Editorial passage / The Problem ─────────────────────────────────────────
function Problem() {
  return (
    <section id="why">
      <div className="container">
        <div className="editorial-grid">
          <Reveal>
            <Eyebrow>The problem</Eyebrow>
            <h2 className="display-3" style={{ marginTop: 18, marginBottom: 0, fontFamily: 'var(--display)', fontWeight: 400 }}>
              Most people don't actually prepare. They <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>think</em> about it. Which is not the same thing.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lede" style={{ color: 'var(--muted)' }}>
              The pitch. The 1‑1 about the raise. The conversation where you have to let someone go. The interview at 9 AM. They arrive whether you have rehearsed for them or not.
            </p>
            <p className="lede" style={{ color: 'var(--muted)', marginTop: 18 }}>
              Two thousand years ago, Cicero believed the orator's first duty was <em>prospicere</em> — to look ahead. We still face conversations that decide our careers. We still face them mostly unprepared.
            </p>
            <p className="lede" style={{ color: 'var(--fg)', marginTop: 28 }}>
              <strong style={{ fontWeight: 600, fontFamily: "\"Instrument Serif\"" }}><span style={{ color: '#b8864b' }}><span style={{ color: '#0b0b0f', fontSize: "25px" }}><span style={{ color: '#b8864b', fontSize: "25px" }}>prospicio</span> fixes that.</span></span></strong>
            </p>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ── Scenarios ───────────────────────────────────────────────────────────────
function Scenarios() {
  const items = [
  {
    n: '01',
    title: 'The first‑round interview.',
    desc: 'The recruiter screen, the hiring manager call, the panel. Calibrated to your role, your level, and the specific company across the table.',
    meta: '45 — 60 MIN'
  },
  {
    n: '02',
    title: 'The salary conversation.',
    desc: 'You have a number. You have a reason. Walk in having said both out loud, against pushback, fifteen times. Tuesday won\'t be the first time.',
    meta: '20 — 35 MIN'
  },
  {
    n: '03',
    title: 'The pitch.',
    desc: 'Twelve minutes to a room of investors, executives, or your board. Every objection rehearsed. Every silence held. The Q&A you were dreading, in private.',
    meta: '30 — 45 MIN'
  },
  {
    n: '04',
    title: 'The hard 1‑1.',
    desc: 'Performance. Feedback. The conversation where you have to let someone go. The sentences you need to say cleanly, the first time, without flinching.',
    meta: '20 — 30 MIN'
  }];

  return (
    <section id="scenarios" className="scenarios">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Four scenarios at launch</Eyebrow>
          <h2 className="display-2" style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 400 }}>
            Name the moment.<br />We'll put you across the table from it.
          </h2>
          <p className="lede" style={{ marginTop: 8 }}>
            Specific over abstract. Every scenario calibrated to your role, your level, and the conversation actually on your calendar.
          </p>
        </div>
        <div className="scenario-list">
          {items.map((s) =>
          <Reveal key={s.n} delay={60} as="div" className="scenario">
              <div className="scenario-num">{s.n}</div>
              <div className="scenario-title">{s.title}</div>
              <div className="scenario-desc">{s.desc}</div>
              <div className="scenario-meta">{s.meta}</div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ── How it works ────────────────────────────────────────────────────────────
function How() {
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <Eyebrow>How it works</Eyebrow>
          <h2 className="display-2" style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 400 }}>
            Four steps. <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>One discipline.</em>
          </h2>
        </div>
        <div className="steps">
          <Reveal as="div" className="step">
            <div className="step-num">01</div>
            <h3>Pick the scenario.</h3>
            <p>Tell us what's on your calendar — the company, the role, the conversation. We calibrate the opponent to the room.</p>
          </Reveal>
          <Reveal delay={120} as="div" className="step">
            <div className="step-num">02</div>
            <h3>Run the conversation.</h3>
            <p>Voice in, voice back, under 600 ms. A worthy opponent who pushes back, holds silence, notices when you flinch. Private by default.</p>
          </Reveal>
          <Reveal delay={240} as="div" className="step">
            <div className="step-num">03</div>
            <h3>Read the report.</h3>
            <p>Not a score. The specific moments worth re‑watching, what went wrong, why, and what to do differently next time.</p>
          </Reveal>
          <Reveal delay={360} as="div" className="step">
            <div className="step-num">04</div>
            <h3>Get better.</h3>
            <p>Learn from your mistakes. Train your brain to engage effectively. Get course recommendations based on your areas of improvement.</p>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ── The Opponent ────────────────────────────────────────────────────────────
function Opponent() {
  return (
    <section id="opponent" className="opponent" data-theme="dark">
      <div className="container">
        <div className="opponent-grid">
          <div>
            <Eyebrow>A worthy opponent</Eyebrow>
            <h2 className="display-2" style={{ margin: '18px 0 0', fontFamily: 'var(--display)', fontWeight: 400, color: 'var(--bone)' }}>
              <span style={{ color: '#b8864b' }}>The rarest gift in professional development.</span>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              You cannot improve at a difficult conversation by reading about it. You need someone across the table who pushes back, who notices when you flinch, who doesn't let you off easy.
            </p>
            <p className="lede" style={{ marginTop: 16, color: 'rgba(244,241,234,0.6)' }}>
              Most people in your life are too kind, too busy, or too invested in your comfort to be that opponent. We are not.
            </p>
            <ul>
              <li>Calibrated to your role, level, and the company on the other side of the table.</li>
              <li>Holds silence after a hard question. Doesn't fill the gap for you.</li>
              <li>Notices a hedge, a softened ask, a buried lede. Names it once. Asks again.</li>
              <li>Pushes back without being cruel. Pressure without theatre.</li>
            </ul>
          </div>
          <div className="avatar-card">
            <div className="avatar-tag">
              <span className="dot"></span>
              <span>Live · 02:14</span>
            </div>
            <div className="avatar-portrait"></div>
            <div className="avatar-meta">
              <span className="mono" style={{ color: 'rgba(244,241,234,0.45)' }}>Opponent</span>
              <span className="avatar-name">David Ostrow</span>
              <span className="avatar-role">VP Eng · Tech · Skeptical, fair, slow to praise.</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Feedback report preview ─────────────────────────────────────────────────
function Report() {
  return (
    <section id="report">
      <div className="container">
        <div className="report">
          <div>
            <Eyebrow>The feedback</Eyebrow>
            <h2 className="display-2" style={{ margin: '18px 0 0', fontFamily: 'var(--display)', fontWeight: 400 }}>
              A mirror clear enough to <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>show you exactly what happened.</em>
            </h2>
            <p className="lede" style={{ marginTop: 24, color: 'var(--muted)' }}>
              Feedback that doesn't change behavior is entertainment. We identify the specific moment, name what went wrong, explain why, and tell you what to do next time.
            </p>
            <div className="quote" style={{ marginTop: 36 }}>
              There is a particular kind of silence in the seconds after a hard question. Most people fill it badly. We can fix that.
              <span className="attr">From the field journal · Issue 03</span>
            </div>
          </div>
          <div className="report-card">
            <div className="report-card-head">
              <div>
                <div className="label">Session report · 11 May 2026</div>
                <h4>Salary · Senior PM · Series B</h4>
              </div>
              <div className="report-score">
                72<span className="max">/100</span>
              </div>
            </div>
            <div className="report-rows">
              <div className="report-row crit">
                <span className="ts">02:14</span>
                <span>Softened the ask. You said "around" before the number.</span>
                <span className="badge">Critical</span>
              </div>
              <div className="report-row warn">
                <span className="ts">04:08</span>
                <span>Filled a 2.3s silence. The pause was working for you.</span>
                <span className="badge">Watch</span>
              </div>
              <div className="report-row warn">
                <span className="ts">07:42</span>
                <span>Anchored on what they offered, not what you asked.</span>
                <span className="badge">Watch</span>
              </div>
              <div className="report-row ok">
                <span className="ts">09:01</span>
                <span>Named the alternative cleanly. Held the line.</span>
                <span className="badge">Strong</span>
              </div>
              <div className="report-row ok">
                <span className="ts">11:38</span>
                <span>Closed without thanking them for considering you.</span>
                <span className="badge">Strong</span>
              </div>
            </div>
            <div className="report-card-foot">
              <span>3 moments to re‑watch</span>
              <span>Run again →</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Pricing ────────────────────────────────────────────────────────────────
function Pricing() {
  const tiers = [
  {
    name: 'Trial',
    price: '$0',
    per: 'first session free',
    desc: 'A full session, end to end. Pick a scenario, run it, read the report. No card required.',
    list: ['One 30-minute session', 'Full feedback report', 'All four scenarios'],
    cta: 'Begin a session',
    featured: false
  },
  {
    name: 'Pro',
    price: '$79',
    per: 'per month',
    desc: 'For the professional with a conversation coming up that matters. The default tier.',
    list: ['275 session minutes per month', 'All scenarios', 'Re-watch any moment', 'Private by default'],
    cta: 'Start Pro',
    featured: true
  },
  {
    name: 'Elite',
    price: '$199',
    per: 'per month',
    desc: 'For founders, recruiters, leadership programs. Shared scenarios and roll-up reporting.',
    list: ['Unlimited session minutes', 'Custom scenario authoring', 'SSO · SOC 2', 'A named partner at Prospicio'],
    cta: 'Go Elite',
    featured: false
  }];

  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Pricing</Eyebrow>
          <h2 className="display-2" style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 400 }}>
            Direct. Three tiers.
          </h2>
          <p className="lede" style={{ marginTop: 8 }}>Transparent pricing. Cancel anytime.
Try a 5-minute session for free.
</p>
        </div>
        <div className="pricing-grid">
          {tiers.map((t) => <div key={t.name} className={t.featured ? 'tier tier-featured' : 'tier'}>
              {t.featured && <span className="tier-flag">Most chosen</span>}
              <span className="tier-name">{t.name}</span>
              <span className="tier-price">{t.price}<span className="per">{t.per}</span></span>
              <p className="tier-desc">{t.desc}</p>
              <ul className="tier-list">
                {t.list.map((l) => <li key={l}>{l}</li>)}
              </ul>
              <div className="tier-cta">
                <a href="#" className={t.featured ? 'btn' : 'btn btn-ghost'} style={{ width: '100%', justifyContent: 'center' }}>
                  {t.cta}
                  <svg className="arrow" width="12" height="10" viewBox="0 0 12 10" fill="none">
                    <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
              </div>
            </div>)}
        </div>
      </div>
    </section>);

}

// ── Beliefs ────────────────────────────────────────────────────────────────
function Beliefs() {
  const beliefs = [
  {
    n: '01',
    h: 'Foresight is a skill, not a personality trait.',
    p: 'The Stoics knew this. The Romans knew this. The best modern operators know this. Some people have just rehearsed more.'
  },
  {
    n: '02',
    h: 'Privacy is a precondition for practice.',
    p: 'Real practice requires the freedom to fail. Sessions are private by default; training-data opt-in, never opt-out.'
  },
  {
    n: '03',
    h: 'Feedback that doesn\'t change behavior is entertainment.',
    p: 'A score is not feedback. A long report is not feedback. We name the moment, the cause, and the next move. That is the job.'
  },
  {
    n: '04',
    h: 'The user is a professional, not a "user."',
    p: 'No badges. No streaks. No 🎉 emails. The way a good Swiss watchmaker treats their clients — as adults pursuing a craft.'
  }];

  return (
    <section id="beliefs" className="beliefs">
      <div className="container">
        <div className="section-head">
          <Eyebrow>What we believe</Eyebrow>
          <h2 className="display-2" style={{ margin: 0, fontFamily: 'var(--display)', fontWeight: 400 }}>
            Convictions, not features.
          </h2>
          <p className="lede" style={{ marginTop: 8 }}>Reviewed quarterly. Printed in every onboarding pack.</p>
        </div>
      </div>
      <div className="container" style={{ padding: 0 }}>
        <div className="beliefs-grid">
          {beliefs.map((b) =>
          <Reveal key={b.n} as="div" className="belief">
              <span className="belief-num">{b.n}</span>
              <h4>{b.h}</h4>
              <p>{b.p}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ── Closing ─────────────────────────────────────────────────────────────────
function Closing() {
  return (
    <section className="closing" id="begin">
      <div className="container">
        <Eyebrow>Begin</Eyebrow>
        <h2 style={{ marginTop: 28 }}>Look <em>ahead.</em></h2>
        <p className="lede">Your first session is free. Most people start with the salary conversation — it's the one with the clearest stakes.</p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#" className="btn">Start a free trial
            <svg className="arrow" width="12" height="10" viewBox="0 0 12 10" fill="none">
              <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#scenarios" className="btn btn-ghost">See the scenarios</a>
        </div>
      </div>
    </section>);

}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-brand">
          <Wordmark size={28} light />
          <p>The rehearsal before the moment that decides. From the Latin <em>prospicere</em> — to look ahead.</p>
        </div>
        <div className="foot-col">
          <h5>Product</h5>
          <ul>
            <li><a href="#how">How it works</a></li>
            <li><a href="scenarios.html">Scenarios</a></li>
            <li><a href="#opponent">The opponent</a></li>
            <li><a href="#report">Feedback</a></li>
            <li><a href="pricing.html">Pricing</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Writing</h5>
          <ul>
            <li><a href="#">The field journal</a></li>
            <li><a href="#">On Cicero</a></li>
            <li><a href="#">The silence after a hard question</a></li>
            <li><a href="#">Why a worthy opponent</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Beliefs</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="mailto:help@prospicio.ai">help@prospicio.ai</a></li>
          </ul>
        </div>
      </div>
      <div className="container">
        <div className="foot-bottom">
          <span>© 2026 Prospicio · v1.0</span>
          <span>Bone · Ink · Forum Bronze</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Wordmark, Reveal, Eyebrow, MobileMenu, Nav, Hero, Marquee,
  Problem, Scenarios, How, Opponent, Report,
  Pricing, Beliefs, Closing, Footer
});