/* eslint-disable */
// AI Governance page, reframed around the "Controls" point of view from the
// HR AI Talk deck. Governance is communicated as a PRACTICE, not a tiered product:
//   1. A working policy is carrot AND stick
//   2. Data classification decides which tools touch which data
//   3. The Privacy Act ADM amendments (10 December 2026)
//   4. Boards have obligations a briefing does not discharge
// The old Foundational / Intermediate / Advanced tier model has been retired.

const POLICY = {
  carrot: {
    label: "Carrot · makes use safe",
    head: "What your team can do, where, and with what data.",
    points: [
      "Sanctioned tools named, by plan tier",
      "Permission to disclose AI use without penalty",
      "Champions encouraged, not policed",
    ],
  },
  stick: {
    label: "Stick · enforces classification",
    head: "What cannot happen, with which data, on which tools.",
    points: [
      "Personal accounts out of bounds for sensitive data",
      "Classification breaches handled like any data breach",
      "Automated decisions logged and reviewable",
    ],
  },
};

const CLASSIFICATION = [
  { n: "01", name: "Unclassified", desc: "Public information, marketing collateral, published reports." },
  { n: "02", name: "Official", desc: "Routine business information, internal documents, basic correspondence." },
  { n: "03", name: "Official: Sensitive", desc: "Personal information, commercial-in-confidence, draft policy." },
  { n: "04", name: "Protected", desc: "Information whose compromise could cause real damage." },
];

const CORE_SERVICES = [
  { name: "AI Use Policy, carrot and stick", desc: "A working Acceptable Use policy that enables disclosure as much as it enforces the rules.", icon: "file-text" },
  { name: "Data classification", desc: "Match each kind of data to the tools and contracts allowed to touch it.", icon: "layers" },
  { name: "Automated decision review", desc: "Find where AI makes or shapes decisions about people, and make them reviewable.", icon: "scale" },
  { name: "Board & leadership governance", desc: "Hands-on sessions that actually discharge obligations, not a briefing.", icon: "users" },
  { name: "Ongoing practice", desc: "Reviews and updates as your AI use grows, governance as a habit, not a one-off.", icon: "rotate-ccw" },
];

const GOV_NAV = [
  { id: "gov-policy", label: "Policy" },
  { id: "gov-classification", label: "Classification" },
  { id: "gov-deadline", label: "The deadline" },
  { id: "gov-faq", label: "FAQ" },
];
const CLASS_COLORS = ["var(--ia-blue-200)", "var(--ia-blue)", "var(--ia-blue-700)", "var(--ia-dark-blue)"];

function scrollToSection(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const target = el.getBoundingClientRect().top + window.scrollY - 132;
  window.scrollTo(0, target);
}

