/* eslint-disable */
// AI Setup page, third Foundations service.
// Done-for-you selection, configuration, and rollout of everyday AI assistants.
// Distinct from AI Literacy (teaches people) and AI Governance (sets rules).

const SETUP_INCLUDED = [
  { name: "Assistant selection", desc: "We help you choose the right everyday assistants, Copilot, Gemini, ChatGPT, or Claude, based on your industry, team size, and the work you actually do.", icon: "list-checks" },
  { name: "Account setup & configuration", desc: "Licences, workspaces, permissions, and integrations set up properly the first time, so the assistants fit how your team already works.", icon: "settings-2" },
  { name: "Onboarding & training materials", desc: "Clear, plain-English guides and a short walkthrough so people can get going on day one, without a help desk.", icon: "book-open" },
];

const SETUP_TIERS = [
  {
    key: "starter",
    name: "Starter setup",
    blurb: "One or two assistants, a small team.",
    points: ["Account creation and basic configuration", "Self-service onboarding guides", "Assistant selection consultation"],
  },
  {
    key: "standard",
    name: "Standard implementation",
    blurb: "A core set of assistants across a whole team.",
    points: ["Complete setup and custom configuration", "Integrations with the apps you use", "Onboarding pack and a team walkthrough"],
  },
  {
    key: "full",
    name: "Full rollout",
    blurb: "Multiple assistants, multiple teams.",
    points: ["Full implementation across departments", "Comprehensive onboarding materials", "Adoption support after go-live"],
  },
];

// Compact selection guide, categories, not a vendor list (the Toolbox has those).
const SETUP_GUIDE = [
  { cat: "Text generation", desc: "Write articles, emails, and product descriptions, or chat with customers." },
  { cat: "Image creation", desc: "Generate images from a description. Useful for marketing, branding, and creative work." },
  { cat: "Code assistance", desc: "Help developers write, debug, and optimise code faster." },
  { cat: "Search & research", desc: "Summarise and retrieve information across many sources at once." },
];

