/* eslint-disable */
// AI Blueprint page

function BlueprintScreen({ go, t }) {
  const phases = [
  { name: "Define ambition", desc: "Frame what good looks like for your business, within reality.", icon: "compass" },
  { name: "Assess readiness", desc: "Score your data, tools, people, and operating model honestly.", icon: "gauge" },
  { name: "Map operations", desc: "Walk through every workflow and surface where time leaks.", icon: "git-fork" },
  { name: "Identify opportunities", desc: "Score & prioritise six concrete AI plays, sized to your team.", icon: "target" },
  { name: "Visualise future", desc: "Show what AI-enabled operations look like, in plain English.", icon: "eye" }];


  return (
    <div data-screen-label="03 AI Blueprint">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Strategy", "AI Blueprint"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="strategy" dot>Strategy</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Know what to do with AI <em>and in what order.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>Start your AI journey with a comprehensive digital audit and AI blueprint tailored to uncover the AI opportunities within your operations.
    


              </p>
              <div className="cta-row" style={{ marginTop: 32 }}>
                <Button variant="primary" size="lg" onClick={() => go("contact")}>
                  Book a Blueprint <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
              </div>
            </div>

            {/* At-a-glance card */}
            <div className="card" style={{ padding: 28, background: "#fff" }}>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "#9BA0AE" }}>
                At a glance
              </div>
              <hr className="divider" style={{ margin: "12px 0" }} />
              <Glance label="Format" value="Workshop with an AI expert, in person or virtual" />
              <Glance label="Timeline" value="4, 6 weeks" />
              <Glance label="Phases" value="Five, ambition to future state" />
              <Glance label="Best for" value="Owners and teams deciding where to start with AI" />
              <Glance label="You leave with" value="An audit report, readiness assessment, and a prioritised roadmap, six-plus AI plays in plain English" last />
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS STEPPER */}
      <section className="section section--paper" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>The process</Eyebrow>
            <h2 className="h-section">Five phases</h2>
            <p className="lede">Your business' AI journey. Your own pace. Your decisions.


            </p>
          </div>

          <div className="stepper">
            {phases.map((p, i) =>
            <div key={i} className="step">
                <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="step-eyebrow">Phase 0{i + 1}</div>
                <div className="step-name">{p.name}</div>
                <div className="step-desc">{p.desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED */}
      <section className="section section--white">
        <div className="container">
          <div className="section-head">
            <Eyebrow>What's included</Eyebrow>
            <h2 className="h-section">Every Blueprint engagement, end to end.</h2>
          </div>
          <div className="included-grid">
            <ul className="bullet-list">
              <li>In person or virtual workshop with an AI expert</li>
              <li>AI readiness and risk assessment</li>
              <li>Detailed audit of your current tools, systems, and processes</li>
            </ul>
            <ul className="bullet-list">
              <li>Identification of at least six actionable AI opportunities</li>
              <li>Roadmap walkthrough to help prioritise your AI journey</li>
              <li>A short "future state" walkthrough you can share internally</li>
            </ul>
          </div>
        </div>
      </section>

      {/* DELIVERABLE CALLOUT */}
      <section className="section section--paper" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="deliverable">
            <div className="doc-ic">
              <Icon name="file-text" size={28} color="#fff" />
            </div>
            <div>
              <div className="label">You walk away with</div>
              <div className="stmt">
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                  <li style={{ fontWeight: "200" }}>A detailed audit report covering your operations, mapping your current digital tools, and at least <span className="stmt-highlight">6 actionable AI adoption recommendations</span>.</li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
            </div>
            <div>
              <Button variant="on-dark-primary" size="md" onClick={() => go("contact")}>
                Book a Blueprint <Icon name="arrow-right" size={14} className="arrow" />
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ-style trust block */}
      <section className="section section--white" style={{ paddingTop: 64 }}>
        <div className="container">
          <div className="section-head section-head--row">
            <div className="head-left">
              <Eyebrow>Common questions</Eyebrow>
              <h2 className="h-section" style={{ fontSize: 32 }}>What clients ask before they sign up.</h2>
            </div>
          </div>
          <div className="grid grid--2">
            <FAQItem q="Will you push us toward specific tools?" a="No. We're tool-agnostic. The Blueprint identifies the work to do, tool choice is a separate, downstream call (and one we'll guide you on, but not from a vendor list)." />
            
            <FAQItem q="What if half the opportunities aren't worth it?"
            a="Great. That's the point. Saying 'don't do this' is a deliverable. We'd rather hand you four real plays than six politically-flattering ones." />
            
            <FAQItem
              q="Can we do the Blueprint and stop there?"
              a="Yes, the Blueprint is yours to keep, and you're welcome to take the roadmap in-house. Most of the value is in the doing, though, so we're set up to help you execute it whenever you're ready." />
            
            <FAQItem
              q="We're already past planning, is this for us?"
              a={<span>Probably not. Head to <button className="linkout" style={{ padding: 0, fontSize: "inherit" }} onClick={() => go("build")}>Build</button> instead, Fixed-Scope Builds or Custom Builds, depending on scope.</span>} />
            
          </div>
        </div>
      </section>

      {/* OFF-RAMP */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Already past planning?"
            title={<span>Browse <strong>Build</strong> directly, Fixed-Scope Builds or Custom Builds.</span>}
            cta="Explore Build"
            onCta={() => go("build")} />
        </div>
      </section>
    </div>);

}

function Glance({ 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>);

}

function FAQItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="card" style={{ padding: 24 }}>
      <button
        onClick={() => setOpen(!open)}
        style={{ background: "transparent", border: 0, cursor: "pointer", textAlign: "left", padding: 0, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, fontFamily: "inherit", color: "var(--ink)", width: "100%" }}>
        
        <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>{q}</span>
        <Icon name={open ? "minus" : "plus"} size={18} color="var(--ia-blue)" />
      </button>
      {open &&
      <div style={{ fontSize: 15, color: "#4A4F60", lineHeight: 1.55, marginTop: 8 }}>{a}</div>
      }
    </div>);

}

window.BlueprintScreen = BlueprintScreen;