/* eslint-disable */
// Rebuild (brief v4), shared pieces: decision markers, story cards, FAQ accordion, proof strip.

// ---------- Decision register ----------
// Every open call from the merge proposal + the brief's own open items.
// Rendered inline where the decision bites, and listed on #decisions.
const DECISIONS = [
  {
    id: "D01", title: "Services overview page and the Service Finder quiz",
    where: "Home / navigation",
    q: "The two doors are now the router, so a Services overview page sits between Home and the thing you came for. Does it go? And does the Service Finder quiz go with it?",
    options: ["Retire the page, move the quiz to Contact", "Retire both", "Keep the overview page"],
    rec: "Retire the page. The quiz is genuinely useful, so give it a home on Contact as a \"not sure which door?\" module.",
    goto: "services", gotoLabel: "See the old Services page",
  },
  {
    id: "D02", title: "Literacy and Governance as depth pages",
    where: "AI Foundations",
    q: "The brief treats the three pillars as inline sections on one page. We already have full pages for Literacy and Governance. Keep them as depth pages behind the pillar, or fold their content in and delete them?",
    options: ["Keep both, linked from the pillar, out of the nav", "Fold in and retire", "Keep in the nav"],
    rec: "Keep them, out of the nav. The brief also asks for a citable depth layer, and Governance in particular (Privacy Act ADM deadline, data classification) is exactly what AI engines quote.",
    goto: "governance", gotoLabel: "See the Governance page",
  },
  {
    id: "D03", title: "AI Setup",
    where: "AI Foundations",
    q: "The brief's triangle is Value, Controls, Literacy. There is no tools leg, so the AI Setup service has nowhere to sit as a service. Absorb it into Value, or is setup still something you sell in its own right?",
    options: ["Absorb into Value as the tool decision", "Keep as a named service"],
    rec: "Absorb. The \"which core tool fits how you work\" claim is already the Value pillar, and the rollout work becomes delivery detail.",
    goto: "ai-setup", gotoLabel: "See the AI Setup page",
  },
  {
    id: "D04", title: "The AI Blueprint page",
    where: "AI Foundations",
    q: "The brief says no separate Blueprint page: it becomes the fullest expression of Value. Do we retire the page, and what happens to its content?",
    options: ["Retire, redirect to Foundations", "Keep as a depth page like Governance"],
    rec: "Retire the page. The copy becomes the Value pillar, the \"What's in an AI Blueprint?\" FAQ answer, and the first white paper.",
    goto: "blueprint", gotoLabel: "See the Blueprint page",
  },
  {
    id: "D05", title: "Fixed-Scope Builds and Custom Builds",
    where: "AI Accelerators",
    q: "Three build pages collapse into one Accelerators page, and the fixed-scope versus custom split is replaced by the brief's two ways in. Does the fixed-scope framing disappear entirely?",
    options: ["Retire the split, keep fixed price as a commercial note", "Keep fixed-scope as a named product"],
    rec: "Retire the split. Fixed price still gets said, on How we work and in the cost FAQ, but it stops being a product shelf.",
    goto: "quick-wins", gotoLabel: "See Fixed-Scope Builds",
  },
  {
    id: "D06", title: "Workflow AI is back",
    where: "AI Toolbox",
    q: "We retired Workflow AI in June and folded it into Agentic, following your V2 tag doc. The brief's Toolbox relabelling reinstates it as \"Automation and workflows\". Which is current?",
    options: ["Reinstate, Toolbox only", "Stays folded into Agents", "Reinstate everywhere"],
    rec: "Reinstate for the Toolbox only. It is tool filing, and the distinction is real for tools. The services area carries no taxonomy at all, which the brief already asks for.",
    goto: "toolbox", gotoLabel: "See the Toolbox",
  },
  {
    id: "D07", title: "Pillar colours after the collapse",
    where: "Design system",
    q: "Blue, green and amber were built for Strategy, Foundations and Build. With two doors, what carries the colour?",
    options: ["Foundations green, Accelerators amber", "Foundations blue, Accelerators cyan", "No pillar colours at all"],
    rec: "Foundations green, Accelerators amber. Blue goes back to being the brand primary rather than a pillar colour. No new colours needed.",
  },
  {
    id: "D08", title: "Purpose, Mission and Values page",
    where: "About / How we work",
    q: "The brief puts values on How we work and keeps About short. What happens to the PMV page, and to the 99% / 4.7M / 48% stats that were already flagged for confirmation?",
    options: ["Values to How we work, purpose and mission into About, retire the page", "Keep PMV as a page", "Retire all of it"],
    rec: "Split it and retire the page. Drop the three stats unless there is a source, per the no-invented-specifics rule.",
    goto: "about-pmv", gotoLabel: "See the PMV page",
  },
  {
    id: "D09", title: "Em dashes and \"program\"",
    where: "Sitewide copy",
    q: "The brief bans em dashes outright and specifies \"program\" not \"program\". The current copy uses em dashes heavily as a rhythm device.",
    options: ["Full recast pass", "Keep em dashes", "Ban them in new copy only"],
    rec: "Full pass, budgeted as its own task. It is not a find and replace: most instances need recasting into commas, colons or two sentences. New pages built in this rebuild already have none.",
  },
  {
    id: "D10", title: "Client links in the header",
    where: "Navigation",
    q: "The Playground link is new. The current site also links the Atlassian service desk for support clients. One client door or two?",
    options: ["Playground only, service desk linked from inside it", "Both links in the header"],
    rec: "One door. Cleaner header, and the Playground can carry the service desk link.",
  },
  {
    id: "D11", title: "The values themselves",
    where: "How we work",
    q: "\"You are family\", \"You come first\" and \"Local loyalty\" came from the existing materials. The brief flags all three for review as the business scales.",
    options: ["Keep all three, reworded", "Replace one or more", "Drop the values strip"],
    rec: "Keep three values, one sentence each. Wording below is a first pass and needs your call, particularly on \"You are family\".",
  },
  {
    id: "D12", title: "What the proof strip says at launch",
    where: "Home",
    q: "The industry-breadth line holds the spot now. Which testimonials replace it, and are they re-permissioned?",
    options: ["Industry line at launch, testimonials when permissions land", "Hold launch for testimonials"],
    rec: "Ship the industry line, swap in two or three named quotes as the harvest lands. The component handles both states so there is no redesign later.",
  },
  {
    id: "D13", title: "Toolbox category names",
    where: "AI Toolbox",
    q: "The brief proposes plain-language names (Everyday assistants, Agents, Voice and chat, Data and analysis, Knowledge and search, Specialist task tools) with the former name as a muted helper chip. Confirm?",
    options: ["Adopt as proposed", "Adopt with changes", "Keep current names"],
    rec: "Adopt as proposed, with the helper chips retiring in a later release once the names bed in. Redirects stay one to one either way.",
  },
  {
    id: "D14", title: "Outcome lines for the story cards",
    where: "AI Foundations / AI Accelerators",
    q: "Every engagement shape and build story is drafted from the tracker and is missing its outcome line. Six chases are open (CS-006, CS-017, CS-049, CS-011, CS-018, CS-034).",
    options: ["Ship with outcome lines", "Ship without, add later", "Different stories"],
    rec: "The cards are built to hold the line as soon as it lands. Nothing goes live until each one has its outcome and sign-off.",
  },
  {
    id: "D15", title: "The team on About",
    where: "About",
    q: "Team shown as a group, no individual as the face of the business. Titles are pending in the brand asset library and each person needs to consent to being named and pictured.",
    options: ["Names and photos", "Photos only, no names", "Group photo only"],
    rec: "Names and photos, one sentence each at most, once titles are confirmed and everyone has said yes.",
  },
  {
    id: "D16", title: "Bylines on migrated blog posts",
    where: "Blog",
    q: "New posts show Intelligence Assist as the author, consistent with the no-face-of-the-business rule. Existing bylined posts: reattribute or leave?",
    options: ["Reattribute all", "Leave existing as they are"],
    rec: "Leave existing posts alone. Reattributing old bylines reads as tidying history for no reader benefit.",
  },
  {
    id: "D17", title: "How calm is the Home hero",
    where: "Home",
    q: "The brief asks for a visually calm hero that persuades by economy. The built hero is a composed sticker board of floating chips, and it is a lot of the site's character. We have kept it and re-cast the chips to the new vocabulary rather than stripping the page back.",
    options: ["Keep the board, new vocabulary", "Strip back to type only", "Board on Home, calm on service pages"],
    rec: "Keep it. The economy the brief asks for is in the word count, which is now roughly 250, not in removing the identity. The chips no longer advertise the retired taxonomy.",
    goto: "home-v1", gotoLabel: "See the previous Home",
  },
  {
    id: "D18", title: "The CTA wording",
    where: "Sitewide",
    q: "The brief's CTA is \"Book a conversation\" throughout. The build says \"Talk to us\" in the nav and \"Book a Blueprint\" at the foot of most pages.",
    options: ["Book a conversation everywhere", "Talk to us in nav, book a conversation in body"],
    rec: "One phrase everywhere. \"Book a Blueprint\" retires with the Blueprint page.",
  },
  {
    id: "D20", title: "The concierge chatbot",
    where: "Sitewide",
    q: "The floating concierge still offers quick replies for retired pages (Fixed-Scope Builds vs Custom Builds). Its script needs re-pointing at the two doors, and there is a prior question of whether it ships at launch at all.",
    options: ["Ship it, re-pointed", "Hold until after launch", "Drop it"],
    rec: "Re-point the script at Foundations and Accelerators before it goes anywhere. Whether it launches is a support-capacity question more than a design one.",
  },
  {
    id: "D19", title: "Where Our Work sits",
    where: "Navigation",
    q: "The brief groups FAQs, Our Work and Blog under Resources to keep the header to seven items. Case studies are currently top level.",
    options: ["Under Resources", "Top level"],
    rec: "Under Resources for now. If proof turns out to be the thing that converts, promote it later. Easy to change.",
  },
];
const DECISION_BY_ID = Object.fromEntries(DECISIONS.map((d) => [d.id, d]));

