/* Body sections — verbatim landing copy, composed from DS primitives. */
const { Button, Eyebrow, Card, StepNumber, Accordion } = window.AIScanDesignSystem_81b9d1;
const CarbonIcon = window.CarbonIcon;

/* ---- Section 2 — The problem ---- */
function Problem() {
  return (
    <section className="ls-section ls-problem">
      <div className="ls-wrap ls-problem__grid">
        <div>
          <Eyebrow tone="muted">The problem</Eyebrow>
          <h2 className="ls-h2">You know AI matters.<br />You don't know where to start.</h2>
        </div>
        <div className="ls-prose">
          <p>Most companies are stuck at the same point. People know something needs to
            happen with AI, but the honest answer to "where do we begin?" is "it depends
            on how your company actually works."</p>
          <p>Finding that out usually means months of expensive consulting, or weeks of
            internal homework that never quite gets done.</p>
          <p className="ls-prose__lead">AI Scan gives you the answer in days, grounded in how your business
            really operates, straight from the people who run it.</p>
        </div>
      </div>
    </section>
  );
}

/* ---- Section 3 — How it works ---- */
const STEPS = [
  { n: 1, h: "We talk to your team", b: "A conversational agent interviews your employees over around 10 days. It asks short, human questions, never more than one or two at a time, and follows up where it matters. People share the real stories: the frustrations, the workarounds, the processes nobody documented." },
  { n: 2, h: "We synthesize everything", b: "Every conversation is analyzed together, not one set of notes at a time. The result is a structured picture of how your company actually works, and where the friction lives." },
  { n: 3, h: "You get a living report", b: "You log into a platform built like clear technical documentation: navigable, searchable, exportable. It maps your processes, ranks the opportunities, and tells you exactly what to do next." },
];
function HowItWorks() {
  return (
    <section className="ls-section ls-band" id="how-it-works">
      <div className="ls-wrap">
        <div className="ls-section__head">
          <Eyebrow>How it works</Eyebrow>
          <h2 className="ls-h2">Three steps. Around ten days.</h2>
        </div>
        <div className="ls-steps">
          {STEPS.map((s, i) => (
            <React.Fragment key={s.n}>
              {i > 0 && (
                <div className="ls-steparrow" aria-hidden="true">
                  <CarbonIcon name="arrow--right" />
                </div>
              )}
              <Card className="ls-step">
                <StepNumber n={s.n} size="lg" />
                <h3 className="ls-step__h">{s.h}</h3>
                <p className="ls-step__b">{s.b}</p>
              </Card>
            </React.Fragment>
          ))}
        </div>
        <div className="ls-section__foot">
          <Button variant="primary" className="aisn-btn--scan" href="#book" data-cta="book-scan" data-cta-location="how-it-works" data-ph-event="book_scan_click">Book a scan</Button>
        </div>
      </div>
    </section>
  );
}

