/* ════════════════════════════════════════════════════════════════════
   AI ROADMAP — page sections. Copy follows the brief: short, plain,
   no buzzwords, no em dashes, headlines under 12 words.
   ════════════════════════════════════════════════════════════════════ */

/* ── Decidr logo (real brand lockup) ── */
function Brand({ height = 26 }) {
  return (
    <a href="#top" className="brand" aria-label="Decidr">
      <img src={(window.__resources && window.__resources.decidrLogo) || "assets/decidr-logo.png"} alt="Decidr" className="brand-logo" style={{ height }} />
    </a>);
}

/* ── Header ── */
function Header() {
  return (
    <header className="hdr" data-screen-label="01 Header">
      <div className="container hdr-in">
        <Brand />
        <a href="#book" className="btn btn-primary btn-sm">Book a discovery call<i className="ph ph-arrow-right"></i></a>
      </div>
    </header>);
}

/* ── Hero ── */
const HERO_OPENERS = {
  statement: <>Your 12-month AI roadmap<br /><em className="hi hi-ink">built in 30 days.</em></>,
  reframe: <>Your team got 10% faster. <em className="hi">Your business didn't change.</em></>,
  question: <>What happens after the AI pilot? <em className="hi">For most teams, nothing.</em></>,
};

function Hero({ opener = "statement" }) {
  return (
    <section className="hero" id="top" data-screen-label="02 Hero">
      <div className="aurora"></div>
      <div className="container">
        <h1 className="h1">{HERO_OPENERS[opener]}</h1>
        <p className="lead">
          The AI Roadmap is a 30-day discovery that maps how your business actually runs, finds where AI pays back first,
          then sequences a 12-month build you can execute.
        </p>
        <div className="hero-cta">
          <a href="#book" className="btn btn-primary btn-lg">Book a discovery call<i className="ph ph-arrow-right"></i></a>
        </div>
        <div className="hero-meta">15-minute call · No prep required · No pitch deck</div>
      </div>
    </section>);
}

/* ── Interactive 3-phase roadmap ── */
const PHASES = [
  {
    tag: "Phase 1", t: "Define & migrate", d: "0 – 90 days",
    strap: <>The highest-leverage build, <em className="hi">first.</em></>,
    sum: "Existing tools integrated in the platform, workflows rebuilt natively, turning your business goals into a system that executes.",
    builds: [
      ["robot", "Agent platform", "Analytics and Ads Audit workflows rebuilt in DecidrOS"],
      ["file-text", "Client reporting GPT", "First-draft reports, ready for review in under 10 minutes"],
      ["shield-check", "Workflow compliance agent", "Monitors checkpoints and alerts the team in real time"],
    ],
    powered: ["Agent Builder", "Decidr Chat"],
  },
  {
    tag: "Phase 2", t: "Build & automate", d: "90 – 180 days",
    strap: <>Your agentic workflows, <em className="hi">built within the platform.</em></>,
    sum: "The commercial suite drafts proposals and qualifies prospects from your own records, so high-frequency work stops being manual.",
    builds: [
      ["note-pencil", "Proposal generator", "SoWs and proposals from your catalogue and client record"],
      ["funnel", "ICP definer & qualifier", "Every prospect scored automatically, with auditable reasoning"],
      ["paper-plane-tilt", "Personalised outreach", "Drafts grounded in prospect records, with conversion analytics"],
    ],
    powered: ["Commercial Suite", "Agent Builder"],
  },
  {
    tag: "Phase 3", t: "Scale & evolve", d: "180 – 365 days",
    strap: <>The system improves <em className="hi">its own workflows.</em></>,
    sum: "Intelligence across the whole business, surfacing risk and opportunity before you go looking for it.",
    builds: [
      ["chats-circle", "Intelligence from your data", "Interrogate, plan and execute in plain language"],
      ["heartbeat", "Client health tracking", "Sentiment over time surfaces at-risk accounts early"],
      ["binoculars", "Competitive monitoring", "Tracks rivals' pricing and positioning, and flags what's changed"],
    ],
    powered: ["Chat", "Metrics", "Golden Record"],
  },
];