// ---------- Inline decision marker ----------
function Decision({ id, compact = false }) {
  const d = DECISION_BY_ID[id];
  const [open, setOpen] = React.useState(!compact);
  if (!d) return null;
  return (
    <div className={"decision" + (compact ? " decision--compact" : "")} id={`decision-${d.id}`}>
      <button className="decision-head" onClick={() => setOpen(!open)}>
        <span className="decision-id">Decision {d.id}</span>
        <span className="decision-title">{d.title}</span>
        <Icon name={open ? "minus" : "plus"} size={16} color="#8A6A12" />
      </button>
      {open && (
        <div className="decision-body">
          <p className="decision-q">{d.q}</p>
          <div className="decision-opts">
            {d.options.map((o, i) => <span key={i} className="decision-opt">{o}</span>)}
          </div>
          <p className="decision-rec"><strong>Our recommendation.</strong> {d.rec}</p>
          {d.goto && (
            <button className="linkout decision-goto" onClick={() => { window.location.hash = d.goto; requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "instant" })); }}>
              {d.gotoLabel}<Icon name="arrow-right" size={14} className="arrow" />
            </button>
          )}
        </div>
      )}
    </div>
  );
}

// ---------- CTA review note ----------
// Sits beside every "Book a conversation" CTA. Hidden with the rest of the
// review layer when the Decisions toggle is off.
function CtaNote({ note, className = "" }) {
  return (
    <div className={"cta-note " + className}>
      <span className="cta-note-tag">For Janey to decide</span>
      <span className="cta-note-body">{note || "Every CTA says \u201cBook a conversation\u201d, but Contact opens on the Send us a note form, not the booking calendar. Change the default tab, or change the wording?"}</span>
    </div>
  );
}

