/* eslint-disable */
// Services Overview page

const SERVICE_FINDER_Q1 = {
  q: "Where would you say you are in your AI journey?",
  options: [
  { value: "explore", label: "Just exploring, no AI in production yet." },
  { value: "experiment", label: "Experimenting, a few tools, used ad hoc." },
  { value: "operate", label: "Operating, AI is already in production." }]

};

const SERVICE_FINDER_Q2 = {
  q: "What's your single biggest blocker right now?",
  options: [
  { value: "plan", label: "I don't know what's worth doing, I need a plan.", recommend: "blueprint" },
  { value: "team", label: "My team doesn't use AI well, I need them confident.", recommend: "literacy" },
  { value: "guardrails", label: "I need policies, risk and compliance sorted out.", recommend: "governance" },
  { value: "build", label: "I have a specific thing I want built or automated.", recommend: null /* go to Q3 */ }]

};

const SERVICE_FINDER_Q3 = {
  q: "How well-defined is the thing you want built?",
  options: [
  { value: "narrow", label: "One clear, narrow problem I could describe in a sentence.", recommend: "quick-wins" },
  { value: "complex", label: "A bigger, end-to-end outcome that'll need scoping.", recommend: "custom-builds" }]

};

const SERVICE_INFO = {
  "blueprint": { tone: "strategy", name: "AI Blueprint", pillar: "Strategy", blurb: "A 5-phase engagement that maps your operations and identifies six prioritised plays, sized to your team.", time: "Scoped to your team" },
  "literacy": { tone: "enable", name: "AI Literacy", pillar: "Foundations", blurb: "Nine workshops across Fundamentals, Skills, and Application, designed as a program for your whole team.", time: "Scoped per program" },
  "ai-setup": { tone: "enable", name: "AI Setup", pillar: "Foundations", blurb: "Done-for-you selection, configuration, and rollout of everyday AI assistants, Copilot, Gemini, ChatGPT, Claude.", time: "Scoped to your tools" },
  "governance": { tone: "enable", name: "AI Governance", pillar: "Foundations", blurb: "A working AI policy, carrot and stick, plus data classification and a clear line on automated decisions. Governance as a practice, not a one-off.", time: "Scoped to your team" },
  "quick-wins": { tone: "build", name: "Fixed-Scope Builds", pillar: "Build", blurb: "Productized AI offerings, fixed scope for a single, defined outcome.", time: "Confirmed at scoping" },
  "custom-builds": { tone: "build", name: "Custom Builds", pillar: "Build", blurb: "Custom AI built around one specific outcome, agentic AI, conversational AI, or data intelligence.", time: "Confirmed at scoping" },
};