function PhaseMap() {
  const [active, setActive] = React.useState(0);
  const p = PHASES[active];
  const fillPct = (active / (PHASES.length - 1)) * 66.66;

  return (
    <section className="section rm-sec" id="roadmap" data-screen-label="03 The roadmap">
      <div className="container">
        <div className="sec-head center reveal-up">
          <span className="eyebrow"><span className="dot"></span> The roadmap</span>
          <h2 className="h2">Twelve months, <em className="hi">in three phases.</em></h2>
          <p className="lead">Each phase ships value before the next begins. Tap a phase to see what gets built.</p>
        </div>

        <div className="rm-track reveal-up" role="tablist" aria-label="Roadmap phases">
          <div className="rm-rail"></div>
          <div className="rm-rail rm-rail-fill" style={{ width: `${fillPct}%` }}></div>
          {PHASES.map((ph, i) => {
            const state = i === active ? "is-active" : i < active ? "is-done" : "";
            return (
              <button key={ph.tag} role="tab" aria-selected={i === active}
                className={`rm-node ${state}`} onClick={() => setActive(i)}>
                <span className="rm-dot">{i < active ? <i className="ph-bold ph-check"></i> : i + 1}</span>
                <span className="rm-tag">{ph.tag}</span>
                <span className="rm-ttl">{ph.t}</span>
                <span className="rm-when">{ph.d}</span>
              </button>
            );
          })}
        </div>

        <div className="rm-detail" key={active}>
          <div className="rm-detail-head">
            <div>
              <h3 className="rm-strap">{p.strap}</h3>
              <p className="rm-sum">{p.sum}</p>
            </div>
          </div>
          <div className="rm-builds">
            {p.builds.map(([ic, t, d], i) => (
              <div className="rm-build" key={t} style={{ animationDelay: `${i * 70}ms` }}>
                <span className="rm-build-ic"><i className={`ph ph-${ic}`}></i></span>
                <div className="rm-build-t">{t}</div>
                <div className="rm-build-d">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>);
}

/* ── Trust strip (real partner logos) ── */
const PARTNERS = [
  ["mercha", "Mercha", 30],
  ["careerone", "CareerOne", 26],
  ["rumi", "Rumi", 30],
  ["cohabit", "Cohabit", 28],
  ["ebev", "eBev", 38],
];
function Trust() {
  const res = (typeof window !== "undefined" && window.__resources) || {};
  return (
    <div className="trust" data-screen-label="03 Partners">
      <div className="container">
        <div className="trust-label">Trusted by the teams we build with</div>
        <div className="trust-row">
          {PARTNERS.map(([id, name, h]) => (
            <span className={"trust-logo" + (id === "elmo" ? " is-mono" : "")} key={id}>
              <img src={res["partner_" + id] || `assets/partners/${id}.png`} alt={name} style={{ height: h }} />
            </span>
          ))}
        </div>
      </div>
    </div>);
}

/* ── Problem ── */
const STATS = [
  { num: <>72<span className="u">%</span></>, label: "of leaders are stuck in pilot purgatory", sub: "fragmented AI that never reaches the business" },
  { num: <>58</>, label: "apps the average SMB runs", sub: "none of them agree on the numbers" },
  { num: <>80<span className="u">%</span></>, label: "of how your business runs is undocumented", sub: "it lives in people, not the system" },
];

function Problem() {
  return (
    <section className="section soft" id="problem" data-screen-label="04 The problem">
      <div className="container">
        <div className="sec-head center reveal-up">
          <h2 className="h2">You don't lack software. <em className="hi">You lack a system that decides.</em></h2>
          <p className="lead">You have a CRM, dashboards and workflow tools. What you don't have is one place where decisions get made, recorded and checked.</p>
        </div>

        <div className="prob-stats">
          {STATS.map((s, i) =>
            <div className="stat reveal-up" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="stat-num">{s.num}</div>
              <div className="stat-label">{s.label}</div>
              <div className="stat-sub">{s.sub}</div>
            </div>
          )}
        </div>

        <div className="prob-two">
          <div className="prob-copy reveal-up">
            <p className="first">ChatGPT made your team faster. It didn't change your business.</p>
            <p>Faster email. Faster first drafts. The work still runs through the same people, the same spreadsheets, the same judgment that lives in one person's head. That is grease on the gears. It is not a new machine.</p>
            <p>Tools sit side by side and never agree. Definitions drift. Decisions get made in chat and forgotten. The more you add, the more the work turns into <strong>politics and rework</strong>.</p>
          </div>
          <figure className="prob-quote reveal-up">
            <div className="cover-gradient"></div>
            <div className="label">From a real discovery</div>
            <blockquote>"We rely solely on people right now."</blockquote>
          </figure>
        </div>
      </div>
    </section>);
}

/* ── How it works ── */
const STEPS = [
  {
    n: 1, h: <>We map how you <em className="hi">actually work.</em></>,
    p: "A structured 30-day discovery across operations, technology, people and the knowledge nobody wrote down. We capture the current state clearly and honestly, grounded in how you run today.",
    tags: [["magnifying-glass", "30-day discovery"], ["users-three", "Tacit knowledge"], ["path", "Current state"]],
    Media: window.MockDiscovery,
  },
  {
    n: 2, h: <>We find where AI <em className="hi">pays off first.</em></>,
    p: "We identify the points where work is most fragile and AI creates the most value. Then we sequence them, so you build the thing that pays back fastest, not the thing that demos best.",
    tags: [["target", "Highest leverage"], ["stack", "Three themes"], ["calendar-dots", "12-month plan"]],
    Media: window.MockThemes,
  },
  {
    n: 3, h: <>We build it on one <em className="hi">operating system.</em></>,
    p: "Each build runs on DecidrOS. Canonical records, versioned decisions, inspectable flows. You can open any action and see what ran, when and why. Every outcome is measured against a number you agreed.",
    tags: [["shield-check", "Deterministic"], ["eye", "Inspectable"], ["gauge", "Measured"]],
    Media: window.MockFlow,
  },
];

function HowItWorks() {
  return (
    <section className="section" id="how" data-screen-label="05 How it works">
      <div className="container">
        <div className="steps">
          {STEPS.map((s) =>
            <div className="step" key={s.n}>
              <div className="step-copy reveal-up">
                <h3 className="h3">{s.h}</h3>
                <p>{s.p}</p>
              </div>
              <div className="step-media reveal-up">
                <s.Media />
              </div>
            </div>
          )}
        </div>

        <div className="how-cta reveal-up">
          <a href="#book" className="btn btn-primary btn-lg">Book a discovery call<i className="ph ph-arrow-right"></i></a>
        </div>
      </div>
    </section>);
}

/* ── Mercha case study ── */
const MERCHA_META = [
  ["Company", "Mercha - branded merchandise"],
  ["Location", "Sydney, Australia"],
  ["Business", "Lean, high-growth SME · 12 core staff"],
  ["Starting point", "~200 instant quotes a month"],
];
const MERCHA_STATS = [
  { n: <>10<span className="u"> sec</span></>, l: "to generate a tailored proposal, down from 2\u20133 hours" },
  { n: <>~200</>, l: "monthly quotes upgraded to branded proposals" },
  { n: <>1000s</>, l: "of proposals a month, no added headcount" },
  { n: <>2<span className="u">×</span></>, l: "revenue growth year on year" },
];

function CaseStudy() {
  return (
    <section className="section soft" id="case" data-screen-label="06 Case study">
      <div className="container">
        <div className="sec-head reveal-up">
          <span className="eyebrow"><span className="dot"></span> Case study</span>
          <h2 className="h2">Mercha scaled revenue <em className="hi">without adding headcount.</em></h2>
          <p className="lead">A lean merchandise company didn't wait for a perfect plan. They picked their highest-value process and rebuilt it on one operating layer.</p>
        </div>

        <div className="cs-grid reveal-up">
          <div className="cs-story">
            <dl className="cs-meta">
              {MERCHA_META.map(([k, v]) =>
                <div className="cs-meta-row" key={k}>
                  <dt>{k}</dt>
                  <dd>{v}</dd>
                </div>
              )}
            </dl>
            <p>Mercha was growing fast, but proposals were built by hand - <strong>2&ndash;3 hours each</strong>, from scratch, every time. Around 75% of inbound never converted. Working with Decidr, they built a Proposal Generator: an agentic app that enriches each lead and produces a tailored, branded proposal in seconds.</p>
            <p>That structure doesn't stop at proposals. The same operating layer extends to qualification, pricing, resourcing and forecasting - each one a decision system that improves over time.</p>
            <blockquote className="cs-quote">
              <p>&ldquo;We&rsquo;re a technology business. We want to scale revenue without just throwing bodies at it.&rdquo;</p>
              <footer><img className="cs-quote-photo" src={(window.__resources && window.__resources.benRead) || "assets/ben-read.jpeg"} alt="Ben Read" /><span className="cs-quote-id"><span className="cs-quote-name">Ben Read</span><span className="cs-quote-role">CEO, Mercha</span></span></footer>
            </blockquote>
          </div>

          <aside className="cs-flow">
            <div className="cs-flow-k">The entry point</div>
            <h3 className="cs-flow-h">The Proposal Generator</h3>
            <ol className="cs-steps">
              <li><span className="cs-step-n">1</span><div><strong>Select the lead</strong><p>A promising lead is identified in DecidrOS.</p></div></li>
              <li><span className="cs-step-n">2</span><div><strong>Enrich the context</strong><p>Company size, website, LinkedIn, logo, offerings and fit &mdash; a structured picture in seconds.</p></div></li>
              <li><span className="cs-step-n">3</span><div><strong>Generate the proposal</strong><p>Product recommendations, tiered pricing and branded mock-ups, with a traceable link.</p></div></li>
              <li><span className="cs-step-n">4</span><div><strong>Review and send</strong><p>The team edits if needed and sends. Trackable links feed conversion data back in.</p></div></li>
            </ol>
          </aside>
        </div>

        <div className="case reveal-up">
          {MERCHA_STATS.map((c, i) =>
            <div className="case-cell" key={i}>
              <div className="n">{c.n}</div>
              <div className="l">{c.l}</div>
            </div>
          )}
        </div>
        <div className="case-cta reveal-up">
          <a href="#book" className="btn btn-primary btn-lg">Book a discovery call<i className="ph ph-arrow-right"></i></a>
        </div>
      </div>
    </section>);
}

const CASE = [
  { n: <>30<span className="u"> days</span></>, l: "to map how your business actually runs" },
  { n: <>3</>, l: "phases, sequenced by payback" },
  { n: <>1</>, l: "operating system underneath every build" },
];

/* ── Why Decidr (assurances) ── */
const ASSURE = [
  { ic: "ph-users-three", h: "Engineers, not advisers", p: "Forward-deployed Decidr engineers build your AI organisation directly. Not a deck, not a discovery report that sits in a drawer." },
  { ic: "ph-eye", h: "You can inspect everything", p: "Canonical records, versioned decisions, deterministic flows. Open any action and see exactly what ran, when and why." },
  { ic: "ph-gauge", h: "Measured against a number", p: "We agree a KPI before we build, then report uplift and cost per action. You get value per action, not a surprise bill." },
  { ic: "ph-stack", h: "One system, not 58 tools", p: "The build runs on one operating layer. One definition per entity, one place decisions get made and checked." },
];

function Assurances() {
  return (
    <section className="section" id="assurance" data-screen-label="08 Why Decidr">
      <div className="container">
        <div className="sec-head center reveal-up">
          <span className="eyebrow"><span className="dot"></span> Why Decidr</span>
          <h2 className="h2">You see what changes <em className="hi">on day one.</em></h2>
        </div>
        <div className="assure">
          {ASSURE.map((a, i) =>
            <article className="assure-card reveal-up" key={a.h} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="assure-ic"><i className={`ph ${a.ic}`}></i></div>
              <h3>{a.h}</h3>
              <p>{a.p}</p>
            </article>
          )}
        </div>
      </div>
    </section>);
}

Object.assign(window, { Brand, Header, Hero, PhaseMap, Trust, Problem, HowItWorks, CaseStudy, Assurances });