/* eslint-disable */
// Build category, Fixed-Scope Builds, Custom Builds

function BuildScreen({ go, t }) {
  return (
    <div data-screen-label="04 Build">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Build"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr .7fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="build" dot>Build</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                We implement AI <em>for you.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Five capability areas crossed with two engagement shapes.
                Fixed-Scope Builds when the problem is well-defined and the path is clear;
                Custom Builds when the outcome is real but the path needs scoping.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <Button variant="primary" size="lg" onClick={() => go("quick-wins")}>
                Browse Fixed-Scope Builds <Icon name="arrow-right" size={16} className="arrow" />
              </Button>
              <Button variant="secondary" size="lg" onClick={() => go("custom-builds")}>
                Explore Custom Builds
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* 5-ACCELERATOR STRIP */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 96 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>The capability menu</Eyebrow>
            <h2 className="h-section">Five accelerators we build across.</h2>
            <p className="lede">
              Informational only, tags, not products. Each Fixed-Scope Build and Custom Build
              maps to one of these five. Use the tag colour as your guide everywhere on the site.
            </p>
          </div>
          <AcceleratorStrip
            title="Five capability areas"
            sub="Same vocabulary you'll see on Fixed-Scope Builds, Custom Builds, the Toolbox, and case studies." />
          
        </div>
      </section>

      {/* TWO ENGAGEMENT CARDS */}
      <section className="section section--white">
        <div className="container">
          <div className="section-head">
            <Eyebrow>Two engagement shapes</Eyebrow>
            <h2 className="h-section">Pick the shape that matches your scope.</h2>
          </div>
          <div className="grid grid--2" style={{ alignItems: "stretch" }}>
            <div className="eng-card">
              <Tag tone="agents" className="eng-tag">Productized</Tag>
              <h3>Fixed-Scope Builds</h3>
              <p className="lede" style={{ fontSize: 17 }}>
                Productized AI offerings, fixed scope, one defined outcome. For a
                well-defined problem with a clear path to the result.
              </p>
              <div className="eng-rows">
                <div className="eng-row">
                  <span className="lbl">Best for</span>
                  <span className="val">Specific, narrow problems with a clean definition of done.</span>
                </div>
                <div className="eng-row">
                  <span className="lbl">Timeline</span>
                  <span className="val">Tight by design, timing confirmed when we scope it, handover included.</span>
                </div>
                <div className="eng-row">
                  <span className="lbl">You get</span>
                  <span className="val">A working tool or workflow, your team trained on it, and a short handover doc.</span>
                </div>
              </div>
              <div style={{ marginTop: "auto", paddingTop: 8 }}>
                <Button variant="primary" onClick={() => go("quick-wins")}>
                  Browse Fixed-Scope Builds <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
              </div>
            </div>

            <div className="eng-card" style={{ background: "var(--ink)", color: "#fff", borderColor: "transparent" }}>
              <Tag tone="neutral" className="eng-tag">Custom</Tag>
              <h3 style={{ color: "#fff" }}>Custom Builds</h3>
              <p className="lede" style={{ color: "rgba(255,255,255, .72)", fontSize: 17 }}>
                Custom AI for one specific outcome. Built around your data, your team,
                and your operating constraints, scoped and built from the ground up.
              </p>
              <div className="eng-rows" style={{ borderColor: "rgba(255,255,255, .12)" }}>
                <div className="eng-row" style={{ borderColor: "rgba(255,255,255, .12)" }}>
                  <span className="lbl" style={{ color: "rgba(255,255,255, .5)" }}>Best for</span>
                  <span className="val" style={{ color: "#fff" }}>End-to-end outcomes that don't fit a productized box.</span>
                </div>
                <div className="eng-row" style={{ borderColor: "rgba(255,255,255, .12)" }}>
                  <span className="lbl" style={{ color: "rgba(255,255,255, .5)" }}>Timeline</span>
                  <span className="val" style={{ color: "#fff" }}>Scoped against the outcome, not headcount.</span>
                </div>
                <div className="eng-row" style={{ borderColor: "rgba(255,255,255, .12)" }}>
                  <span className="lbl" style={{ color: "rgba(255,255,255, .5)" }}>You get</span>
                  <span className="val" style={{ color: "#fff" }}>A custom system, in production, with code &amp; docs you own.</span>
                </div>
              </div>
              <div style={{ marginTop: "auto", paddingTop: 8 }}>
                <Button variant="on-dark-primary" onClick={() => go("custom-builds")}>
                  Explore Custom Builds <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OFF-RAMP */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <PageFAQ pageId="build" go={go} title="Questions before a build" />
          <OffRamp
            label="Not sure which?"
            title={<span>If the problem is well-defined with a clear path, it's probably a <strong>Fixed-Scope Build</strong>. Otherwise: a <strong>Blueprint</strong> first.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")} />
          
          <OffRamp
            label="Ready to build something real?"
            title={<span>Tell us the outcome. We'll tell you which engagement fits.</span>}
            cta="Talk to us"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

// ====================================================
// Fixed-Scope Builds page
// ====================================================
function QuickWinsScreen({ go, t }) {
  const tracks = [
  {
    tone: "tool", tag: "Task AI", dotCls: "acc-dot--tool",
    h: "Stand up a specific tool inside a specific process.",
    lede: "A purpose-built platform, like the AI built into your CRM or marketing system, chosen, configured, integrated with your stack, and rolled out to the team that runs that process.",
    builds: [
    { name: "Single-Tool Setup", note: "Recommend, configure and roll out one platform for a specific workflow." },
    { name: "Done-for-you Adoption", note: "Full selection, setup, stack integration, and team training for that tool." }],
    xref: <span>Rolling out the everyday assistants (ChatGPT, Copilot, Gemini, Claude)? That&rsquo;s <button className="linkout" style={{ padding: 0, fontSize: "inherit", verticalAlign: "baseline" }} onClick={() => go("ai-setup")}>AI Setup</button> under Enablement.</span>
  },
  {
    tone: "knowledge", tag: "Knowledge AI", dotCls: "acc-dot--knowledge",
    h: "Make your own knowledge findable and usable.",
    lede: "Turn the documents, drives and know-how you already have into something your team can search and build on.",
    builds: [
    { name: "Smart Search", note: "One search bar across your internal docs, drives and project archives." },
    { name: "Content Generator", note: "Turn your case studies, FAQs and voice into new on-brand content." }]
  },
  {
    tone: "decision", tag: "Data AI", dotCls: "acc-dot--decision",
    h: "Answer one specific business question.",
    lede: "A focused forecast, dashboard or analysis built around a single number you need to plan against.",
    builds: [
    { name: "Targeted Analytics", note: "A one-off forecast, dashboard, or analysis for a specific question." }]
  }];


  return (
    <div data-screen-label="05 Fixed-Scope Builds">
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Build", "Fixed-Scope Builds"]} />
          <div style={{ maxWidth: 760, marginTop: 22 }}>
            <div>
              <Tag tone="agents" dot>Productized</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Productized AI. <em>One clear outcome.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Packaged builds in the capability areas where the path is well-understood.
                Each one is self-contained and lands a single, defined outcome, a finished
                result, not a plan or a discovery phase.
              </p>
              <div className="cta-row" style={{ marginTop: 32 }}>
                <Button variant="primary" size="lg" onClick={() => go("contact")}>
                  Talk to us <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="secondary" size="lg" onClick={() => go("blueprint")}>
                  Start with a Blueprint
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <div className="fsb-grid fsb-grid--3" style={{ alignItems: "stretch" }}>
            {tracks.map((o, i) =>
            <div key={i} className="card fsb-card" style={{ padding: 32 }}>
                <div>
                  <Tag tone={o.tone} dot>{o.tag}</Tag>
                  <h3 className="h-card" style={{ marginTop: 16, fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", maxWidth: "20ch" }}>
                    {o.h}
                  </h3>
                  <p style={{ margin: "12px 0 0", color: "#4A4F60", fontSize: 15, lineHeight: 1.55 }}>{o.lede}</p>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "#9BA0AE", marginBottom: 10 }}>
                    Example builds
                  </div>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                    {o.builds.map((b, j) =>
                  <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink)", lineHeight: 1.45 }}>
                        <span className={`acc-dot ${o.dotCls}`} style={{ marginTop: 6, flexShrink: 0 }} />
                        <span><strong style={{ fontWeight: 600 }}>{b.name}</strong>, <span style={{ color: "#4A4F60" }}>{b.note}</span></span>
                      </li>
                  )}
                  </ul>
                </div>
                {o.xref ?
                <div style={{ fontSize: 12.5, color: "#5C6172", lineHeight: 1.5, paddingTop: 14, borderTop: "1px solid var(--hairline)" }}>
                  {o.xref}
                </div> :
                <div />
                }
              </div>
            )}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Start a Fixed-Scope Build <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <PageFAQ pageId="quick-wins" go={go} title="Common questions about Fixed-Scope Builds" />
          <OffRamp
            label="Bigger than a fixed scope?"
            title={<span>Outcomes that need scoping live in <strong>Custom Builds</strong>.</span>}
            cta="Explore Custom Builds"
            onCta={() => go("custom-builds")} />
          <OffRamp
            label="Name the outcome"
            title={<span>Tell us the result you need. We'll come back with the build, the scope, and a clear path to deliver it.</span>}
            cta="Talk to us"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

// ====================================================
// Custom Builds page
// ====================================================
function CustomBuildsScreen({ go, t }) {
  const outcomes = [
  {
    tone: "agents", tag: "Agentic AI", dotCls: "acc-dot--agents",
    h: "Deploy AI agents that run work end-to-end.",
    lede: "Software that doesn't just answer, it does work. Multi-step processes that today bounce between people, tools and spreadsheets, running themselves, with humans in the loop where it matters.",
    examples: ["Proposal generation across CRM + content library", "Customer-support agents on email + chat", "Claim triage and routing", "Compliance review pipelines"]
  },
  {
    tone: "conversational", tag: "Conversational AI", dotCls: "acc-dot--conversational",
    h: "Put a real conversation in front of your business.",
    lede: "Chat and voice assistants that handle genuine conversations with customers and staff, on your site, your phone line, or inside the tools your team already uses.",
    examples: ["Customer-facing chat assistant on your site", "Voice agents for inbound phone calls", "Internal Q&A assistant for staff"]
  },
  {
    tone: "decision", tag: "Data AI", dotCls: "acc-dot--decision",
    h: "Turn your data into business decisions.",
    lede: "Custom models tuned to your actual data and your actual decisions, not generic dashboards no one looks at.",
    examples: ["Demand forecasting for ops + finance", "Marketing attribution modelling", "Churn & retention prediction"]
  }];


  return (
    <div data-screen-label="06 Custom Builds">
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Build", "Custom Builds"]} />
          <div style={{ maxWidth: 760, marginTop: 22 }}>
            <div>
              <Tag tone="neutral" dot>Custom</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Custom AI, built for <em>one specific outcome.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>Three outcome-led tracks across our highest-tier accelerators. We scope around what the business needs to be true at the end, not features, not headcount.


              </p>
              <div className="cta-row" style={{ marginTop: 32 }}>
                <Button variant="primary" size="lg" onClick={() => go("blueprint")}>
                  Start with a Blueprint <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="secondary" size="lg" onClick={() => go("contact")}>
                  Talk to us
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <div className="fsb-grid fsb-grid--2" style={{ alignItems: "stretch" }}>
            {outcomes.map((o, i) =>
            <div key={i} className="card fsb-card" style={{ padding: 32 }}>
                <div>
                  <Tag tone={o.tone} dot>{o.tag}</Tag>
                  <h3 className="h-card" style={{ marginTop: 16, fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", maxWidth: "20ch" }}>
                    {o.h}
                  </h3>
                  <p style={{ margin: "12px 0 0", color: "#4A4F60", fontSize: 15, lineHeight: 1.55 }}>{o.lede}</p>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "#9BA0AE", marginBottom: 10 }}>
                    Example outcomes
                  </div>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                    {o.examples.map((ex, j) =>
                  <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink)", lineHeight: 1.45 }}>
                        <span className={`acc-dot ${o.dotCls}`} style={{ marginTop: 6 }} />
                        <span>{ex}</span>
                      </li>
                  )}
                  </ul>
                </div>
              </div>
            )}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Scope a Custom Build <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <OffRamp
            label="Not sure which fits?"
            title={<span>A Blueprint will tell you, six prioritised plays, sized to your team.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")} />
          
          <OffRamp
            label="Tell us the outcome"
            title={<span>Describe what you need to be true at the end. We'll come back with a scope.</span>}
            cta="Book a scoping call"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

window.BuildScreen = BuildScreen;
window.QuickWinsScreen = QuickWinsScreen;
window.CustomBuildsScreen = CustomBuildsScreen;