/* eslint-disable */
// AI Accelerators, door two. Content brief v4, section 4 (Final; FAQ block Draft).
//
// Structured in parallel with AI Foundations so the two service pages read as a pair:
//   hero + arc · two ways in (fork) · what we build + how a build runs (arc stages) ·
//   story rows (each tagged with the arc stage it proves) · closer panel · FAQ
// The arc (Scope → Build → Handover → Looked after) is the page spine: the run rail
// expands it, and each build story carries the stage it proves.
//
// Type discipline on this page: three weights only.
//   600 headings · 400 body (18px, grey) · 300 statements (one size, navy).
// One small label style (14px/500, sentence case). No uppercase tracking, no
// second emphasis colour, no pull-quote rules.

const ACC_STORIES = [
  {
    tone: "#001A55", pending: "CS-011", slug: "content-engine-agent", stage: "Build",
    sector: "An e-commerce building products retailer",
    mvpSector: "Retail",
    kind: "Content automation",
    problem: "A month of campaign content for three brands, written by hand and re-keyed into a 94-column import file.",
    mvpProblem: "A month of campaign content across several brands, written by hand and re-keyed into a long import file.",
    body: "A two-stage agent now turns the performance report into a month of platform-ready, brand-voiced content, with a human approving the plan.",
  },
  {
    tone: "#00655F", pending: "CS-018", slug: "booking-data-automation", stage: "Looked after",
    sector: "A shopping centre owner and manager",
    mvpSector: "Property",
    kind: "Systems integration",
    problem: "Monthly booking data moved between two systems by hand, across thirteen sites.",
    mvpProblem: "Monthly booking data moved between two systems by hand, across every site in the portfolio.",
    body: "We automated the transfer, now running in production under ongoing support. The partnership is extending into payment verification, on a careful principle: when the AI can't confirm a match, it says so, never guesses.",
  },
  {
    tone: "#0119B7", pending: "CS-034", slug: "email-triage-handover", stage: "Handover",
    sector: "A road freight and logistics operator",
    mvpSector: "Logistics",
    kind: "Inbox agent, handed over",
    problem: "Shared inboxes for customer service and the warehouse were absorbing the team's day.",
    body: "An email triage agent now sorts and routes them. Built, proven, then migrated into the operator's own environment with staff trained to run it: a proper handover, working without us.",
  },
];

const ACC_FAQS = [
  {
    q: "What's an AI agent, and does our business need one?",
    a: "An AI agent is software that uses AI to carry out a task or process with a degree of independence: answering enquiries, processing documents, moving information between systems, or handling steps your team currently does by hand. Whether you need one depends on whether a process is costing your team real time or letting things slip through. If people in your organisation are buried in repetitive work that follows a pattern, an agent is usually worth exploring.",
  },
  {
    q: "Which platforms do you build on?",
    a: "We work primarily within the Microsoft 365 ecosystem, including Copilot and Copilot Studio, and the Claude ecosystem from Anthropic. We build on the platform your organisation already trusts rather than introducing something new for its own sake. Where a build needs to connect to your other systems, like your CRM, finance tools or booking platforms, that integration is part of the engineering, done safely and with the right permissions.",
  },
  {
    q: "Who looks after an agent once it's built?",
    a: "That's your choice. Every build comes with a proper handover, so your team can run it independently if that suits you. Many clients prefer our AI Partnership, where we keep managing the agent: monitoring how it performs, improving it as your business changes, and being on hand when questions come up. Either way, you're never handed something and left wondering.",
  },
  {
    q: "How much does a custom AI agent cost?",
    a: "It depends on what the agent does, how many systems it connects to, and how much care the data it touches requires. A focused agent handling one well-defined process is a much smaller build than a system connecting several platforms with sensitive information. The honest answer starts with a conversation about the process you have in mind; from there we can scope it properly and give you a clear fixed price before anything is built.",
  },
];