// ---------- Draft / placeholder status flag ----------
function Status({ level = "draft", note, label: labelProp }) {
  const label = labelProp || (level === "placeholder" ? "Placeholder copy" : level === "final" ? "Approved copy" : level === "decision" ? "For Janey to decide" : "Draft copy");
  const [pos, setPos] = React.useState(null);
  const ref = React.useRef(null);
  const show = () => { const r = ref.current.getBoundingClientRect(); setPos({ top: r.bottom + 6, left: Math.min(r.left, window.innerWidth - 420) }); };
  React.useEffect(() => {
    if (!pos) return;
    const reposition = () => { if (ref.current) { const r = ref.current.getBoundingClientRect(); setPos({ top: r.bottom + 6, left: Math.min(r.left, window.innerWidth - 420) }); } };
    const onKey = (e) => { if (e.key === "Escape") setPos(null); };
    window.addEventListener("scroll", reposition, true);
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("scroll", reposition, true); window.removeEventListener("keydown", onKey); };
  }, [!!pos]);
  if (!note) return <div className={`status-flag status-flag--${level}`}><span className="dotk" />{label}</div>;
  return (
    <button ref={ref} type="button" className={`status-flag status-flag--${level} status-flag--tip${pos ? " is-open" : ""}`} aria-expanded={!!pos}
      onMouseEnter={show} onMouseLeave={() => setPos(null)} onFocus={show} onBlur={() => setPos(null)}
      onClick={(e) => { e.stopPropagation(); pos ? setPos(null) : show(); }}>
      <span className="dotk" />{label}
      {pos ? ReactDOM.createPortal(<span className="status-note-pop" style={{ top: pos.top, left: pos.left }}>{note}</span>, document.body) : null}
    </button>
  );
}