function ServicesScreen({ go, t }) {
  return (
    <div data-screen-label="02 Services Overview">
      {/* Brief hero */}
      <section className="section section--white" style={{ paddingTop: 96, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Intelligence Assist", "Services"]} />
          <h1 className="h-display" style={{ marginTop: 18, maxWidth: "14ch", height: "154px", width: "735px" }}>
            Three pillars. <em>Six services.</em>
          </h1>
          <p className="lede" style={{ marginTop: 22, borderStyle: "solid", borderWidth: "0px" }}>
            A short menu, organised by where you are on your AI journey. If you'd rather not
            read the menu, try the finder below.
          </p>
        </div>
      </section>

      {/* SERVICE FINDER */}
      <section className="section section--paper" style={{ paddingTop: 24, paddingBottom: 56 }}>
        <div className="container">
          <ServiceFinder go={go} />
        </div>
      </section>

      {/* Three columns by pillar */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 40 }}>
        <div className="container">
          <div className="section-head section-head--center" style={{ marginBottom: 40 }}>
            <Eyebrow>The full menu</Eyebrow>
            <h2 className="h-section" style={{ textAlign: "center" }}>Or browse all six services by pillar.</h2>
          </div>
          <div className="grid grid--3" style={{ alignItems: "start", gap: 24 }}>

            {/* Strategy column */}
            <div className="svc-col">
              <div className="svc-col-head">
                <Tag tone="strategy">Strategy</Tag>
                <span className="title">Know where to start.</span>
                <span className="desc">One leaf, but it's the one almost every client begins with.</span>
              </div>
              <SvcCard
                tone="strategy"
                icon={<ServiceIcon kind="blueprint" />}
                name="AI Blueprint"
                desc="A 5-phase engagement that maps your operations, scores your readiness, and identifies six prioritised opportunities."
                onClick={() => go("blueprint")} />
              
            </div>

            {/* Foundations column */}
            <div className="svc-col">
              <div className="svc-col-head">
                <Tag tone="enable">Foundations</Tag>
                <span className="title">Build your team's confidence.</span>
                <span className="desc">A sequence: set the tools up, govern how they're used, then build the skills.</span>
              </div>
              <div className="svc-steps">
                <div className="svc-step-row">
                  <div className="svc-step-rail"><span className="n">1</span></div>
                  <SvcCard
                    tone="enable"
                    icon={<ServiceIcon kind="setup" />}
                    name="AI Setup"
                    desc="Done-for-you setup of everyday AI assistants, chosen, configured, and rolled out so your team is working from day one."
                    onClick={() => go("ai-setup")} />
                </div>
                <div className="svc-step-row">
                  <div className="svc-step-rail"><span className="n">2</span></div>
                  <SvcCard
                    tone="enable"
                    icon={<ServiceIcon kind="governance" />}
                    name="AI Governance"
                    desc="Policies, principles, and review processes for SMBs adopting AI responsibly, without the enterprise overhead."
                    onClick={() => go("governance")} />
                </div>
                <div className="svc-step-row">
                  <div className="svc-step-rail"><span className="n">3</span></div>
                  <SvcCard
                    tone="enable"
                    icon={<ServiceIcon kind="literacy" />}
                    name="AI Literacy"
                    desc="Nine workshops across Fundamentals, Skills, and Application, designed as a program, not à la carte."
                    onClick={() => go("literacy")} />
                </div>
              </div>
            </div>

            {/* Build column */}
            <div className="svc-col">
              <div className="svc-col-head">
                <Tag tone="build">Build</Tag>
                <span className="title">Ship working systems.</span>
                <span className="desc">Two engagement shapes for the same five capability areas.</span>
              </div>
              <SvcCard
                tone="build"
                icon={<ServiceIcon kind="quickwins" />}
                name="Fixed-Scope Builds"
                desc="Productized AI, fixed scope, one defined outcome. For problems you can describe in one sentence."
                onClick={() => go("quick-wins")} />
              
              <SvcCard
                tone="build"
                icon={<ServiceIcon kind="custom" />}
                name="Custom Builds"
                desc="Custom AI built for one specific outcome, agentic AI, conversational AI, or data intelligence."
                onClick={() => go("custom-builds")} />
              
            </div>

          </div>

          {/* Bottom strip */}
          <div style={{ marginTop: 64 }}>
            <OffRamp
              label="Not sure where to start?"
              title={<span>Most clients begin with an <strong>AI Blueprint</strong>. It's the lowest-commitment way to figure out what's worth doing.</span>}
              cta="Book a Blueprint"
              onCta={() => go("blueprint")}
              variant="primary" />
            
          </div>
        </div>
      </section>

      {/* Toolbox + Resource Hub teaser */}
      <section className="section section--white" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="section-head section-head--row">
            <div className="head-left">
              <Eyebrow>Also useful</Eyebrow>
              <h2 className="h-section" style={{ fontSize: 32 }}>Two libraries you can browse without booking a call.</h2>
            </div>
          </div>
          <div className="grid grid--2">
            <div className="card card--hoverable" onClick={() => go("toolbox")} style={{ padding: 32 }}>
              <div className="row">
                <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--pl-build-bg)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="wrench" size={22} color="var(--pl-build-fg)" />
                </div>
                <h3 className="h-card">AI Toolbox</h3>
              </div>
              <p style={{ margin: 0, color: "#5C6172", fontSize: 15, lineHeight: 1.55 }}>
                A filterable library of AI tools we've vetted, tagged by accelerator. Filter to your problem; see which tool fits.
              </p>
              <LinkOut onClick={() => go("toolbox")}>Browse the Toolbox</LinkOut>
            </div>
            <div className="card card--hoverable" onClick={() => go("resources")} style={{ padding: 32 }}>
              <div className="row">
                <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--pl-enable-bg)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="book-open" size={22} color="var(--pl-enable-fg)" />
                </div>
                <h3 className="h-card">Blog</h3>
              </div>
              <p style={{ margin: 0, color: "#5C6172", fontSize: 15, lineHeight: 1.55 }}>
                Plain-English articles on AI news, trends, and tool reviews. Written for owners, not engineers.
              </p>
              <LinkOut onClick={() => go("resources")}>Read the Blog</LinkOut>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--paper" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="container">
          <PageFAQ pageId="services" go={go} title="FAQ" />
        </div>
      </section>
    </div>);

}