// ---------- The build arc, the home journey figure recut for a light ground ----------
function AccArc() {
  return (
    <div className="hero-journey acc-arc">
      <svg viewBox="0 0 448 408" fill="none" role="img" aria-label="An arc rising through four stages: Scope, Build, Handover, Looked after">
        <path d="M0 408 A 380 380 0 0 0 286 272" className="hj-path" pathLength="1" stroke="rgba(0,26,85,.28)" strokeWidth="1.8" />
        <path d="M286 272 A 380 380 0 0 0 380 28" className="hj-path-ahead" stroke="rgba(0,26,85,.2)" strokeWidth="1.6" strokeDasharray="5 7" />
        <g className="hj-ticks" stroke="rgba(0,26,85,.24)" strokeWidth="1.2">
          <path d="M74 402 l0 -30" style={{ animationDelay: ".9s" }} />
          <path d="M186 352 l-14 -26" style={{ animationDelay: "1.4s" }} />
          <path d="M286 272 l-24 -18" style={{ animationDelay: "1.9s" }} />
          <path d="M380 28 l-30 6" style={{ animationDelay: "2.4s" }} />
        </g>
        <g fill="var(--ia-dark-blue)">
          <circle className="hj-dot" style={{ animationDelay: ".8s" }} cx="74" cy="402" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.3s" }} cx="186" cy="352" r="4" />
          <circle className="hj-dot" style={{ animationDelay: "1.8s" }} cx="286" cy="272" r="4.5" />
        </g>
        <circle className="hj-end-pulse" cx="380" cy="28" r="12" fill="none" stroke="var(--ia-blue)" strokeWidth="1.5" opacity="0" />
        <circle className="hj-dot" style={{ animationDelay: "2.3s" }} cx="380" cy="28" r="6.5" fill="var(--ia-blue)" />
        <g className="hj-svg-labels" fontSize="12.5" fontWeight="600" letterSpacing="1.2" fill="rgba(0,26,85,.62)">
          <text x="74" y="360" textAnchor="middle" style={{ animationDelay: "1.05s" }}>SCOPE</text>
          <text x="160" y="316" textAnchor="middle" style={{ animationDelay: "1.55s" }}>BUILD</text>
          <text x="238" y="244" textAnchor="middle" style={{ animationDelay: "2.05s" }}>HANDOVER</text>
          <text x="340" y="38" textAnchor="end" fill="var(--ia-blue)" style={{ animationDelay: "2.55s" }}>LOOKED AFTER</text>
        </g>
      </svg>
    </div>
  );
}

// The build stories as a physical card deck (chosen from stories-D-deck.html):
// stacked paper cards in 3D, cursor parallax, springy shuffle on advance.
function AccDeck({ go, anon }) {
  const [order, setOrder] = React.useState([0, 1, 2]);
  const [fly, setFly] = React.useState(-1);
  const busy = React.useRef(false);
  const stRef = React.useRef(null);
  const goTo = (i) => {
    if (busy.current || i === order[0]) return; busy.current = true;
    setFly(order[0]);
    setTimeout(() => { setOrder([i, (i + 1) % 3, (i + 2) % 3]); setFly(-1); busy.current = false; }, 380);
  };
  const advance = () => goTo((order[0] + 1) % 3);
  const back = () => goTo((order[0] + 2) % 3);
  const onMove = (e) => { const el = stRef.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty("--mx", ((e.clientX - r.left) / r.width * 2 - 1).toFixed(3)); el.style.setProperty("--my", ((e.clientY - r.top) / r.height * 2 - 1).toFixed(3)); };
  const onLeave = () => { const el = stRef.current; if (!el) return; el.style.setProperty("--mx", 0); el.style.setProperty("--my", 0); };
  const f = order[0];
  const s0 = ACC_STORIES[f];
  return (
    <div className="acc-deck" data-reveal>
      <div className="acc-deck-side">
        <div className="acc-deck-word" aria-live="polite">{s0.mvpSector}</div>
        <div className="acc-deck-ctl">
          <button type="button" className="acc-deck-arr" aria-label="Next build story" onClick={advance}><Icon name="arrow-right" size={16} /></button>
          <div className="acc-deck-dots">{ACC_STORIES.map((s, j) => (<button key={j} type="button" className={"acc-deck-dot" + (j === f ? " is-on" : "")} aria-label={"Story " + (j + 1) + ": " + s.kind} aria-current={j === f} onClick={() => goTo(j)}></button>))}</div>
        </div>
        <p className="acc-deck-hint">Click a card to bring it forward.</p>
      </div>
      <div className="acc-deck-stage" ref={stRef} tabIndex={0} role="group" aria-label="Build stories, use arrow keys to browse" onKeyDown={(e) => { if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") { e.preventDefault(); advance(); } else if (e.key === "ArrowLeft") { e.preventDefault(); back(); } }} onMouseMove={onMove} onMouseLeave={onLeave}>
        {ACC_STORIES.map((s, i) => (
          <article key={s.pending} className={"acc-deck-card p" + order.indexOf(i) + (fly === i ? " fly" : "")} style={{ ["--bt"]: s.tone }} onClick={() => (order.indexOf(i) === 0 ? advance() : goTo(i))}>
            <div className="acc-deck-in">
              <div className="acc-case-k"><span>{anon ? s.kind : s.sector}</span><span className="acc-case-stage">{s.stage}</span></div>
              <p className="acc-case-prob">{anon ? (s.mvpProblem || s.problem) : s.problem}</p>
              <p className="acc-case-body">{s.body}</p>
              {false && <span className="acc-case-go" role="link" tabIndex={0} onClick={(e) => { e.stopPropagation(); go("work/" + s.slug); }} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); go("work/" + s.slug); } }}>Read the full story <Icon name="arrow-right" size={13} className="arrow" /></span>}{/* hidden until the full case stories are signed off */}
              {!anon && (
                <div className="acc-case-f">
                  <span className="build-cell-lg">
                    <image-slot id={`acc-logo-${s.pending}`} placeholder="Client logo" shape="rect" fit="contain" />
                  </span>
                  <span className="build-cell-o">
                    <span className="build-cell-pend">Outcome pending</span>
                    <span className="build-cell-cs">{s.pending}</span>
                  </span>
                </div>
              )}
            </div>
            <div className="acc-deck-ghost">0{i + 1}</div>
          </article>
        ))}
      </div>
    </div>
  );
}

