// Mid-page sections: logo bar, qualifier, services, cases, testimonials

const CLIENT_LOGOS = [
  { name: 'JUX', url: 'https://www.juxfood.com/' },
  { name: 'CBRE', url: 'https://www.cbre.co.uk/' },
  { name: 'Annoushka', url: null },
  { name: 'YTL Hotels', url: null },
  { name: 'Throxy', url: null },
  { name: 'DayJob.ai', url: 'https://www.getdayjob.ai/' },
  { name: 'Bold Bean Co', url: null },
  { name: 'Citizens of Soil', url: 'https://www.citizensofsoil.com/' },
  { name: 'CleanCap', url: 'https://www.cleancap.eu/' },
];

function LogoBar({ show }) {
  if (!show) return null;
  return (
    <section className="v2-logo-bar v2-reveal">
      <div className="v2-container">
        <div className="v2-logo-bar-label">A few of the founders and teams we've worked with</div>
        <div className="v2-logo-bar-track">
          {CLIENT_LOGOS.map(c => (
            c.url
              ? <a key={c.name} href={c.url} target="_blank" rel="noopener" className="v2-logo-item">{c.name}</a>
              : <span key={c.name} className="v2-logo-item">{c.name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Qualifier() {
  return (
    <section className="v2-qualifier">
      <div className="v2-container v2-reveal">
        <div className="v2-section-eyebrow">Who this is for</div>
        <h2>Built for people with <em>real work</em> to do.</h2>
        <p>We work with founders, MDs and senior operators who don't have time to read another 60-page AI report. If that's you, you're in the right place.</p>
        <div className="v2-qualifier-grid">
          <div className="v2-qualifier-col yes">
            <div className="v2-qualifier-col-label">A good fit if you're</div>
            <ul>
              <li><span><strong>A founder or MD</strong> who wants to use AI in your own day-to-day, not just delegate it down.</span></li>
              <li><span><strong>A senior operator</strong> drowning in email, reports, research, or briefs.</span></li>
              <li><span><strong>A small team</strong> (2–6 people) that wants to get on the same page, fast.</span></li>
              <li><span><strong>Curious but time-poor</strong>. You've tried ChatGPT a few times and nothing quite stuck.</span></li>
            </ul>
          </div>
          <div className="v2-qualifier-col no">
            <div className="v2-qualifier-col-label">Probably not for you if</div>
            <ul>
              <li><span>You want <strong>theory over practice</strong>. We spend 70% of the session on your actual workflows.</span></li>
              <li><span>You need <strong>enterprise rollout</strong> for 500+ people. Speak to a consultancy.</span></li>
              <li><span>You're looking for <strong>engineering talent</strong>. We're coaches, not builders.</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { n: '01', name: 'AI Coaching', desc: "Pick the right tools for your role. Learn prompt and context engineering. Spend 70% of the session on your actual work, not 'the history of machine learning.'", detail: <><strong>4 hours · max 5 or 1:1</strong>Custom agenda from your discovery call. Two weeks of WhatsApp support after.</> },
    { n: '02', name: 'Bespoke Systems', desc: 'Custom AI workflows for your business. Cowork environments, automations, document processing, CRM integrations. Systems that run without babysitting.', detail: <><strong>Scoped on the call</strong>We build, configure, train your team, hand it over.</> },
    { n: '03', name: 'Ongoing Retainer', desc: 'AI moves fast. We stay on as your advisor, refining systems, onboarding new hires, keeping you ahead of the curve.', detail: <><strong>From £500/mo</strong>Monthly calls, priority WhatsApp, quarterly reviews.</> },
  ];
  return (
    <section className="v2-services" id="services">
      <div className="v2-container">
        <div className="v2-section-head v2-reveal">
          <div className="v2-section-eyebrow">What we actually do</div>
          <h2 className="v2-section-title">Three ways we work <em>together.</em></h2>
          <p className="v2-section-lede">Every engagement starts with a free discovery call. No pitch deck, no obligation. We'll tell you straight if we're not the right fit.</p>
        </div>
        <div className="v2-services-list v2-reveal">
          {items.map(i => (
            <div className="v2-service-row" key={i.n}>
              <div className="v2-service-num">{i.n}</div>
              <div className="v2-service-name">{i.name}</div>
              <div className="v2-service-desc">{i.desc}</div>
              <div className="v2-service-detail">{i.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  const cases = [
    { logo: 'Baker McVeigh Equine Vet', head: 'Vet reports in minutes, not evenings.', body: "Vets were typing up inspections after sales, often late at night. We built a voice-to-report PWA that transcribes on-site and drafts the report before they leave the stable.", metrics: [['10x', 'faster reporting'], ['100%', 'offline-capable']], role: 'Founding Vet · Equine' },
    { logo: 'JUX Food', head: 'Half a day. 8 hours reclaimed every week.', body: 'Anna was rewriting product descriptions by hand. We built a brand-voice system in Claude that handles 50+ SKUs. She reviews, doesn\'t write.', metrics: [['8 hrs', 'saved / week'], ['50+', 'SKUs handled']], role: 'Founder · FMCG' },
    { logo: "Pack'd", head: 'Promo ROI in hours, not a quarter.', body: 'A year of Ocado promo data, no way to rank what paid back. A Cowork workflow now scores every phase by ROI, layers in COGS for true profit, and flagged one mechanic quietly destroying value.', metrics: [['13x', 'best mechanic ROI'], ['9', 'phases ranked']], role: 'CEO · Frozen FMCG' },
  ];
  return (
    <section className="v2-cases" id="cases">
      <div className="v2-container">
        <div className="v2-section-head v2-reveal">
          <div className="v2-section-eyebrow">Case studies</div>
          <h2 className="v2-section-title">Real outcomes, not <em>AI theatre.</em></h2>
          <p className="v2-section-lede">A few of the businesses we've worked with recently.</p>
        </div>
        <div className="v2-cases-grid v2-reveal">
          {cases.map((c, i) => (
            <div className="v2-case-card" key={i}>
              <div className="v2-case-logo">{c.logo}</div>
              <div className="v2-case-headline" dangerouslySetInnerHTML={{__html: c.head}} />
              <div className="v2-case-body">{c.body}</div>
              <div className="v2-case-meta">
                {c.metrics.map(([n, l]) => (
                  <div className="v2-case-meta-item" key={l}><div className="n">{n}</div><div className="l">{l}</div></div>
                ))}
              </div>
              <div className="v2-case-role">{c.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="v2-testimonials">
      <div className="v2-container">
        <div className="v2-section-head v2-reveal">
          <div className="v2-section-eyebrow" style={{color:'var(--v2-coral)'}}>What people say</div>
          <h2 className="v2-section-title">The words of <em>execs who got on with it.</em></h2>
        </div>
        <div className="v2-testimonials-grid v2-reveal">
          <div className="v2-testimonial-tile featured">
            <div>
              <div className="v2-testimonial-stars" style={{marginBottom:12}}>★★★★★</div>
              <blockquote>"There's how I worked before that session, and how I work after. It's the biggest shift I've ever made in such a short space of time."</blockquote>
            </div>
            <cite><span className="v2-testimonial-avatar">TK</span><span><strong>Tasos</strong>, Head of Research @ CBRE</span></cite>
          </div>
          <div className="v2-testimonial-tile">
            <div className="v2-testimonial-stars">★★★★★</div>
            <blockquote>"Ollie opened my eyes to AI, breaking down the barriers so I can lift both my own and my team's productivity. He teaches in a way that never makes you feel slow or behind. Would recommend to any business leader."</blockquote>
            <cite><span className="v2-testimonial-avatar">EB</span><span><strong>Ed</strong>, COO @ Bold Beans</span></cite>
          </div>
          <div className="v2-testimonial-tile">
            <div className="v2-testimonial-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-testimonial-avatar">AM</span><span><strong>Anna</strong>, Founder @ JUX Food</span></cite>
          </div>
          <div className="v2-testimonial-tile">
            <div className="v2-testimonial-stars">★★★★★</div>
            <blockquote>"The ability to explain AI in a way that both the most knowledgeable and the least can be engaged, coming away with a far greater understanding of its potential."</blockquote>
            <cite><span className="v2-testimonial-avatar">JF</span><span><strong>John Ferguson</strong>, Chairman @ Natalma Analytics</span></cite>
          </div>
          <div className="v2-testimonial-tile wide">
            <div className="v2-testimonial-stars">★★★★★</div>
            <blockquote>"Practical, client-guided, informative, hands-on, and gave me an appetite for more."</blockquote>
            <cite><span className="v2-testimonial-avatar">FC</span><span><strong>Chairman</strong>, FTSE company</span></cite>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogoBar, Qualifier, Services, CaseStudies, Testimonials });