// ---------- Service Finder ----------
function ServiceFinder({ go }) {
  const [step, setStep] = React.useState(0);
  const [journey, setJourney] = React.useState(null); // Q1 answer (context only)
  const [recommend, setRecommend] = React.useState(null);

  // Steps: 0 = Q1 (journey), 1 = Q2 (blocker), 2 = Q3 (only if blocker=build), 3 = result
  const totalSteps = 3; // user-perceived bar (Q1 + Q2 + maybe Q3)

  function reset() {setStep(0);setJourney(null);setRecommend(null);}

  function onQ1(opt) {setJourney(opt.value);setStep(1);}
  function onQ2(opt) {
    if (opt.recommend) {setRecommend(opt.recommend);setStep(3);} else
    {setStep(2);}
  }
  function onQ3(opt) {setRecommend(opt.recommend);setStep(3);}

  const done = step === 3;
  const rec = done && SERVICE_INFO[recommend];

  return (
    <div className="svc-finder">
      <div className="svc-finder-head">
        <Eyebrow>Service Finder</Eyebrow>
        <h2 className="h-section" style={{ fontSize: 26, marginTop: 6, maxWidth: "22ch" }}>
          Two questions. We'll point you at the right service.
        </h2>
      </div>

      <div className="tier-finder" style={{ maxWidth: "none" }}>
        {/* Progress */}
        <div className="tier-finder-progress">
          {[0, 1, 2].map((i) => {
            const isDone = done && i < 3 || step > i;
            const isCurrent = !done && step === i;
            return (
              <div
                key={i}
                className={`tfp-dot ${isDone ? "tfp-dot--done" : ""} ${isCurrent ? "tfp-dot--current" : ""}`} />);


          })}
          <div className="tfp-label">
            {done ? "Recommendation" : `Question ${step + 1} of ${step >= 2 ? 3 : 2}+`}
          </div>
          {(step > 0 || done) &&
          <button className="tfp-reset" onClick={reset}>
              <Icon name="rotate-ccw" size={12} /> Start over
            </button>
          }
        </div>

        {step === 0 &&
        <SvcFinderQ q={SERVICE_FINDER_Q1.q} options={SERVICE_FINDER_Q1.options} onPick={onQ1} eyebrow="Q1" />
        }
        {step === 1 &&
        <SvcFinderQ q={SERVICE_FINDER_Q2.q} options={SERVICE_FINDER_Q2.options} onPick={onQ2} eyebrow="Q2" />
        }
        {step === 2 &&
        <SvcFinderQ q={SERVICE_FINDER_Q3.q} options={SERVICE_FINDER_Q3.options} onPick={onQ3} eyebrow="Q3" />
        }

        {done && rec &&
        <div className="tier-finder-result" data-tier="result">
            <div className="tfr-head">
              <span className="tfr-eyebrow">We'd recommend</span>
              <div className="tfr-tier">
                <Tag tone={rec.tone} dot>{rec.pillar}</Tag>
                <h3 className="tfr-name" style={{ color: `var(--pl-${rec.tone}-fg)` }}>{rec.name}</h3>
              </div>
            </div>
            <p className="tfr-headline">{rec.blurb}</p>
            <div className="tfr-summary" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <div className="tfr-summary-block">
                <span className="tfr-lbl">Typical timeline</span>
                <span>{rec.time}</span>
              </div>
              {journey &&
            <div className="tfr-summary-block">
                  <span className="tfr-lbl">For someone</span>
                  <span>
                    {journey === "explore" && "Just exploring AI."}
                    {journey === "experiment" && "Experimenting with AI tools."}
                    {journey === "operate" && "Already operating AI in production."}
                  </span>
                </div>
            }
            </div>
            <div className="tfr-actions">
              <Button variant="primary" onClick={() => go(recommend)}>
                See {rec.name} <Icon name="arrow-right" size={14} className="arrow" />
              </Button>
              <Button variant="secondary" onClick={reset}>Start over</Button>
            </div>
          </div>
        }
      </div>
    </div>);

}

function SvcFinderQ({ q, options, onPick, eyebrow }) {
  return (
    <div className="tier-finder-q">
      <span className="tfq-eyebrow">{eyebrow}</span>
      <p className="tfq-text">{q}</p>
      <div className="svc-finder-options">
        {options.map((opt) =>
        <button key={opt.value} className="svc-finder-option" onClick={() => onPick(opt)}>
            <span>{opt.label}</span>
            <Icon name="arrow-right" size={14} className="svc-finder-arrow" />
          </button>
        )}
      </div>
    </div>);

}

// ---------- Service card ----------
function SvcCard({ tone, icon, name, desc, onClick }) {
  return (
    <div className="svc-card" onClick={onClick}>
      <div className="top">
        <div className={`ic`} style={{ background: `var(--pl-${tone}-bg)` }}>
          <span style={{ color: `var(--pl-${tone}-fg)`, display: "flex" }}>{icon}</span>
        </div>
        <div className="arrow-pill">
          <Icon name="arrow-right" size={14} />
        </div>
      </div>
      <div className="nm">{name}</div>
      <div className="ds">{desc}</div>
    </div>);

}

// ---------- Service icon ----------
function ServiceIcon({ kind }) {
  const map = {
    blueprint: "compass",
    literacy: "graduation-cap",
    governance: "shield-check",
    setup: "plug-zap",
    quickwins: "zap",
    custom: "blocks"
  };
  return <Icon name={map[kind]} size={20} />;
}

window.ServicesScreen = ServicesScreen;