// Nav + three Hero variants

function Nav() {
  return (
    <nav className="v2-nav">
      <div className="v2-nav-inner">
        <a href="#" className="v2-brand">
          <span className="v2-brand-mark">P</span>
          <span className="v2-brand-text">Practical AI</span>
        </a>
        <div className="v2-nav-links">
          <a href="#services">Services</a>
          <a href="#cases">Case studies</a>
          <a href="#process">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-nav-cta">Book a free call</a>
        </div>
      </div>
    </nav>
  );
}

function Portrait({ variant = 'hero', showPortrait = true }) {
  if (!showPortrait) return null;
  return (
    <div className={variant === 'hero' ? 'v2-hero-portrait' : ''}>
      <div className={variant === 'hero' ? 'v2-portrait-frame' : 'v2-about-portrait'}>
        <img src="ollie-web.jpg" alt="Ollie Ayton" className="v2-portrait-img" loading="lazy" />
        {variant === 'hero' && (
          <>
            <div className="v2-portrait-badge v2-portrait-badge-1">
              <div><div className="n">50+</div><div className="l">execs coached</div></div>
            </div>
            <div className="v2-portrait-badge v2-portrait-badge-2">
              <div><div className="n">4.9/5</div><div className="l">avg rating</div></div>
            </div>
            <div className="v2-portrait-badge v2-portrait-badge-3">
              <div><div className="n">~10hrs</div><div className="l">saved / mo</div></div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function HeroTiles() {
  const tiles = [
    { bar: 'var(--v2-coral)', h: 'Product descriptions at scale', p: 'Hundreds of SKUs written in your brand voice, not copy-paste.' },
    { bar: 'var(--brown)', h: 'Email flows that convert', p: 'Welcome sequences, Klaviyo flows, follow-ups, drafted in minutes.' },
    { bar: 'var(--accent-ochre)', h: 'Reports on autopilot', p: 'Weekly dashboards, investor updates, board packs. No more copy-pasting.' },
    { bar: 'var(--accent-sage)', h: 'Social content sorted', p: 'A month of LinkedIn and Instagram posts from one brief.' },
  ];
  return (
    <div className="v2-hero-tiles-wrap">
      <div className="v2-hero-tiles-circle"></div>
      <div className="v2-hero-tiles-track">
        {tiles.map((t, i) => (
          <div className="v2-hero-tile" key={i}>
            <div className="v2-hero-tile-bar" style={{background: t.bar}}></div>
            <h4>{t.h}</h4>
            <p>{t.p}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroA() {
  return (
    <section className="v2-hero v2-hero-a">
      <div className="v2-container">
        <div className="v2-hero-grid">
          <div className="v2-hero-text v2-reveal">
            <div className="v2-eyebrow-pill">Hands-on AI coaching · London</div>
            <h1>Stop reading about AI.<br/><em>Start using it.</em></h1>
            <p className="v2-hero-lede">You know AI matters. You just don't know where to start. We'll fix that in an afternoon, with tools built around your actual work.</p>
            <div className="v2-hero-ctas">
              <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-primary">Book a free call <span className="arr">→</span></a>
              <a href="#process" className="v2-btn v2-btn-ghost">See how it works</a>
            </div>
            <div className="v2-hero-meta">
              <div className="v2-hero-meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                Max 5 per session
              </div>
              <div className="v2-hero-meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                In-person in London
              </div>
              <div className="v2-hero-meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                2 weeks follow-up
              </div>
            </div>
          </div>
          <HeroTiles />
        </div>
      </div>
    </section>
  );
}

function HeroB() {
  return (
    <section className="v2-hero v2-hero-b">
      <div className="v2-container">
        <div className="v2-hero-eyebrow">
          <div className="v2-eyebrow-pill">Hands-on AI coaching · London</div>
        </div>
        <h1 className="v2-reveal">
          Stop reading
          <em>about AI.</em>
        </h1>
        <div className="v2-hero-sub-wrap v2-reveal">
          <p className="v2-hero-lede">You know AI matters. You just don't know where to start. We'll fix that in an afternoon, with tools built around <em>your</em> actual work.</p>
          <div className="v2-hero-ctas">
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-primary">Book a free call <span className="arr">→</span></a>
            <a href="#process" className="v2-btn v2-btn-ghost">See how it works</a>
          </div>
          <div className="v2-proof-strip">
            <div className="v2-proof-strip-item"><strong>50+</strong> execs coached</div>
            <div className="v2-proof-strip-item"><strong>~10 hrs/mo</strong> saved on avg.</div>
            <div className="v2-proof-strip-item"><strong>4.9/5</strong> avg rating</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  return (
    <section className="v2-hero v2-hero-c">
      <div className="v2-container">
        <div className="v2-hero-grid">
          <div className="v2-hero-text v2-reveal">
            <div className="v2-eyebrow-pill">Trusted by 50+ founders &amp; MDs</div>
            <h1>Stop reading about AI.<br/><em>Start using it.</em></h1>
            <p className="v2-hero-lede">Hands-on sessions for founders and senior teams who want to actually use AI, not read another think-piece about it.</p>
            <div className="v2-hero-ctas">
              <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-primary">Book a free call <span className="arr">→</span></a>
              <a href="#process" className="v2-btn v2-btn-ghost">How it works</a>
            </div>
          </div>
          <div className="v2-hero-proofs">
            <div className="v2-proof-card">
              <div className="stars">★★★★★</div>
              <blockquote>"Ollie changed the way we work in just half a day. The tools we use every day have completely changed."</blockquote>
              <cite><span className="v2-proof-avatar">AM</span><span><strong>Anna</strong>, Founder @ JUX Food</span></cite>
            </div>
            <div className="v2-proof-card">
              <div className="stars">★★★★★</div>
              <blockquote>"Practical, client-guided, hands-on. Gave me an appetite for more."</blockquote>
              <cite><span className="v2-proof-avatar">JF</span><span><strong>John F.</strong>, Chairman @ Natalma</span></cite>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, HeroA, HeroB, HeroC, Portrait });