/* ==========================================================================
   Individuals.jsx  —  @role
   Individuals page (conversion funnel, £79). Sections: animated hero report card, recognition (individuals-soundfamiliar.js), what-changes (individuals-whatchanges.js), what-you-receive (individuals-spec.js), testimonials, FAQ (before pricing, deliberate), pricing. No technology language.
   ========================================================================== */
/* PSL Individuals — immersive desktop mockup
   Patterns lifted from PSL Teams: dark hero, count-up, scroll rail,
   timeline spine, mouse-tilt cards, arc-gauges, image strip. */

/* global React */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Hooks ---------- */
const useInView = (rootMargin = "-10% 0px -10% 0px") => {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(
      (entries) =>
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setSeen(true);
          io.disconnect();
        }
      }),
      { rootMargin, threshold: 0.05 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [rootMargin, seen]);
  return [ref, seen];
};

const useCountUp = (target, seen, duration = 2200) => {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!seen) return;
    let raf, start;
    const ease = (t) => 1 - Math.pow(1 - t, 3);
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / duration);
      setVal(Math.round(target * ease(p)));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, seen, duration]);
  return val;
};

/* Generic fade-up reveal observer for any [data-reveal] inside */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const items = root.querySelectorAll(".i-fadeup");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    items.forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- Sticky section banner (matches Method/Teams .m-snav) ---------- */
const I_jumpTo = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 84;
  window.scrollTo({ top: y, behavior: "smooth" });
};
const I_SNav = ({ sections }) => {
  const [active, setActive] = useState(-1);
  useEffect(() => {
    const onScroll = () => {
      const triggerY = 140;
      let current = -1;
      sections.forEach((sec, i) => {
        const el = document.getElementById(sec.id);
        if (el && el.getBoundingClientRect().top <= triggerY) current = i;
      });
      const first = document.getElementById(sections[0].id);
      if (first && first.getBoundingClientRect().top > triggerY) current = -1;
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [sections]);

  return (
    <nav className={"i-snav" + (active >= 0 ? " is-on" : "")} aria-label="On this page">
      <div className="i-snav-inner">
        <span className="i-snav-eyebrow">For individuals</span>
        <ol className="i-snav-list">
          {sections.map((sec, i) =>
          <li key={sec.id}>
              <button
                className={"i-snav-link" + (i === active ? " is-current" : "")}
                onClick={() => I_jumpTo(sec.id)}
                aria-current={i === active ? "true" : undefined}>
                <span className="i-snav-num">{String(i + 1).padStart(2, "0")}</span>
                {sec.label}
              </button>
            </li>
          )}
        </ol>
      </div>
    </nav>);

};

/* ---------- Scroll progress rail (legacy, no longer rendered) ---------- */
const IRail = ({ sections }) => {
  const [active, setActive] = useState(0);
  const [darkSection, setDarkSection] = useState(true);
  useEffect(() => {
    const onScroll = () => {
      const mid = window.scrollY + window.innerHeight * 0.4;
      let cur = 0;
      let isDark = false;
      sections.forEach((s, i) => {
        const el = document.getElementById(s.id);
        if (!el) return;
        if (el.offsetTop <= mid) {
          cur = i;
          isDark = !!s.dark;
        }
      });
      setActive(cur);
      setDarkSection(isDark);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [sections]);
  return (
    <nav className="i-rail" aria-label="Page sections">
      {sections.map((s, i) =>
      <button
        key={s.id}
        type="button"
        className={
        "i-rail-dot" + (
        darkSection ? " is-dark" : "") + (
        active === i ? " active" : "")
        }
        aria-label={"Jump to " + s.label}
        onClick={() => {
          const el = document.getElementById(s.id);
          if (el) window.scrollTo({ top: el.offsetTop - 40, behavior: "smooth" });
        }}>

          <span className="i-rail-label">{s.label}</span>
        </button>
      )}
    </nav>);

};

/* ---------- Nav ---------- */
function INav({ active = "individuals", variant = "dark" }) {
  const link = (id, label) =>
  <a href="#" className={active === id ? "is-active" : ""}>
      {label}
    </a>;

  const isLight = variant === "light";
  return (
    <header className={"i-nav" + (isLight ? " i-nav-light" : "")} data-screen-label="Nav">
      <div className="i-nav-inner">
        <a className="i-nav-logo" href="#">
          <img
            src={isLight ? "assets/logos/PSL-Logo-Header.svg" : "assets/logos/PSL-Logo-Negative.png"}
            alt="Performance Systems Lab" />

        </a>
        <nav className="i-nav-links">
          {link("home", "Home")}
          {link("method", "Method")}
          {link("teams", "Teams")}
          {link("individuals", "Individuals")}
          <a href="#pricing" className="i-nav-cta">Get your report</a>
        </nav>
      </div>
    </header>);

}

/* ---------- Footer ---------- */
function IFooter() {
  return (
    <footer className="i-footer" data-screen-label="Footer">
      <div className="i-footer-inner">
        <div className="i-footer-top">
          <a href="#" aria-label="PSL">
            <img className="i-footer-logo" src="assets/logos/PSL-Logo-Negative.png" alt="PSL" />
          </a>
          <nav className="i-footer-nav">
            <a href="#">Home</a>
            <a href="#">Method</a>
            <a href="#">Teams</a>
            <a href="#">Individuals</a>
            <a href="#">About</a>
          </nav>
        </div>
        <div className="i-footer-bottom">© 2026 Performance Systems Lab™. All rights reserved.</div>
      </div>
    </footer>);

}

/* =====================================================================
   01 — HERO (dark navy, full-bleed, image + bloom)
   ===================================================================== */
/* ---------------------------------------------------------------------
   Hero — animated sample report card (score count-up, bars fill,
   constraint emphasis), with a personalised headshot.
   ===================================================================== */
function IHeroReport() {
  const [ref, ioSeen] = useInView("0px");
  // Hero is above the fold — animate shortly after mount so it always plays,
  // independent of the IntersectionObserver (which also covers re-entry).
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setMounted(true), 250);
    return () => clearTimeout(t);
  }, []);
  const seen = ioSeen || mounted;
  const score = useCountUp(56, seen, 1700);
  const bars = [
  { name: "Performance Identity", pct: 65, constraint: false, delay: 350 },
  { name: "Execution Architecture", pct: 42, constraint: true, delay: 600 },
  { name: "Sustainable Capacity", pct: 61, constraint: false, delay: 500 }];

  return (
    <div className={"i-hero-mock-card" + (seen ? " is-in" : "")} ref={ref} role="img" aria-label="Animated sample performance diagnostic report preview">
      <div className="i-hero-mock-head">
        <div>
          <div className="i-hero-mock-eyebrow">Performance Profile Report</div>
          <div className="i-hero-mock-name">Prepared for Sarah L.</div>
        </div>
        <span className="i-hero-mock-avatar" aria-hidden>
          <img src="assets/individuals/report-headshot.jpg" alt="" loading="lazy" />
        </span>
      </div>
      <div className="i-hero-mock-score">
        <span className="i-hero-mock-score-num">{score}</span>
        <span className="i-hero-mock-score-suffix">/ 100 overall</span>
      </div>
      <div className="i-hero-mock-cap">
        Performance Friction. <strong>Execution Architecture</strong> is your limiting domain.
      </div>
      <div className="i-hero-mock-bench">
        <span className="i-hero-mock-bench-track" aria-hidden>
          <span className="i-hero-mock-bench-band" />
          <span className="i-hero-mock-bench-you" style={{ left: seen ? "56%" : "0%" }} />
        </span>
        <span className="i-hero-mock-bench-cap">
          Most people in your industry score <strong>68–82</strong>. You're at <strong>56</strong> — closing that gap is the opportunity.
        </span>
      </div>
      <div className="i-hero-mock-bars">
        {bars.map((b, i) =>
        <div key={i} className={"i-hero-mock-bar" + (b.constraint ? " is-constraint-row" : "")}>
            <div className="i-hero-mock-bar-label">
              <span>
                {b.name}
                {b.constraint && <span className="i-hero-mock-constraint">Focus area</span>}
              </span>
              <span className="i-hero-mock-bar-pct">{seen ? b.pct : 0}%</span>
            </div>
            <div className="i-hero-mock-bar-track">
              <div
              className={"i-hero-mock-bar-fill" + (b.constraint ? " is-constraint" : "")}
              style={{ width: (seen ? b.pct : 0) + "%", transitionDelay: b.delay + "ms" }} />

            </div>
          </div>
        )}
      </div>
      <div className="i-hero-mock-focusnote">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <circle cx="12" cy="12" r="9" /><path d="M12 8v4l2.5 2.5" />
        </svg>
        Start here — improving your constraint moves the whole system.
      </div>
      <div className="i-hero-mock-foot">
        <span className="i-hero-mock-foot-dot" />
        Illustrative — your report is generated from your own responses.
      </div>
    </div>);

}

/* ---------------------------------------------------------------------
   01 — HERO (dark navy, full-bleed, image + bloom)
   ===================================================================== */
function IHero() {
  const [ref, seen] = useInView("0px");
  return (
    <section
      id="hero"
      className={"i-hero" + (seen ? " is-in" : "")}
      ref={ref}
      data-screen-label="01 Hero">

      <div className="i-hero-bg" aria-hidden>
        <div className="i-hero-photo" />
        <div className="i-hero-overlay" />
        <div className="i-hero-scrim" />
        <div className="i-hero-grid" />
        <span className="i-bloom i-bloom-1" />
        <span className="i-bloom i-bloom-2" />
        <span className="i-bloom i-bloom-3" />
      </div>
      <div className="i-container">
        <div className="i-hero-grid-cols">
          <div className="i-hero-inner">
            <span className="i-hero-eyebrow i-fadeup">FOR PEOPLE SERIOUS ABOUT PERFORMANCE</span>
            <h1 className="i-hero-h i-fadeup d1">
              You're capable of more.{" "}
              <span className="i-hero-h-mark">Can your system deliver it?</span>
            </h1>
            <p className="i-hero-sub i-fadeup d2">
              PSL builds the standards, structure, and capacity that make high performance consistent — across work, training, and the life you are actually living.
            </p>
            <div className="i-hero-cta-row i-fadeup d4">
              <a href="#pricing" className="i-btn i-btn-on-dark-primary i-btn-shine">
                <span>Get your report — £79</span>
                <span className="i-btn-arrow" aria-hidden>→</span>
              </a>
            </div>
            <ul className="i-hero-receipt i-fadeup d4" aria-label="What you get">
              <li>
                <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3h7l3 3v11H5z" /><path d="M12 3v3h3" /><path d="M8 10h5M8 13h4" /></svg>
                Personalised playbook
              </li>
              <li>
                <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="10" cy="10" r="7" /><path d="M10 6v4l2.5 1.5" /></svg>
                Within 48 hours
              </li>
              <li>
                <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M16 4v4h-4" /><path d="M16 8a7 7 0 10-1.5 4.2" /></svg>
                Updatable as you progress
              </li>
            </ul>
            <div className="i-hero-trust i-fadeup d5">
              <div className="i-hero-trust-stat">
                <span className="i-hero-trust-num">2,400+</span>
                <span className="i-hero-trust-label">individuals scored across<br />the three performance domains</span>
              </div>
              <div className="i-hero-trust-divider" aria-hidden />
              <div className="i-hero-trust-quote">
                <p>“It didn't tell me to try harder. It told me exactly which part of my system was holding me back.”</p>
                <span>James D. · Senior Engineering Lead</span>
              </div>
            </div>
          </div>
          <aside className="i-hero-mock i-fadeup d3">
            <IHeroReport />
          </aside>
        </div>
      </div>
    </section>);

}

/* =====================================================================
   02 — CREDENTIALS (count-up)
   ===================================================================== */
const StatNum = ({ value, suffix, seen }) => {
  const n = useCountUp(value, seen);
  return (
    <span className="i-stat-num">
      <span>{n}</span>
      {suffix && <span className="i-stat-num-suffix">{suffix}</span>}
    </span>);

};

function ICredentials() {
  const [ref, seen] = useInView();
  const stats = [
  {
    value: 10,
    suffix: "+",
    eyebrow: "Years",
    label:
    "leading complex delivery in regulated, enterprise, and high-pressure environments."
  },
  {
    value: 2,
    suffix: "",
    eyebrow: "Arenas",
    label: "corporate delivery leadership and elite-sport practice."
  },
  {
    value: 8,
    suffix: "",
    eyebrow: "Structural Areas",
    label: "three performance domains and five practice areas — the model behind every PSL engagement."
  }];

  return (
    <section
      id="creds"
      className="i-section i-compact i-bg-b"
      ref={ref}
      data-screen-label="02 Credentials">

      <div className="i-container">
        <div className="i-creds">
          {stats.map((s, i) =>
          <div key={i} className="i-stat">
              <StatNum value={s.value} suffix={s.suffix} seen={seen} />
              <span className="i-stat-eyebrow">{s.eyebrow}</span>
              <p className="i-stat-label">{s.label}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* =====================================================================
   03 — RECOGNITION (split with image + animated spine)
   ===================================================================== */
function IRecognition() {
  const mountRef = React.useRef(null);
  React.useEffect(() => {
    if (window.__pslSoundFamiliar && mountRef.current && !mountRef.current.dataset.rendered) {
      mountRef.current.dataset.rendered = "1";
      window.__pslSoundFamiliar.render(mountRef.current);
    }
  }, []);
  return (
    <section
      id="recognition"
      className="i-section i-bg-a i-recog-v2"
      data-screen-label="03 Sound Familiar">
      <div className="i-container">
        <div ref={mountRef} />
      </div>
    </section>);

}

/* =====================================================================
   04 — DOMAIN CARDS (mouse-tilt)
   ===================================================================== */
const Domain = ({ card, idx }) => {
  const cardRef = useRef(null);
  const onMove = useCallback((e) => {
    const el = cardRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    el.style.setProperty("--tilt-x", `${(0.5 - y) * 4}deg`);
    el.style.setProperty("--tilt-y", `${(x - 0.5) * 4}deg`);
    el.style.setProperty("--gleam-x", `${x * 100}%`);
    el.style.setProperty("--gleam-y", `${y * 100}%`);
  }, []);
  const onLeave = useCallback(() => {
    const el = cardRef.current;
    if (!el) return;
    el.style.setProperty("--tilt-x", "0deg");
    el.style.setProperty("--tilt-y", "0deg");
  }, []);
  const theme = ["purple", "blue", "emerald"][idx] || "blue";
  const activeColor = ["#A78BFA", "#9CA3FF", "#67F3DA"][idx] || "#9CA3FF";
  return (
    <article ref={cardRef} className={`i-card i-card-${theme} i-fadeup`} style={{ transitionDelay: `${idx * 0.08}s` }} onMouseMove={onMove} onMouseLeave={onLeave}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <span aria-hidden style={{ display: "inline-flex", flexShrink: 0 }}>
          <svg viewBox="0 0 48 48" width="44" height="44">
            <circle cx="24" cy="24" r="20" fill="none" stroke={idx === 0 ? activeColor : "rgba(255,255,255,0.22)"} strokeWidth={idx === 0 ? 2.5 : 1.5} />
            <circle cx="24" cy="24" r="14" fill="none" stroke={idx === 1 ? activeColor : "rgba(255,255,255,0.22)"} strokeWidth={idx === 1 ? 2.5 : 1.5} />
            <circle cx="24" cy="24" r="8" fill="none" stroke={idx === 2 ? activeColor : "rgba(255,255,255,0.22)"} strokeWidth={idx === 2 ? 2.5 : 1.5} />
          </svg>
        </span>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
          <span className="i-card-num" style={{ margin: 0, fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Ring {String(idx + 1).padStart(2, "0")}</span>
          <span className="i-card-label" style={{ display: "block", marginTop: 4, color: activeColor, fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase" }}>{card.label}</span>
        </div>
      </div>
      <h3 className="i-card-h3">{card.h}</h3>
      <p className="i-card-body">{card.body}</p>
      <div className="i-card-gain">
        <span className="i-card-gain-label" style={{ color: activeColor }}>
          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5l3.5 3.5L13 4" /></svg>
          What you build
        </span>
        <p className="i-card-gain-body">{card.build}</p>
      </div>
    </article>);

};

function IDomains() {
  const [ref, seen] = useInView();
  const cards = [
  {
    label: "Performance Identity",
    h: "Who you are under pressure.",
    body:
    "The standards, habits, and mindset that decide how you show up when conditions get hard — not just when they're ideal.",
    build:
    "Standards that hold whether it's a good week or a brutal one — so you show up the same when it counts."
  },
  {
    label: "Execution Architecture",
    h: "How you get things done consistently.",
    body:
    "The routines and structures that turn intention into reliable action. Knowing what to do is rarely the gap — doing it consistently under load is.",
    build:
    "The right work happening reliably — not just when you happen to feel sharp."
  },
  {
    label: "Sustainable Capacity",
    h: "How you keep going without breaking.",
    body:
    "The recovery and workload design that let you sustain a high level over time — the load-management principles elite athletes use, applied to a demanding life.",
    build:
    "A level you can hold for years, not weeks — with recovery built into the design, not left to chance."
  }];

  return (
    <section
      id="domains"
      ref={ref}
      className={"i-section i-bg-b i-domains" + (seen ? " is-in" : "")}
      data-screen-label="04 What PSL Helps You Build">

      <div className="i-container">
        <span className="i-overline i-fadeup">What PSL Helps You Build</span>
        <h2 className="i-h2 i-fadeup d1">
          Three areas you build — so performance stops depending on the week you're having.
        </h2>
        <p className="i-section-intro i-fadeup d2">
          These are the three areas the diagnostic scores you on, and the areas you'll work on. Build them, and a high level becomes consistent rather than circumstantial.
        </p>
        <div className="i-card-grid">
          <svg className="i-domains-spine" viewBox="0 0 1200 100" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="i-domains-spine-grad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#8936FF" />
                <stop offset="50%" stopColor="#4644B9" />
                <stop offset="100%" stopColor="#19E6C4" />
              </linearGradient>
            </defs>
            <path className="i-domains-spine-path" d="M 80 50 L 1120 50" stroke="url(#i-domains-spine-grad)" strokeWidth="1" strokeLinecap="round" fill="none" />
            <circle className="i-domains-spine-dot" cx="200" cy="50" r="3" fill="#8936FF" />
            <circle className="i-domains-spine-dot" cx="600" cy="50" r="3" fill="#4644B9" />
            <circle className="i-domains-spine-dot" cx="1000" cy="50" r="3" fill="#19E6C4" />
          </svg>
          {cards.map((c, i) => <Domain key={i} idx={i} card={c} />)}
        </div>
      </div>
    </section>);

}

/* =====================================================================
   05 — REPORT CONTENTS (numbered list)
   ===================================================================== */
function IReport() {
  const mountRef = React.useRef(null);
  React.useEffect(() => {
    if (window.__pslSpec && mountRef.current && !mountRef.current.dataset.rendered) {
      mountRef.current.dataset.rendered = "1";
      window.__pslSpec.render(mountRef.current);
    }
  }, []);
  return (
    <section id="report" className="i-section i-bg-a i-report-section i-spec-v2" data-screen-label="05 What You Receive">
      <div className="i-container">
        <div ref={mountRef} />
      </div>
    </section>);

}

/* =====================================================================
   06 — WHAT CHANGES (horizontal timeline)
   ===================================================================== */
const HorizonCard = ({ h, idx, seen }) => {
  const after = useCountUp(h.metric.after, seen, 1800);
  const before = useCountUp(h.metric.before, seen, 900);
  return (
    <article className={`i-tl-card i-tl-card-${idx} i-fadeup`} style={{ transitionDelay: `${0.4 + idx * 0.15}s` }}>
      <div className="i-tl-card-stem" aria-hidden />
      <div className="i-tl-card-head">
        <span className="i-tl-card-marker" aria-hidden />
        <div>
          <span className="i-tl-card-window">{h.window}</span>
          <h3 className="i-tl-card-h">{h.h}</h3>
        </div>
      </div>

      <div className="i-tl-card-meter">
        <div className="i-tl-card-meter-head">
          <span className="i-tl-card-meter-label">{h.metric.label}</span>
          <span className="i-tl-card-meter-after">{after}{h.metric.unit}</span>
        </div>
        <div className="i-tl-card-meter-track">
          <div className="i-tl-card-meter-before" style={{ width: `${h.metric.before}%` }} aria-hidden />
          <div className="i-tl-card-meter-fill" style={{ width: seen ? `${h.metric.after}%` : "0%" }} aria-hidden />
          <div className="i-tl-card-meter-marker" style={{ left: `${h.metric.before}%` }} aria-hidden />
        </div>
        <div className="i-tl-card-meter-foot">
          <span>Before {before}{h.metric.unit}</span>
          <span aria-hidden>→</span>
          <span><strong>{after}{h.metric.unit}</strong></span>
        </div>
      </div>

      <p className="i-tl-card-body">{h.body}</p>

      {h.quote &&
      <blockquote className="i-tl-card-quote">
          <p>{h.quote.text}</p>
          <span>— {h.quote.attrib}</span>
        </blockquote>
      }

      <ul className="i-tl-card-tags">
        {h.tags.map((t) => <li key={t}>{t}</li>)}
      </ul>
    </article>);

};

function IChanges() {
  const mountRef = React.useRef(null);
  React.useEffect(() => {
    if (window.__pslWhatChanges && mountRef.current && !mountRef.current.dataset.rendered) {
      mountRef.current.dataset.rendered = "1";
      window.__pslWhatChanges.render(mountRef.current);
    }
  }, []);
  return (
    <section id="changes" className="i-section i-bg-a i-changes i-changes-v2" data-screen-label="06 What Changes">
      <div className="i-container">
        <div ref={mountRef} />
      </div>
    </section>);

}

/* =====================================================================
   07 — IMAGE STRIP / EDITORIAL CONTEXTS
   ===================================================================== */
function IStrip() {
  const tiles = [
  {
    img: "assets/individuals/trading-floor-md.jpg",
    tag: "On the floor",
    h: "When the pace doesn't relent, structure is the only thing that scales."
  },
  {
    img: "assets/individuals/whiteboard-md.jpg",
    tag: "In the room",
    h: "When alignment matters, the standard you hold becomes the standard the room holds."
  },
  {
    img: "assets/individuals/late-night-md.jpg",
    tag: "After hours",
    h: "When effort is no longer the differentiator, recovery becomes the work."
  }];

  return (
    <section
      id="contexts"
      className="i-strip"
      data-screen-label="07 Contexts">

      <div className="i-container">
        <div className="i-strip-head">
          <div>
            <span className="i-overline i-fadeup">Where this shows up</span>
            <h2 className="i-h2 i-fadeup d1">
              The conditions that test the system are everywhere. The system is what holds.
            </h2>
          </div>
        </div>
        <div className="i-strip-grid">
          {tiles.map((t, i) =>
          <article key={i} className="i-tile i-fadeup" style={{ transitionDelay: `${i * 0.1}s` }}>
              <img src={t.img} alt={t.tag} loading="lazy" />
              <div className="i-tile-caption">
                <div className="i-tile-tag">{t.tag}</div>
                <div className="i-tile-h">{t.h}</div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* =====================================================================
   07.5 — TESTIMONIALS (2-quote proof strip, placed before FAQ + Pricing)
   ===================================================================== */
function ITestimonials() {
  const [ref, seen] = useInView();
  const quotes = [
  {
    text: "I'd done the courses, the coaching, the journals. None of them told me which domain was actually holding me back. The report did, in 7 minutes.",
    name: "Sarah K.",
    role: "Programme Director, Financial Services",
    score: { before: 48, after: 76, domain: "Execution Architecture" }
  },
  {
    text: "Most useful £79 I've spent on my own performance. It didn't tell me to try harder. It told me which structure was broken — and how to fix it.",
    name: "James D.",
    role: "Senior Engineering Lead, Cloud Infrastructure",
    score: { before: 52, after: 81, domain: "Sustainable Capacity" }
  }];

  return (
    <section
      id="testimonials"
      ref={ref}
      className={"i-section i-bg-a i-testimonials" + (seen ? " is-in" : "")}
      data-screen-label="07 Testimonials">
      <div className="i-container">
        <span className="i-overline i-fadeup">Real Results</span>
        <h2 className="i-h2 i-fadeup d1">From the people <span className="i-h-accent">already using it.</span></h2>
        <div className="i-testimonials-grid">
          {quotes.map((q, i) =>
          <article key={i} className="i-testimonial i-fadeup" style={{ transitionDelay: `${i * 0.12}s` }}>
              <svg className="i-testimonial-mark" viewBox="0 0 32 24" fill="none" aria-hidden>
                <path d="M0 24V14C0 6.27 5.27 0 12 0v4c-4 0-7 3-7 7v1h6v12H0zm20 0V14C20 6.27 25.27 0 32 0v4c-4 0-7 3-7 7v1h6v12H20z" fill="currentColor" />
              </svg>
              <p className="i-testimonial-text">{q.text}</p>
              <div className="i-testimonial-score">
                <div className="i-testimonial-score-row">
                  <span className="i-testimonial-score-domain">{q.score.domain}</span>
                  <span className="i-testimonial-score-delta">+{q.score.after - q.score.before}</span>
                </div>
                <div className="i-testimonial-score-bar">
                  <div className="i-testimonial-score-before" style={{ width: `${q.score.before}%` }} />
                  <div className="i-testimonial-score-after" style={{ width: seen ? `${q.score.after}%` : "0%" }} />
                </div>
                <div className="i-testimonial-score-numbers">
                  <span><span className="i-testimonial-score-was">Before</span> {q.score.before}</span>
                  <span className="i-testimonial-score-arrow" aria-hidden>→</span>
                  <span><span className="i-testimonial-score-was">After</span> <span className="i-testimonial-score-after-num">{q.score.after}</span></span>
                  <span className="i-testimonial-score-time">over 4 months</span>
                </div>
              </div>
              <div className="i-testimonial-attrib">
                <div className="i-testimonial-name">{q.name}</div>
                <div className="i-testimonial-role">{q.role}</div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* =====================================================================
   07.6 — FAQ (objection handling before pricing decision)
   ===================================================================== */
function IFAQ() {
  const [ref, seen] = useInView();
  const [open, setOpen] = useState(0);
  const items = [
  {
    q: "Is this useful if I already have a coach or therapist?",
    a: "Yes. The diagnostic identifies which structural domain is your primary constraint — Performance Identity, Execution Architecture, or Sustainable Capacity. A coach can then focus on what actually matters, rather than working through a generic agenda."
  },
  {
    q: "How is this different from a personality test?",
    a: "A personality test describes who you are. The PSL Performance Diagnostic shows you which part of your performance system is breaking under pressure — and what to do about it. It is built to change what you do next, not to label you."
  },
  {
    q: "What if my results aren't useful?",
    a: "30-day money-back guarantee, no questions. If the report doesn't give you clarity on where to focus and a practical first move, email us and we refund in full."
  },
  {
    q: "Can I use this for my team?",
    a: "The Team Diagnostic is a different product — it scores the team as a unit and produces an aggregated report for leadership. See the Teams page for details."
  },
  {
    q: "What happens after I pay?",
    a: "You're redirected to the diagnostic (around 7 minutes). Submit your responses and the structured PDF report arrives by email within 48 hours. No follow-up sales process unless you ask for one."
  }];

  return (
    <section
      id="faq"
      ref={ref}
      className={"i-section i-bg-a i-faq" + (seen ? " is-in" : "")}
      data-screen-label="08 FAQ">
      <div className="i-container">
        <div className="i-faq-grid">
          <div className="i-faq-head i-fadeup">
            <span className="i-overline">Before you decide</span>
            <h2 className="i-h2" style={{ marginTop: 16 }}>Common questions, answered straight.</h2>
            <p className="i-section-intro" style={{ marginTop: 20, maxWidth: 380 }}>The questions most people ask before they buy.

            </p>
          </div>
          <ul className="i-faq-list i-fadeup d1">
            {items.map((it, i) =>
            <li key={i} className={"i-faq-item" + (i === open ? " is-open" : "")}>
                <button
                type="button"
                className="i-faq-q"
                onClick={() => setOpen(i === open ? -1 : i)}
                aria-expanded={i === open}>
                  <span>{it.q}</span>
                  <span className="i-faq-toggle" aria-hidden>
                    <svg viewBox="0 0 14 14" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                      <path d="M3 5l4 4 4-4" />
                    </svg>
                  </span>
                </button>
                <div className="i-faq-a" role="region">
                  <p>{it.a}</p>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

/* =====================================================================
   08 — PRICING + CLOSING CTA
   ===================================================================== */
function IPricing() {
  return (
    <section
      id="pricing"
      className="i-cta i-pricing-v2"
      data-screen-label="08 Pricing">

      <div className="i-cta-photo" aria-hidden />
      <div className="i-cta-bg" aria-hidden>
        <span className="i-bloom i-bloom-1" />
        <span className="i-bloom i-bloom-2" />
      </div>
      <div className="i-cta-inner">
        <span className="i-pricing-badge i-fadeup">
          <span className="i-pricing-badge-dot" />
          Limited launch pricing — first 200 individuals
        </span>
        <span className="i-overline i-on-dark i-fadeup d1" style={{ marginTop: 18, display: "inline-block" }}>
          Enterprise-grade diagnostic · Research-backed · Benchmarked
        </span>
        <h2 className="i-cta-h i-fadeup d2">Find out where your performance stands.</h2>
        <p className="i-cta-body i-fadeup d3">Most performance advice is generic. The Performance diagnostic t is built for your specific results across the three domains — backed by McKinsey research on organisational health, Google's Project Aristotle on team effectiveness, and a decade of leading complex delivery in regulated environments.

        </p>

        <div className="i-price-panel i-price-panel-v2 i-fadeup d3">
          <div className="i-price-panel-top">
            <div className="i-price-row">
              <div className="i-price-num-stack">
                <div className="i-price-original" aria-label="Original price">
                  <span className="i-price-strike">£150</span>
                  <span className="i-price-original-label">Standard</span>
                </div>
                <div className="i-price-num">£79</div>
                <span className="i-price-save">Save £71 today</span>
              </div>
              <div className="i-price-meta">
                <span className="i-price-meta-strong">One-time payment</span>
                <span className="i-price-meta-soft">No subscription · 30-day money-back guarantee</span>
              </div>
            </div>
          </div>

          <div className="i-price-divider" />

          <div className="i-price-includes-label">What you're really getting</div>
          <ul className="i-price-features">
            <li>
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5L6.5 12 13 4" /></svg>
              <span><strong>Bespoke to your results</strong> — not a generic checklist or AI template</span>
            </li>
            <li>
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5L6.5 12 13 4" /></svg>
              <span><strong>Benchmarked</strong> against high-performers across regulated industries</span>
            </li>
            <li>
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5L6.5 12 13 4" /></svg>
              <span><strong>Enterprise-grade methodology</strong> — the same diagnostic PSL applies to leadership teams</span>
            </li>
            <li>
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5L6.5 12 13 4" /></svg>
              <span><strong>Practical applications</strong> mapped to your primary constraint — start this week</span>
            </li>
            <li>
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5L6.5 12 13 4" /></svg>
              <span><strong>Learn from the best</strong> — workshops featuring elite-athlete guest speakers on performing under pressure</span>
            </li>
          </ul>

          <div className="i-price-credibility">
            <span className="i-price-cred-label">Built on</span>
            <div className="i-price-cred-row">
              <span>McKinsey organisational health research</span>
              <span className="i-price-cred-dot" aria-hidden>·</span>
              <span>Project Aristotle (Google)</span>
              <span className="i-price-cred-dot" aria-hidden>·</span>
              <span>10+ years of regulated delivery</span>
            </div>
          </div>

          <dl className="i-price-meta-row">
            <dt>Delivery</dt>
            <dd>By email within 48 hours of completing the diagnostic.</dd>
            <dt></dt>
            <dd></dd>
          </dl>
        </div>

        <div className="i-cta-actions i-fadeup d4">
          <a href="#" className="i-btn i-btn-on-dark-primary i-btn-shine">
            <span>Pay £79 and start the diagnostic</span>
            <span className="i-btn-arrow" aria-hidden>→</span>
          </a>
        </div>
        <p className="i-cta-flow i-fadeup d4">
          <span className="i-cta-flow-step"><span>1</span> Pay securely with Stripe</span>
          <span className="i-cta-flow-arrow" aria-hidden>→</span>
          <span className="i-cta-flow-step"><span>2</span> Complete the diagnostic (~7 min)</span>
          <span className="i-cta-flow-arrow" aria-hidden>→</span>
          <span className="i-cta-flow-step"><span>3</span> Report by email within 48h</span>
        </p>
      </div>
    </section>);

}

/* =====================================================================
   PAGE
   ===================================================================== */
function Individuals() {
  const ref = useReveal();
  const sections = [
  { id: "hero", label: "Opening", dark: true },
  { id: "recognition", label: "Recognition", dark: false },
  { id: "changes", label: "What Changes", dark: false },
  { id: "report", label: "Report Contents", dark: false },
  { id: "testimonials", label: "Real Results", dark: false },
  { id: "faq", label: "FAQ", dark: false },
  { id: "pricing", label: "Begin", dark: true }];

  const navSections = [
  { id: "recognition", label: "Sound familiar?" },
  { id: "changes", label: "What changes" },
  { id: "report", label: "What you get" },
  { id: "testimonials", label: "Results" },
  { id: "faq", label: "FAQ" },
  { id: "pricing", label: "Get started" }];


  return (
    <div className="psl-i" ref={ref} data-screen-label="01 PSL Individuals">
      <PSLNav theme="light" active="individuals" />
      <I_SNav sections={navSections} />
      <main>
        <IHero />
        <IRecognition />
        <IChanges />
        <IReport />
        <ITestimonials />
        <IFAQ />
        <IPricing />
      </main>
      <PSLFooter />
    </div>);

}

Object.assign(window, { Individuals, INav, IFooter });