function AiSetupScreen({ go, t }) {
  return (
    <div data-screen-label="11 AI Setup">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Foundations", "AI Setup"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="enable" dot>Foundations</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Get your team set up on the <em>right everyday AI assistants.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                The hands-on part of foundations. We choose the assistants that fit your business,
                set up the accounts and integrations properly, and hand your team clear
                onboarding materials, so AI is working from day one, not sitting
                unused in a browser tab.
              </p>
              <p style={{ marginTop: 14, fontSize: 14, color: "#5C6172", lineHeight: 1.55 }}>
                Looking to get a specific tool live inside a specific process, like a CRM?
                That&rsquo;s{" "}
                <button className="linkout" style={{ padding: 0, fontSize: "inherit", verticalAlign: "baseline" }} onClick={() => go("quick-wins")}>Task AI</button>, a Fixed-Scope Build.
              </p>
              <div className="cta-row" style={{ marginTop: 32 }}>
                <Button variant="primary" size="lg" onClick={() => go("contact")}>
                  Request a meeting <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="secondary" size="lg" onClick={() => go("contact")}>
                  Schedule a call
                </Button>
              </div>
            </div>

            <div className="card" style={{ padding: 28, background: "#fff" }}>
              <div className="enb-card-head">
                <EnablementMiniTriangle active="ai-setup" />
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "var(--ia-blue)" }}>Foundations</div>
                  <div style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500, marginTop: 2 }}>Sets up <strong>the everyday tools</strong></div>
                </div>
              </div>
              <hr className="divider" style={{ margin: "14px 0" }} />
              <SetupGlance label="Format" value="Done-for-you setup" />
              <SetupGlance label="Assistants" value="Copilot, Gemini, ChatGPT, Claude + more" />
              <SetupGlance label="Outputs" value="Configured accounts, onboarding pack" />
              <SetupGlance label="Best for" value="Teams adopting AI day-to-day" />
              <SetupGlance label="Pairs with" value="AI Literacy, AI Governance" last />
            </div>
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED, image + bullets */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 56, alignItems: "stretch",
            background: "#fff", border: "1px solid var(--hairline)", borderRadius: 24, overflow: "hidden"
          }}>
            <div style={{ minHeight: 460, background: "#F2F2EE", position: "relative" }}>
              <image-slot
                id="setup-team"
                placeholder="Photo of the team setting up tools with a client"
                shape="rect"
                fit="cover"
                style={{ height: "100%", width: "100%" }} />
            </div>
            <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", gap: 22 }}>
              <Eyebrow>What we do</Eyebrow>
              <h2 className="h-section" style={{ fontSize: 36 }}>
                Three things, done properly.
              </h2>
              <ul className="bullet-list">
                {SETUP_INCLUDED.map((s, i) =>
                  <li key={i}>
                    <span><strong style={{ color: "var(--ink)", fontWeight: 600 }}>{s.name}</strong>, {s.desc}</span>
                  </li>
                )}
              </ul>
              <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
                <Button variant="primary" onClick={() => go("contact")}>
                  Request a meeting <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
                <Button variant="secondary" onClick={() => go("contact")}>Schedule a call</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SCOPE TIERS */}
      <section className="section section--white" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>How we scope it</Eyebrow>
            <h2 className="h-section">Sized to what you're rolling out.</h2>
            <p className="lede">
              From standing up a single assistant to a full rollout across departments. Every
              engagement includes assistant selection, setup documentation, and post-setup support.
            </p>
          </div>

          <div className="grid grid--3" style={{ alignItems: "stretch", gap: 20 }}>
            {SETUP_TIERS.map((tier) =>
              <div key={tier.key} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
                <h3 className="h-card" style={{ margin: 0 }}>{tier.name}</h3>
                <p style={{ margin: 0, color: "#5C6172", fontSize: 14.5 }}>{tier.blurb}</p>
                <hr className="divider" style={{ margin: "2px 0" }} />
                <ul className="bullet-list" style={{ margin: 0 }}>
                  {tier.points.map((p, i) => <li key={i} style={{ fontSize: 14.5 }}>{p}</li>)}
                </ul>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* SELECTION GUIDE */}
      <section className="section section--paper" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Choosing the right assistant</Eyebrow>
            <h2 className="h-section">A quick guide to the common categories.</h2>
            <p className="lede">
              Most everyday AI assistants fall into one of a few buckets. The right pick depends on
              your goals, the Toolbox has our specific recommendations.
            </p>
          </div>

          <div className="card" style={{ padding: 8, background: "#fff" }}>
            {SETUP_GUIDE.map((row, i) =>
              <div
                key={i}
                style={{
                  display: "grid", gridTemplateColumns: "240px 1fr", gap: 32,
                  padding: "20px 24px",
                  borderBottom: i < SETUP_GUIDE.length - 1 ? "1px solid var(--hairline)" : "0",
                  alignItems: "baseline"
                }}>
                <div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 16 }}>{row.cat}</div>
                <div style={{ color: "#5C6172", fontSize: 15, lineHeight: 1.55 }}>{row.desc}</div>
              </div>
            )}
          </div>

          <div className="cta-row" style={{ marginTop: 28, justifyContent: "center" }}>
            <Button variant="primary" onClick={() => go("toolbox")}>
              Browse the AI Toolbox <Icon name="arrow-right" size={14} className="arrow" />
            </Button>
            <Button variant="secondary" onClick={() => go("contact")}>Get a recommendation</Button>
          </div>
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section className="section section--white" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Not sure which assistants you need?"
            title={<span>Tell us how your team works today and we'll set you up with the right assistants, configured and ready to use.</span>}
            cta="Talk to us"
            onCta={() => go("contact")}
            variant="primary" />
        </div>
      </section>
    </div>);
}

// ---------- Glance (local copy, used in hero card) ----------
function SetupGlance({ label, value, last }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "10px 0", borderBottom: last ? "0" : "1px solid var(--hairline)" }}>
      <span style={{ fontSize: 13, color: "#5C6172" }}>{label}</span>
      <span style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500, textAlign: "right", maxWidth: "60%" }}>{value}</span>
    </div>);
}

window.AiSetupScreen = AiSetupScreen;