function GovSubnav() {
  const [active, setActive] = React.useState(GOV_NAV[0].id);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-140px 0px -60% 0px", threshold: 0 });
    GOV_NAV.forEach((n) => { const el = document.getElementById(n.id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);
  return (
    <nav className="gov-subnav" aria-label="On this page">
      <div className="container gov-subnav-inner">
        <span className="gov-subnav-label">On this page</span>
        {GOV_NAV.map((n) => (
          <button key={n.id} className={"gov-subnav-link" + (active === n.id ? " is-active" : "")} onClick={() => scrollToSection(n.id)}>
            {n.label}
          </button>
        ))}
      </div>
    </nav>
  );
}

function GovernanceScreen({ go, t }) {
  return (
    <div data-screen-label="10 AI Governance">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Foundations", "AI Governance"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="enable" dot>Foundations</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                AI governance is a <em>practice, not an event.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                We help Australian SMBs put real guardrails around AI, a policy that enables
                as much as it restricts, data classification that decides which tools touch which
                data, and a clear line on automated decisions. Sized to your team, without the
                enterprise overhead.
              </p>
              <button className="gov-deadline-pill" onClick={() => scrollToSection("gov-deadline")}>
                <Icon name="calendar-clock" size={15} color="var(--ia-blue)" />
                <span>Privacy Act ADM rules take effect <strong>10 Dec 2026</strong></span>
                <Icon name="arrow-right" size={13} className="arrow" />
              </button>
            </div>

            <div className="card" style={{ padding: 28, background: "#fff" }}>
              <div className="enb-card-head">
                <EnablementMiniTriangle active="governance" />
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "var(--ia-blue)" }}>Foundations</div>
                  <div style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500, marginTop: 2 }}>Sets <strong>the rules</strong></div>
                </div>
              </div>
              <hr className="divider" style={{ margin: "14px 0" }} />
              <Glance label="Approach" value="Carrot and stick · risk-first" />
              <Glance label="Aligned to" value="Privacy Act ADM, ISO 38507, VAISS" />
              <Glance label="Outputs" value="AI policy, classification model, accountability map" />
              <Glance label="Best for" value="Any SMB using or planning to use AI" />
              <Glance label="Pairs with" value="AI Setup, AI Literacy" last />
            </div>
          </div>
        </div>
      </section>

      {/* CARROT AND STICK */}
      <section id="gov-policy" className="section section--white" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Policy methodology</Eyebrow>
            <h2 className="h-section">A working AI policy is carrot <em style={{ fontStyle: "normal", color: "var(--ia-blue)" }}>and</em> stick. Most are only one.</h2>
            <p className="lede">
              A policy that is all restriction drives AI underground; a policy that is all
              encouragement leaves your data exposed. We write both sides, calibrated to the
              data, not to job titles.
            </p>
          </div>

          <div className="gov-duo">
            <div className="gov-side gov-side--carrot">
              <div className="gov-side-lbl">{POLICY.carrot.label}</div>
              <h3>{POLICY.carrot.head}</h3>
              <ul>
                {POLICY.carrot.points.map((p, i) => <li key={i}>{p}</li>)}
              </ul>
            </div>
            <div className="gov-side gov-side--stick">
              <div className="gov-side-lbl">{POLICY.stick.label}</div>
              <h3>{POLICY.stick.head}</h3>
              <ul>
                {POLICY.stick.points.map((p, i) => <li key={i}>{p}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* DATA CLASSIFICATION */}
      <section id="gov-classification" className="section section--paper" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Classification matters, not geography</Eyebrow>
            <h2 className="h-section">Where does your data actually sit?</h2>
            <p className="lede">
              The right control is not the same for every file. We classify your data, then match
              each level to the tools and contracts allowed to handle it, so permissions
              follow the sensitivity of the work, not someone&rsquo;s seniority.
            </p>
          </div>

          <div className="gov-class">
            {CLASSIFICATION.map((c, i) => (
              <div key={c.n} className="gov-class-row" style={{ marginLeft: i * 22, borderLeftWidth: 4, borderLeftStyle: "solid", borderLeftColor: CLASS_COLORS[i] }}>
                <div className="gov-class-n">{c.n}</div>
                <div className="gov-class-name">{c.name}</div>
                <div className="gov-class-desc">{c.desc}</div>
              </div>
            ))}
          </div>

          <p className="gov-pullout">
            The question is not <strong>&ldquo;can this tool be used here?&rdquo;</strong> It is{" "}
            <strong>&ldquo;what conditions need to be true for this classification?&rdquo;</strong>
          </p>
        </div>
      </section>

      {/* PRIVACY ACT, ADM DEADLINE */}
      <section id="gov-deadline" className="section section--ink" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="container">
          <div className="gov-adm">
            <div>
              <div className="gov-adm-date">10</div>
              <div className="gov-adm-month">December 2026</div>
              <div className="gov-adm-src">
                Privacy and Other Legislation Amendment Act 2024<br />
                Australian Government &middot; Attorney-General&rsquo;s Department
              </div>
            </div>
            <div>
              <Eyebrow>Privacy Act amendments</Eyebrow>
              <h2 className="h-section" style={{ marginTop: 10, marginBottom: 18 }}>
                Automated Decision Making provisions take effect.
              </h2>
              <p className="lede" style={{ marginBottom: 22 }}>
                Automated Decision Making is a decision made by software with no meaningful human
                review, hiring filters, performance scoring, leave approvals run by algorithm.
                From this date, people can demand to know how those decisions were made.
              </p>
              <p style={{ fontSize: 19, fontWeight: 500, lineHeight: 1.5, color: "#fff", margin: 0, letterSpacing: "-0.01em" }}>
                If AI <strong style={{ fontWeight: 600 }}>makes or substantially helps make</strong> a
                decision about a person, your privacy policy now has to say so. We find those
                decisions and make them reviewable before the deadline.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PROOF, healthcare governance case study */}
      <section className="section section--paper" style={{ paddingTop: 8, paddingBottom: 8 }}>
        <div className="container">
          <div className="gov-proof">
            <div className="gov-proof-metric">
              <span className="v">VAISS</span>
              <span className="l">aligned across 5 sites</span>
            </div>
            <div className="gov-proof-body">
              <Eyebrow>Proof</Eyebrow>
              <h3>Governance deployed across a 5-clinic allied health network.</h3>
              <p>
                A working AI use policy, a data classification model, and an accountability map
                for automated decisions, sized to an 85-person network, aligned to VAISS.
              </p>
            </div>
            {!(window.IA_MVP && window.IA_MVP()) && (
            <Button variant="secondary" onClick={() => go("work")}>
              See the work <Icon name="arrow-right" size={14} className="arrow" />
            </Button>
            )}
          </div>
        </div>
      </section>

      {/* WHAT WE OFFER, image + bulleted services */}
      <section className="section section--paper">
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 56, alignItems: "stretch",
            background: "#fff", border: "1px solid var(--hairline)", borderRadius: 24, overflow: "hidden"
          }}>
            <div style={{ minHeight: 480, background: "#F2F2EE", position: "relative" }}>
              <image-slot
                id="gov-team"
                placeholder="Photo of the team in a governance workshop"
                shape="rect"
                style={{ height: "100%", width: "100%" }} />
            </div>
            <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", gap: 24 }}>
              <Eyebrow>What we set up</Eyebrow>
              <h2 className="h-section" style={{ fontSize: 36 }}>
                What we offer.
              </h2>
              <p className="lede" style={{ fontSize: 16 }}>
                We turn the approach into something your business actually runs, from the
                policy and the classification model through to the board sessions and the review
                rhythm that keeps it current.
              </p>
              <ul className="bullet-list">
                {CORE_SERVICES.map((s, i) =>
                  <li key={i}>
                    <strong style={{ color: "var(--ink)", fontWeight: 600 }}>{s.name}</strong>, {s.desc}
                  </li>
                )}
              </ul>
              <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
                <Button variant="primary" onClick={() => go("contact")}>
                  Request a meeting <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ, Security & Privacy */}
      <section id="gov-faq" className="section section--paper" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <PageFAQ
            pageId="governance"
            go={go}
            eyebrow="Security & privacy"
            title="How we handle your data."
          />
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Not sure where you stand?"
            title={<span>Tell us how your team uses AI today and we&rsquo;ll show you where the gaps are, policy, classification, and the December deadline.</span>}
            cta="Request a meeting"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

// ---------- Glance (local copy, used in hero card) ----------
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>);

}

window.GovernanceScreen = GovernanceScreen;