// About, Process, Pricing, FAQ, Final CTA, Footer, App shell, Tweaks

function About({ showPortrait }) {
  return (
    <section className="v2-about">
      <div className="v2-container">
        <div className="v2-about-grid v2-reveal">
          {showPortrait ? (
            <div className="v2-about-portrait">
              <img src="ollie-web.jpg" alt="Ollie Ayton" className="v2-portrait-img" loading="lazy" />
            </div>
          ) : <div />}
          <div className="v2-about-body">
            <div className="v2-section-eyebrow">Who's coaching you</div>
            <h2>I'm <em>Ollie.</em></h2>
            <div className="v2-about-role">Founder @ Practical AI · Based in London</div>
            <p>I studied Data Analytics &amp; Management at London Business School, then spent years leading product at companies like <strong>Deel</strong> and <strong>Kittl</strong>, building tools for thousands of users and managing engineering teams.</p>
            <p>Now I use AI every single day to build products, run my business, and help others do the same. I don't teach AI as a technology. I teach it as a way to solve business problems faster.</p>
            <div className="v2-about-pills">
              <span className="v2-about-pill">ex-Deel</span>
              <span className="v2-about-pill">ex-Kittl</span>
              <span className="v2-about-pill">LBS MSc</span>
              <span className="v2-about-pill">London</span>
            </div>
            <div className="v2-about-links">
              <a href="mailto:ollie@aytonlabs.io" className="v2-about-link">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></svg>
                ollie@aytonlabs.io
              </a>
              <a href="https://www.linkedin.com/in/oliverayton/" target="_blank" rel="noopener" className="v2-about-link">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><rect x="2" y="2" width="20" height="20" rx="3"/><path d="M6 9v9M6 6v.01M10 18v-5a3 3 0 0 1 6 0v5"/></svg>
                LinkedIn →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n:'1', label:'Step 1 · Free', h:'Discovery call', p:"30 minutes. We learn about your role, challenges and goals. You get a custom proposal with a tailored session agenda.", aside:'No obligation. No pitch deck. We figure out what success looks like for you.' },
    { n:'2', label:'Step 2', h:'4-hour hands-on session', p:'Small group (max 5) or 1:1. You build real AI tools on your laptop, using your own work. In-person where possible.', aside:"Zero slides about 'the history of machine learning.'" },
    { n:'3', label:'Step 3', h:'2 weeks of follow-up', p:'WhatsApp access for questions and troubleshooting as you put your new tools to work.', aside:'Most trainers skip this part. Support at your desk is where habits form.' },
  ];
  return (
    <section className="v2-process" id="process">
      <div className="v2-container">
        <div className="v2-section-head v2-reveal" style={{maxWidth:580, margin:'0 auto 56px', textAlign:'center'}}>
          <div className="v2-section-eyebrow">How it works</div>
          <h2 className="v2-section-title">Three steps. <em>The first one's free.</em></h2>
        </div>
        <div className="v2-process-rail v2-reveal">
          {steps.map(s => (
            <div className="v2-process-step" key={s.n}>
              <div className="v2-process-step-num">{s.n}</div>
              <div className="v2-process-step-body">
                <div className="v2-process-step-label">{s.label}</div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
                <div className="v2-process-aside">{s.aside}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="v2-pricing" id="pricing">
      <div className="v2-container">
        <div className="v2-section-head v2-reveal" style={{textAlign:'center',margin:'0 auto',maxWidth:600}}>
          <div className="v2-section-eyebrow">What it costs</div>
          <h2 className="v2-section-title">Transparent. <em>No games.</em></h2>
        </div>
        <div className="v2-pricing-grid v2-reveal">
          <div className="v2-price-card">
            <div className="v2-price-name">Discovery Call</div>
            <div className="v2-price-amount">Free</div>
            <div className="v2-price-note">30 minutes</div>
            <div className="v2-price-desc">We'll map where AI saves you the most time and recommend a next step, even if it's not us.</div>
            <ul className="v2-price-features"><li>Understand your role &amp; challenges</li><li>Identify quick AI wins</li><li>Custom session proposal</li><li>No obligation</li></ul>
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-dark" style={{justifyContent:'center'}}>Book a free call</a>
          </div>
          <div className="v2-price-card featured">
            <div className="v2-price-tag">Most popular</div>
            <div className="v2-price-name">AI Coaching</div>
            <div className="v2-price-amount">From £950</div>
            <div className="v2-price-note">per session</div>
            <div className="v2-price-desc">Hands-on session. Leave with a working AI toolkit built around your actual work.</div>
            <ul className="v2-price-features"><li>Personalised pre-work</li><li>4-hour hands-on session</li><li>Small group (max 5) or 1:1</li><li>Your AI toolkit to keep</li><li>2 weeks WhatsApp support</li><li>In-person where possible</li></ul>
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-primary" style={{justifyContent:'center'}}>Book a free call</a>
            <div className="v2-price-footnote">Group pricing varies by size and scope, agreed on the discovery call.</div>
          </div>
          <div className="v2-price-card">
            <div className="v2-price-name">Ongoing Advisory</div>
            <div className="v2-price-amount">From £500</div>
            <div className="v2-price-note">per month</div>
            <div className="v2-price-desc">We stay on as your AI partner: bespoke builds, system refinement, team onboarding.</div>
            <ul className="v2-price-features"><li>Custom AI system builds</li><li>Monthly strategy calls</li><li>Priority WhatsApp support</li><li>System refinement</li><li>New hire onboarding</li><li>Quarterly reviews</li></ul>
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-dark" style={{justifyContent:'center'}}>Book a free call</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const qs = [
    ['Do I need any technical background?', 'No. If you can use email, you have the skills you need. We start from business problems and work backwards to the right tools.'],
    ['How is this different from a Udemy course?', "Udemy is video content you watch alone. This is hands-on, in-person training. 70% of the time is spent working directly on your day-to-day workflows."],
    ['What if AI changes after my session?', "It will. That's why we teach principles, not button clicks. You'll learn to evaluate tools and build prompts: skills that compound."],
    ['Is it for individuals or teams?', 'Both. We run 1:1 sessions and small group sessions (max 5). Tailored to fit.'],
    ['Is the coaching really worth the investment?', "If you save 2 hours a week (most save 4+), that's 100+ hours a year. 10–20x ROI in year one."],
    ['Where do sessions take place?', "In-person across the UK (London base). Virtual also available. We'll sort format on the call."],
  ];
  return (
    <section className="v2-faq" id="faq">
      <div className="v2-container">
        <div className="v2-faq-grid v2-reveal">
          <div className="v2-faq-side">
            <div className="v2-section-eyebrow">Questions</div>
            <h2 className="v2-section-title">Most common, <em>answered honestly.</em></h2>
            <p>Still have questions? The discovery call is the right place. We'll answer anything in 30 minutes.</p>
          </div>
          <div className="v2-faq-list">
            {qs.map(([q, a], i) => (
              <details className="v2-faq-item" key={i} open={i === 0}>
                <summary className="v2-faq-q">{q}</summary>
                <div className="v2-faq-a">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="v2-cta" id="book">
      <div className="v2-container">
        <div className="v2-cta-inner v2-reveal">
          <div className="v2-section-eyebrow" style={{color:'var(--v2-coral)'}}>Let's talk</div>
          <h2>Where does AI save you the <em>most time?</em></h2>
          <p>Free 30-minute call. No pitch deck. We'll talk about your work and recommend a next step, even if it's not us.</p>
          <div className="v2-cta-actions">
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener" className="v2-btn v2-btn-primary">Book your free call <span className="arr">→</span></a>
            <a href="mailto:ollie@aytonlabs.io" className="v2-btn v2-btn-ghost" style={{color:'var(--cream)',borderColor:'rgba(250,243,235,.25)'}}>ollie@aytonlabs.io</a>
          </div>
          <div className="v2-cta-reassure">Replies within a working day · London-based · UK &amp; Europe</div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="v2-footer">
      <div className="v2-container">
        <div className="v2-footer-inner">
          <div>© 2026 Practical AI · Ayton Labs</div>
          <div className="v2-footer-links">
            <a href="mailto:ollie@aytonlabs.io">ollie@aytonlabs.io</a>
            <a href="https://www.linkedin.com/in/oliverayton/" target="_blank" rel="noopener">LinkedIn</a>
            <a href="https://calendar.app.google/cMtXkfs4oiZ7vcXk9" target="_blank" rel="noopener">Book a call</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   TWEAKS
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "a",
  "coralShade": "#E85D4A",
  "density": "standard",
  "showPortrait": true,
  "showLogoBar": true,
  "showGrain": false
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--v2-coral', t.coralShade);
  root.style.setProperty('--v2-density', t.density === 'compact' ? '0.7' : t.density === 'airy' ? '1.25' : '1');
  root.style.setProperty('--v2-grain', t.showGrain ? '0.35' : '0');
}

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    applyTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  const coralOpts = ['#E85D4A', '#D94B38', '#F2775F', '#C94128'];
  return (
    <div className="v2-tweaks">
      <div className="v2-tweaks-head">
        <h4>Tweaks</h4>
        <span className="dot"></span>
      </div>
      <div className="v2-tweaks-body">
        <div className="v2-tweak">
          <div className="v2-tweak-label">Hero variant</div>
          <div className="v2-tweak-row">
            {[['a','Editorial'],['b','Big type'],['c','Proof-first']].map(([v,l]) => (
              <button key={v} className={'v2-tweak-btn ' + (tweaks.heroVariant === v ? 'active' : '')} onClick={() => update('heroVariant', v)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="v2-tweak">
          <div className="v2-tweak-label">Coral shade</div>
          <div className="v2-tweak-row">
            {coralOpts.map(c => (
              <div key={c} className={'v2-tweak-swatch ' + (tweaks.coralShade === c ? 'active' : '')} style={{background:c}} onClick={() => update('coralShade', c)} />
            ))}
          </div>
        </div>
        <div className="v2-tweak">
          <div className="v2-tweak-label">Density</div>
          <div className="v2-tweak-row">
            {['compact','standard','airy'].map(d => (
              <button key={d} className={'v2-tweak-btn ' + (tweaks.density === d ? 'active' : '')} onClick={() => update('density', d)}>{d}</button>
            ))}
          </div>
        </div>
        <label className="v2-tweak-toggle">
          <input type="checkbox" checked={tweaks.showPortrait} onChange={e => update('showPortrait', e.target.checked)} />
          <span className="v2-toggle-visual"></span>
          <span>Show portrait</span>
        </label>
        <label className="v2-tweak-toggle">
          <input type="checkbox" checked={tweaks.showLogoBar} onChange={e => update('showLogoBar', e.target.checked)} />
          <span className="v2-toggle-visual"></span>
          <span>Show logo bar</span>
        </label>
        <label className="v2-tweak-toggle">
          <input type="checkbox" checked={tweaks.showGrain} onChange={e => update('showGrain', e.target.checked)} />
          <span className="v2-toggle-visual"></span>
          <span>Paper grain</span>
        </label>
      </div>
    </div>
  );
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(() => {
    applyTweaks(tweaks);
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');

    // Scroll reveal
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.v2-reveal').forEach(el => io.observe(el));
    return () => { window.removeEventListener('message', handler); io.disconnect(); };
  }, []);

  const Hero = tweaks.heroVariant === 'b' ? HeroB : tweaks.heroVariant === 'c' ? HeroC : HeroA;

  return (
    <>
      <Nav />
      <main>
        <Hero showPortrait={tweaks.showPortrait} />
        <LogoBar show={tweaks.showLogoBar} />
        <Qualifier />
        <Services />
        <CaseStudies />
        <Testimonials />
        <About showPortrait={tweaks.showPortrait} />
        <Process />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);