// ---------- Story card ----------
// One component for Foundations engagement shapes and Accelerators build stories.
function StoryCard({ sector, body, outcome, pending, tone = "enable" }) {
  return (
    <div className="story-card" style={{ ["--sc"]: `var(--pl-${tone}-fg)`, ["--scbg"]: `var(--pl-${tone}-bg)` }}>
      <div className="story-sector">{sector}</div>
      <p className="story-body">{body}</p>
      <div className="story-outcome">
        {outcome ? <span>{outcome}</span> : <span className="story-pending">Outcome line pending, tracker {pending}</span>}
      </div>
    </div>
  );
}

// ---------- FAQ accordion (+ FAQPage JSON-LD) ----------
function FaqAccordion({ items, id }) {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const el = document.createElement("script");
    el.type = "application/ld+json";
    el.dataset.faq = id || "faq";
    el.textContent = JSON.stringify({
      "@context": "https://schema.org", "@type": "FAQPage",
      mainEntity: items.map((f) => ({ "@type": "Question", name: f.q, acceptedAnswer: { "@type": "Answer", text: f.a } })),
    });
    document.head.appendChild(el);
    return () => el.remove();
  }, [items, id]);
  return (
    <div className="faq-list">
      {items.map((f, i) => (
        <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`} id={`faq-${(id || "q")}-${i + 1}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
            <span>{f.q}</span>
            <Icon name={open === i ? "minus" : "plus"} size={20} color="var(--ia-blue)" />
          </button>
          {open === i && <div className="faq-a">{f.a}</div>}
        </div>
      ))}
    </div>
  );
}

// ---------- Proof strip (two states) ----------
function ProofStrip({ mode = "industries" }) {
  if (mode === "industries") {
    return (
      <div className="proof-strip">
        <span className="proof-strip-lead">Delivered across</span>
        <span className="proof-strip-list">hospitality, allied health, architecture, water, logistics and construction.</span>
      </div>
    );
  }
  return null;
}

Object.assign(window, { DECISIONS, DECISION_BY_ID, Decision, Status, StoryCard, FaqAccordion, ProofStrip });