function AcceleratorsScreen({ go, t }) {
  const anon = !!(window.IA_MVP && window.IA_MVP());
  return (
    <div data-screen-label="03 AI Accelerators">
      {/* HERO */}
      <section className="hero dot-grid acc-hero acc-hero--blend">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "AI Accelerators"]} go={go} />
          <div className="svc-hero">
            <div>
              <h1 className="h-display" style={{ maxWidth: "18ch" }}>Agents and AI tools, <em>built for you</em>.</h1>
              <p className="lede" style={{ maxWidth: "56ch" }}>
                Designed and built for your organisation, looked after by us, working for you.
                That's an AI Accelerator.
              </p>
              <div className="acc-hero-cta"></div>
            </div>
            <AccArc />
          </div>
        </div>
      </section>

      {/* WHAT WE BUILD, AND HOW */}
      <section className="section wwb">
        <div className="container">
          <div className="wwb-card" data-reveal>
            <h2 className="h-section wwb-h">What we build, and how</h2>
            <p className="acc-stmt wwb-stmt"><strong>An agent.</strong> <strong>A tool.</strong> <strong>A system.</strong> Whatever the shape, it's engineered properly.</p>
            <p className="wwb-sub">A process your team is buried in, something your customers use directly, or hours of document work turned into minutes. <i>We don't build anything we wouldn't be comfortable governing.</i></p>
          </div>
        </div>
      </section>

      {/* BUILD STORIES — open columns under a coloured rule, no boxes.
          Hidden in the MVP build, same as the B variant. */}
      {!anon && (
      <section className="section section--white acc-cases-sec">
        <div className="container">
          <div className="section-head">
            <h2 className="h-section">Three builds, three sectors.</h2>
            <p className="lede">The problem, the build, and the stage each proves.</p>
          </div>
          <AccDeck go={go} anon={anon} />
        </div>
      </section>
      )}

      {/* AFTER THE BUILD */}
      <section className="section section--paper acc-after-sec">
        <div className="container">
          <div className="acc-after">
            <p className="acc-stmt acc-after-statement">
              Every build comes with a <strong>proper handover</strong>. And where you'd rather we stay
              close, our AI Partnership <em>keeps us managing it.</em>
            </p>
            <div className="acc-after-note">
              <p>
                Monitoring, improving as your business changes, and on hand when questions come up.
              </p>
              <div className="atb-links">
                <LinkOut onClick={() => go("how-we-work")}>How the partnership works</LinkOut>
                <LinkOut onClick={() => go("contact")}>Talk to us</LinkOut>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--white" style={{ paddingBottom: 96 }}>
        <div className="container">
          <div className="section-head">
            <h2 className="h-section">Accelerators, answered plainly.</h2>
          </div>
          <div style={{ marginTop: 20 }}><FaqAccordion items={ACC_FAQS} id="accelerators" /></div>
          <div style={{ marginTop: 20 }}><LinkOut onClick={() => go("faqs")}>See all FAQs</LinkOut></div>
        </div>
      </section>
    </div>
  );
}

window.AcceleratorsScreen = AcceleratorsScreen;
Object.assign(window, { ACC_STORIES, ACC_FAQS, AccArc });