/* ---- Section 4 — Why it works ---- */
const WHY = [
  { h: "Faster and cheaper", b: "What used to take a consultant two to four weeks of interviews and manual synthesis happens in days, at a fraction of the cost.", icon: "meter" },
  { h: "More candid", b: "People talk more openly to an agent in a one-to-one chat than they do in a formal workshop. You hear what's really happening on the ground.", icon: "chat" },
  { h: "Synthesized in full", b: "Findings are drawn across every conversation at once, so patterns surface that no single interviewer would catch.", icon: "analytics" },
];
function WhyItWorks() {
  return (
    <section className="ls-section" id="why-it-works">
      <div className="ls-wrap">
        <div className="ls-section__head">
          <Eyebrow>Why it works</Eyebrow>
          <h2 className="ls-h2">Honest answers, gathered at scale.</h2>
        </div>
        <div className="ls-cols3">
          {WHY.map((c) => (
            <div key={c.h} className="ls-why">
              <span className="ls-why__icon"><CarbonIcon name={c.icon} /></span>
              <h3 className="ls-why__h">{c.h}</h3>
              <p className="ls-why__b">{c.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Section 5 — What you get ---- */
const REPORT = [
  { n: 1, h: "Technology landscape", b: "A map of the systems you use and how data moves between them, drawn from what your team actually mentions, not a separate IT audit." },
  { n: 2, h: "Process inventory", b: "Every recurring process the agent surfaced, described plainly and ranked by a composite score of pain, volume, complexity, and AI suitability. The higher the score, the more it deserves your attention." },
  { n: 3, h: "Opportunity map", b: "A visual view of impact versus feasibility for your top opportunities." },
  { n: 4, h: "Recommendations", b: "For each priority: a specific, grounded action." },
  { n: 5, h: "What not to do", b: "The items we deliberately parked, and why." },
];
function WhatYouGet() {
  return (
    <section className="ls-section ls-band" id="what-you-get">
      <div className="ls-wrap ls-get__grid">
        <div className="ls-get__intro">
          <Eyebrow>What you get</Eyebrow>
          <h2 className="ls-h2">A living report, structured for action.</h2>
          <p className="ls-get__lead">Not a PDF. A platform you log into and keep. Five sections, built to be used.</p>
          <p className="ls-get__foot">Highlight sections, leave comments, and export the full report whenever you need it.</p>
          <Button variant="primary" className="aisn-btn--scan" href="#book" data-cta="book-scan" data-cta-location="what-you-get" data-ph-event="book_scan_click">Book a scan</Button>
        </div>
        <ol className="ls-get__list">
          {REPORT.map((r) => (
            <li key={r.n} className="ls-get__item">
              <StepNumber n={r.n} size="sm" tone="accent" />
              <div>
                <h3 className="ls-get__h">{r.h}</h3>
                <p className="ls-get__b">{r.b}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---- Section 6 — FAQ ---- */
const FAQ = [
  { q: "What does AI Scan actually help with?", a: "It helps you understand your company's internal, and often invisible, processes, then shows you where AI is worth your time and where it isn't. You get a prioritized map of the specific processes where AI would make a real difference, each with a concrete recommendation." },
  { q: "Which industries does it work for?", a: "Almost any company with recurring processes. It works well across manufacturing, professional services, public sector, logistics, and finance. The agent learns how your business works from your team's answers, so it doesn't rely on industry templates." },
  { q: "Is our data secure, and is it really anonymous for employees?", a: "Yes to both. Conversations are pooled and reported in aggregate, and any quote used is de-identified first. All data is handled to GDPR standards, and we sign a data processing agreement before anything begins." },
  { q: "Is this just a survey with a chatbot on top?", a: "No, it's not a survey, and there's no homework. The agent simply has a short, natural conversation: one question at a time, with follow-ups based on what you actually said. There's no forms to fill out, no scales, no dropdowns. That's why people share things they'd never write down." },
  { q: "What's in the report I get back?", a: "A living platform you log into and keep, not a PDF. Five parts: a map of your technology, a ranked inventory of your processes, a visual map of impact versus feasibility, specific recommendations for each opportunity (build, buy, or fix without AI), and a \"what not to do\" section. You can search, comment, and export it anytime." },
  { q: "How much time will this take from us?", a: "About ten days end to end. Employees answer short questions a few minutes at a time inside the tools they already use, so it never feels like extra work. Leadership involvement is light, but it helps if leaders tell employees why the scan matters and encourage them to take part, since honest participation is what makes the results strong." },
  { q: "What happens after the scan?", a: "The scan is a standalone engagement with a clear end, and the report is yours to act on with your own team or any partner you choose. If you'd like us to help build what it recommends, that's a separate engagement, never an obligation." },
];
function Faq() {
  return (
    <section className="ls-section" id="faq">
      <div className="ls-wrap ls-faq__grid">
        <div className="ls-faq__head">
          <Eyebrow>FAQ</Eyebrow>
          <h2 className="ls-h2">Questions people usually ask.</h2>
          <p className="ls-faq__sub">Can't find your answer? <a href="#contact" data-cta="talk-to-team" data-cta-location="faq" data-ph-event="talk_to_team_click">Talk to the team.</a></p>
        </div>
        <div className="ls-faq__list"><Accordion items={FAQ} defaultOpen={[0]} /></div>
      </div>
    </section>
  );
}

/* ---- Section 7 — Final CTA ---- */
function FinalCta() {
  return (
    <section className="ls-section ls-final" id="book">
      <span id="contact" className="ls-anchor" aria-hidden="true"></span>
      <div className="ls-wrap ls-final__inner">
        <h2 className="ls-final__h">See where AI fits your business.</h2>
        <p className="ls-final__sub">Book a scan and get a clear, prioritized map of your real opportunities in days.</p>
        <div className="ls-final__cta">
          <Button variant="primary" size="lg" className="aisn-btn--scan" href="#book" data-cta="book-scan" data-cta-location="final-cta" data-ph-event="book_scan_click">Book a scan</Button>
        </div>
        <p className="ls-final__note">Questions first? <a href="#contact" data-cta="talk-to-team" data-cta-location="final-cta" data-ph-event="talk_to_team_click">Talk to the team.</a></p>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, HowItWorks, WhyItWorks, WhatYouGet, Faq, FinalCta });