/* ==========================================================================
   Sections.jsx  —  @role
   Diagnostic page sections — currently the FAQ component (5 Q&As). Hero + routing cards come from diagnostic-hero.js.
   ========================================================================== */
/* Diagnostic page sections */

const Hero = () =>
<section className="section hero-section hero">
    <div className="container">
      <div className="hero-grid">
        <div>
          <span className="hr-hero-eyebrow">
            <span className="hr-hero-eyebrow-dot" />
            THE PERFORMANCE DIAGNOSTIC
          </span>
          <h1 style={{ marginTop: 20 }}>
            <span className="grad">Performance</span><br />
            Diagnostic
          </h1>
          <p className="hero-sub">
            Understand exactly where your performance system holds under pressure, and where it does not.
          </p>
          <p className="hero-body">Our diagnostic identifies which of your domains need the most attention right now — Performance Identity, Execution Architecture, or Sustainable Capacity — and delivers a performance report directly to your inbox.
        </p>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
              7 minutes
            </div>
            <div className="hero-meta-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="M4 6h16v12H4z" /><path d="M4 6l8 7 8-7" /></svg>
              Sent by email
            </div>
            <div className="hero-meta-item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z" /></svg>
              Confidential
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <DiagnosticPreview />
        </div>
      </div>
    </div>
  </section>;


const DiagnosticPreview = () =>
<div className="report-card" role="img" aria-label="Sample performance diagnostic report preview">
    <div className="report-card-header">
      <div>
        <div className="report-card-label">Performance Diagnostic <span className="report-card-tier-inline">Tier 2</span></div>
        <div className="report-card-title">Sample report preview</div>
      </div>
      <div className="report-card-photo" aria-hidden></div>
    </div>
    <div className="report-score">
      <span className="report-score-num">63</span>
      <span className="report-score-suffix">/ 100 overall</span>
    </div>
    <div style={{ fontSize: 13, color: "var(--psl-mid-grey)", lineHeight: 1.55 }}>
      Performance Friction. Execution Architecture is currently the limiting domain.
    </div>
    <div className="report-bars">
      {[
    { name: "Performance Identity", pct: 72, constraint: false },
    { name: "Execution Architecture", pct: 48, constraint: true },
    { name: "Sustainable Capacity", pct: 69, constraint: false }].
    map((b, i) =>
    <div key={i} className="report-bar-row">
          <div className="report-bar-label">
            <span className="name">
              {b.name}
              {b.constraint && <span className="report-constraint-tag">Primary constraint</span>}
            </span>
            <span className="pct">{b.pct}%</span>
          </div>
          <div className="report-bar-track">
            <div className={"report-bar-fill" + (b.constraint ? " constraint" : "")} style={{ width: b.pct + "%" }} />
          </div>
        </div>
    )}
    </div>
    <div className="report-card-footer">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3" /></svg>
      Illustrative — your report will be generated from your own responses.
    </div>
  </div>;


const DiagCursorClick = ({ size = 16 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
    <path d="M5 3 L5 17 L9 13 L11.5 18.5 L13.5 17.5 L11 12 L17 12 Z" fill="currentColor" />
  </svg>;


const RoutingCards = () =>
<section className="section routing-section hr-routing-dark">
    <div className="hr-routing-bloom" aria-hidden />
    <div className="routing-bg-decor" aria-hidden style={{ display: 'none' }}>
      <span className="routing-decor-label">CHOOSE YOUR PATH</span>
      <span className="routing-decor-vertical">DIAGNOSE · INTERPRET · INTERVENE</span>
      <svg className="routing-decor-rings" viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="100" r="90" stroke="#E0E7FF" strokeWidth="1" />
        <circle cx="100" cy="100" r="60" stroke="#C7D2FE" strokeWidth="1" />
        <circle cx="100" cy="100" r="30" stroke="#A5B4FC" strokeWidth="1" />
      </svg>
    </div>
    <div className="container routing-container">
      <div className="routing-intro">
        <span className="eyebrow">Where do you want to start?</span>
        <h2 className="routing-h2">Two diagnostic paths.</h2>
        <p className="routing-intro-body">Both routes assess your performance system across the same three domains.
Pick the one that matches the unit you operate in.</p>
      </div>
      <div className="hr-routing-grid">
        <a href="#" className="hr-route hr-route-ind">
          <div className="hr-route-cta-bar">
            <span className="hr-route-cta-bar-text">Start the diagnostic</span>
            <span className="hr-route-cta-bar-icon"><DiagCursorClick /></span>
          </div>
          <div className="hr-route-meta">
            <span className="hr-route-tag"><span className="hr-route-tagdot" />FOR INDIVIDUALS</span>
            <span className="hr-route-time">~ 7 min · free</span>
          </div>
          <h3 className="hr-route-t">Individual Performance Diagnostic</h3>
          <p className="hr-route-b">
            Build the performance identity, execution structure, and sustainable capacity to perform consistently when demands are high and conditions are difficult.
          </p>
          <div className="hr-route-illust">
            <svg viewBox="0 0 320 180" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <clipPath id="diag-ind-pf"><circle cx="0" cy="0" r="14" /></clipPath>
              </defs>
              <rect x="40" y="36" width="170" height="118" rx="10" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.25)" />
              <rect x="54" y="50" width="44" height="4" rx="2" fill="rgba(255,255,255,0.55)" />
              <text x="54" y="86" fill="rgba(255,255,255,0.98)" fontSize="34" fontWeight="700" fontFamily="Mona Sans, sans-serif" letterSpacing="-1">63</text>
              <text x="98" y="86" fill="rgba(255,255,255,0.6)" fontSize="11" fontFamily="Mona Sans, sans-serif">/ 100</text>
              {[{ y: 104, w: 110 }, { y: 120, w: 76 }, { y: 136, w: 96 }].map((b, i) => <g key={i}>
                  <rect x="54" y={b.y} width="140" height="3" rx="1.5" fill="rgba(255,255,255,0.15)" />
                  <rect x="54" y={b.y} width={b.w} height="3" rx="1.5" fill="rgba(255,255,255,0.95)" />
                </g>
            )}
              <g transform="translate(244 56)">
                <circle cx="0" cy="0" r="15" fill="rgba(255,255,255,0.98)" />
                <g clipPath="url(#diag-ind-pf)">
                  <image href="assets/headshot-1.webp" x="-14" y="-14" width="28" height="28" preserveAspectRatio="xMidYMid slice" />
                </g>
                <circle cx="0" cy="0" r="14" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="1.2" />
              </g>
              <g transform="translate(244 130)">
                <rect x="-43" y="-16" width="86" height="32" rx="6" fill="rgba(255,255,255,0.95)" />
                <text x="-33" y="-3" fill="rgba(0,0,0,0.45)" fontSize="6" fontWeight="600" fontFamily="Mona Sans, sans-serif" letterSpacing="0.08em">PRIMARY CONSTRAINT</text>
                <text x="-33" y="9" fill="#1E3A8A" fontSize="9" fontWeight="700" fontFamily="Mona Sans, sans-serif">Execution flow</text>
              </g>
            </svg>
          </div>
        </a>

        <a href="#" className="hr-route hr-route-team">
          <div className="hr-route-cta-bar">
            <span className="hr-route-cta-bar-text">Start the diagnostic</span>
            <span className="hr-route-cta-bar-icon"><DiagCursorClick /></span>
          </div>
          <div className="hr-route-meta">
            <span className="hr-route-tag"><span className="hr-route-tagdot" />FOR TEAMS &amp; ORGANISATIONS</span>
            <span className="hr-route-time">~ 10 min</span>
          </div>
          <h3 className="hr-route-t">Team and Organisation Diagnostic</h3>
          <p className="hr-route-b">
            Design the systems, operating rhythm, and execution architecture that allow teams to deliver consistently under sustained pressure — without depending on individual heroics.
          </p>
          <div className="hr-route-illust">
            <svg viewBox="0 0 320 180" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="160" cy="90" r="62" stroke="rgba(255,255,255,0.18)" strokeDasharray="1 4" fill="none" />
              <circle cx="160" cy="90" r="44" stroke="rgba(255,255,255,0.25)" strokeDasharray="1 4" fill="none" />
              <polygon points="160,46 208,108 112,108" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.6)" strokeWidth="1.2" />
              <circle cx="160" cy="90" r="10" fill="rgba(255,255,255,0.98)" />
              {[{ cx: 160, cy: 46, l: "ALIGN", w: 44 }, { cx: 208, cy: 108, l: "EXECUTE", w: 56 }, { cx: 112, cy: 108, l: "SUSTAIN", w: 54 }].map((n, i) =>
            <g key={i}>
                  <circle cx={n.cx} cy={n.cy} r="5" fill="rgba(255,255,255,0.95)" />
                  <rect x={n.cx - n.w / 2} y={n.cy - 24} width={n.w} height="14" rx="3" fill="rgba(255,255,255,0.95)" />
                  <text x={n.cx} y={n.cy - 14} textAnchor="middle" fill="#6D28D9" fontSize="7" fontWeight="700" fontFamily="Mona Sans, sans-serif" letterSpacing="0.08em">{n.l}</text>
                </g>
            )}
              <defs>
                {[
                  { id: "diag-tm-1" },
                  { id: "diag-tm-2" },
                  { id: "diag-tm-3" },
                  { id: "diag-tm-4" },
                ].map((p) => (
                  <clipPath key={p.id} id={p.id}><circle cx="0" cy="0" r="14" /></clipPath>
                ))}
              </defs>
              {[
                { x: 44, y: 42, img: "assets/headshot-1.webp", clip: "diag-tm-1" },
                { x: 276, y: 42, img: "assets/headshot-2.jpg", clip: "diag-tm-2" },
                { x: 44, y: 138, img: "assets/headshot-3.jpeg", clip: "diag-tm-3" },
                { x: 276, y: 138, img: "assets/headshot-4.jpg", clip: "diag-tm-4" },
              ].map((p, i) =>
            <g key={i} transform={`translate(${p.x}, ${p.y})`}>
                  <circle cx="0" cy="0" r="15" fill="rgba(255,255,255,0.98)" />
                  <g clipPath={`url(#${p.clip})`}>
                    <image href={p.img} x="-14" y="-14" width="28" height="28" preserveAspectRatio="xMidYMid slice" />
                  </g>
                  <circle cx="0" cy="0" r="14" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="1.2" />
                </g>
            )}
            </svg>
          </div>
        </a>
      </div>
    </div>
  </section>;


// Editorial illustrations — abstract dashboard / system-diagram aesthetic
const IllustIndividual = () =>
<svg viewBox="0 0 320 180" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="indCard" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="rgba(255,255,255,0.12)" />
        <stop offset="1" stopColor="rgba(255,255,255,0.02)" />
      </linearGradient>
      <linearGradient id="indBar" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="rgba(255,255,255,0.95)" />
        <stop offset="1" stopColor="rgba(255,255,255,0.45)" />
      </linearGradient>
    </defs>

    {/* Back card */}
    <rect x="40" y="36" width="170" height="118" rx="10" fill="url(#indCard)" stroke="rgba(255,255,255,0.25)" strokeWidth="1" />
    {/* eyebrow line */}
    <rect x="54" y="50" width="44" height="4" rx="2" fill="rgba(255,255,255,0.55)" />
    {/* big number */}
    <text x="54" y="86" fill="rgba(255,255,255,0.98)" fontSize="34" fontWeight="700" fontFamily="Mona Sans, sans-serif" letterSpacing="-1">63</text>
    <text x="98" y="86" fill="rgba(255,255,255,0.6)" fontSize="11" fontWeight="500" fontFamily="Mona Sans, sans-serif">/ 100</text>
    {/* score bars with labels */}
    {[
  { y: 104, w: 110, label: "IDENTITY" },
  { y: 120, w: 76, label: "EXECUTION" },
  { y: 136, w: 96, label: "CAPACITY" }].
  map((b, i) =>
  <g key={i}>
        <text x="54" y={b.y - 3} fill="rgba(255,255,255,0.5)" fontSize="6" fontWeight="600" fontFamily="Mona Sans, sans-serif" letterSpacing="0.1em">{b.label}</text>
        <rect x="54" y={b.y} width="140" height="3" rx="1.5" fill="rgba(255,255,255,0.15)" />
        <rect x="54" y={b.y} width={b.w} height="3" rx="1.5" fill="url(#indBar)" />
      </g>
  )}

    {/* Foreground "constraint" tag */}
    <g transform="translate(186 92)">
      <rect x="0" y="0" width="86" height="32" rx="6" fill="rgba(255,255,255,0.95)" />
      <circle cx="12" cy="16" r="3" fill="#2563EB" />
      <text x="22" y="13" fill="rgba(0,0,0,0.45)" fontSize="6" fontWeight="600" fontFamily="Mona Sans, sans-serif" letterSpacing="0.08em">PRIMARY CONSTRAINT</text>
      <text x="22" y="25" fill="#1E3A8A" fontSize="9" fontWeight="700" fontFamily="Mona Sans, sans-serif">Execution flow</text>
    </g>

    {/* Sparkline + arrow */}
    <path d="M226 50 L236 46 L244 52 L254 42 L264 48 L272 38" stroke="rgba(255,255,255,0.85)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    <circle cx="272" cy="38" r="2.5" fill="rgba(255,255,255,0.95)" />

    {/* Floating dot grid */}
    {[0, 1, 2, 3].map((i) =>
  <circle key={i} cx={232 + i * 10} cy={140} r="1.5" fill="rgba(255,255,255,0.4)" />
  )}
  </svg>;


const IllustTeam = () =>
<svg viewBox="0 0 320 180" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <radialGradient id="teamGlow" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor="rgba(255,255,255,0.35)" />
        <stop offset="1" stopColor="rgba(255,255,255,0)" />
      </radialGradient>
      <linearGradient id="teamRing" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="rgba(255,255,255,0.9)" />
        <stop offset="1" stopColor="rgba(255,255,255,0.3)" />
      </linearGradient>
    </defs>

    {/* concentric rings (radar/operating-system motif) */}
    <circle cx="160" cy="90" r="76" fill="url(#teamGlow)" />
    <circle cx="160" cy="90" r="62" stroke="rgba(255,255,255,0.18)" strokeDasharray="1 4" />
    <circle cx="160" cy="90" r="44" stroke="rgba(255,255,255,0.25)" strokeDasharray="1 4" />
    <circle cx="160" cy="90" r="26" stroke="rgba(255,255,255,0.4)" />

    {/* triangular polygon — domain coverage */}
    <polygon points="160,46 208,108 112,108" fill="rgba(255,255,255,0.18)" stroke="url(#teamRing)" strokeWidth="1.2" strokeLinejoin="round" />

    {/* central core */}
    <circle cx="160" cy="90" r="10" fill="rgba(255,255,255,0.98)" />
    <circle cx="160" cy="90" r="4" fill="#A21CAF" />

    {/* domain nodes (the three points) with chips */}
    {[
  { cx: 160, cy: 46, label: "ALIGN", chipW: 44 },
  { cx: 208, cy: 108, label: "EXECUTE", chipW: 56 },
  { cx: 112, cy: 108, label: "SUSTAIN", chipW: 54 }].
  map((n, i) =>
  <g key={i}>
        <circle cx={n.cx} cy={n.cy} r="5" fill="rgba(255,255,255,0.95)" />
        <circle cx={n.cx} cy={n.cy} r="9" stroke="rgba(255,255,255,0.5)" strokeWidth="1" />
        <rect x={n.cx - n.chipW / 2} y={n.cy - 24} width={n.chipW} height="14" rx="3" fill="rgba(255,255,255,0.95)" />
        <text x={n.cx} y={n.cy - 14} textAnchor="middle" fill="#6D28D9" fontSize="7" fontWeight="700" fontFamily="Mona Sans, sans-serif" letterSpacing="0.08em">{n.label}</text>
      </g>
  )}

    {/* outer team figures */}
    {[
  { x: 44, y: 38 }, { x: 276, y: 38 }, { x: 44, y: 142 }, { x: 276, y: 142 }, { x: 32, y: 90 }, { x: 288, y: 90 }].
  map((p, i) =>
  <g key={i} stroke="rgba(255,255,255,0.7)" strokeWidth="1.2" fill="none">
        <circle cx={p.x} cy={p.y - 4} r="4.5" />
        <path d={`M${p.x - 7} ${p.y + 10} Q${p.x} ${p.y + 2} ${p.x + 7} ${p.y + 10} L${p.x + 7} ${p.y + 16} L${p.x - 7} ${p.y + 16} Z`} />
      </g>
  )}

    {/* connector dashes from outer figures to ring */}
    {[
  [60, 44, 122, 60], [260, 44, 198, 60], [60, 138, 122, 122], [260, 138, 198, 122]].
  map((c, i) =>
  <line key={i} x1={c[0]} y1={c[1]} x2={c[2]} y2={c[3]} stroke="rgba(255,255,255,0.35)" strokeDasharray="2 3" />
  )}
  </svg>;


const Evaluates = () =>
<section className="section bg-off evaluates-section">
    <div className="container">
      <div className="evaluates-grid">
        <div className="evaluates-left">
          <span className="eyebrow">What we measure</span>
          <h2 style={{ marginTop: 16, fontSize: 32, lineHeight: 1.15, color: "var(--psl-dark-navy)", letterSpacing: "-0.02em", maxWidth: 480 }}>
            This diagnostic evaluates performance across three domains.
          </h2>
          <p style={{ marginTop: 24, fontSize: 15, lineHeight: 1.6, color: "var(--psl-mid-grey)", maxWidth: 480 }}>
            Sustained performance under pressure is driven by structure, clarity, and capacity — not effort alone. This diagnostic identifies where your system is currently strongest and where pressure is most likely to find the gaps.
          </p>
        </div>
        <div className="evaluates-right">
          <ul className="domains-list">
            {[
          { num: 1, name: "Performance Identity", meta: "Who shows up under pressure" },
          { num: 2, name: "Execution Architecture", meta: "How the work gets done" },
          { num: 3, name: "Sustainable Capacity", meta: "What fuels and sustains it" }].
          map((d) =>
          <li key={d.num} className="domain-item">
                <span className="domain-num">{d.num}</span>
                <div style={{ flex: 1 }}>
                  <div className="domain-name">{d.name}</div>
                  <div className="domain-meta" style={{ marginTop: 4 }}>{d.meta}</div>
                </div>
              </li>
          )}
          </ul>
        </div>
      </div>
    </div>
  </section>;


// IMPROVEMENT — How it works (set buyer expectations, reduce drop-off)
const HowItWorks = () => {
  const steps = [
  {
    n: "01",
    title: "Take the diagnostic",
    body: "A short, structured set of questions across the three performance domains. No long-form writing, no marketing fluff.",
    time: "~ 7 min",
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 9h8M8 13h8M8 17h5" /></svg>

  },
  {
    n: "02",
    title: "Receive your scored report",
    body: "An executive-style PDF lands in your inbox. Tier, overall score, scores per domain, and your primary constraint.",
    time: "Instant",
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z" /><path d="M14 3v6h6" /><path d="M9 14l2 2 4-4" /></svg>

  },
  {
    n: "03",
    title: "Read the diagnosis",
    body: "Plain-language explanation of what the constraint means, why it matters, and which domains it pressures next.",
    time: "10 min read",
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 12h4l3-8 4 16 3-8h4" /></svg>

  },
  {
    n: "04",
    title: "Act on the next intervention",
    body: "Three recommended focus areas you can act on this week. To go deeper, the paid Comprehensive Diagnostic adds a structured intervention plan and an executive readout.",
    time: "Your move",
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="1" fill="currentColor" /></svg>

  }];

  return (
    <section className="section bg-off how-it-works-merged">
      <div className="container">
        <div className="hiw-divider">
          <span className="eyebrow">How it works · From diagnostic to first intervention</span>
        </div>
        <div className="steps-grid">
          {steps.map((s, i) =>
          <React.Fragment key={s.n}>
              <div className={`step-card step-card-${i + 1}`}>
                <div className="step-num">STEP {s.n}</div>
                <div className="step-icon">{s.icon}</div>
                <div className="step-title">{s.title}</div>
                <div className="step-body">{s.body}</div>
                <div className="step-time">{s.time}</div>
              </div>
              {i < steps.length - 1 &&
            <div className={`step-arrow step-arrow-${i + 1}`} aria-hidden>
                  <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                    <path
                  d="M5 9 L12 16 L19 9"
                  stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.55" />
                  </svg>
                </div>
            }
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

};

// IMPROVEMENT — Trust band, calibrated for tech-leader audience
const TrustBand = () =>
<section className="section bg-off compact">
    <div className="container">
      <div className="trust-band">
        <div>
          <div className="trust-stat-num">3</div>
          <div className="trust-stat-label">Domains, scored independently</div>
          <div className="trust-stat-desc">Performance Identity, Execution Architecture, and Sustainable Capacity — each measured against the same structural pattern.</div>
        </div>
        <div>
          <div className="trust-stat-num">7&nbsp;min</div>
          <div className="trust-stat-label">To complete</div>
          <div className="trust-stat-desc">Structured questions, no long-form writing. Designed for senior operators with no time for self-help workbooks.</div>
        </div>
        <div>
          <div className="trust-stat-num">2 tiers</div>
          <div className="trust-stat-label">Free report, paid follow-on</div>
          <div className="trust-stat-desc">The free diagnostic delivers a structured PDF report. The paid Comprehensive Diagnostic adds a 30-minute executive readout and a recommendation set scoped to your environment.</div>
        </div>
      </div>
    </div>
  </section>;


const FAQ = () => {
  const items = [
  { q: "What happens after I get my report?", a: "The diagnostic and your report are free. If you want to act on it, there is an optional next step: a detailed 90-day performance plan built from your results — £79 for individuals, or a tailored engagement for teams and organisations. There is no obligation; the diagnostic stands on its own." },
  { q: "How long does it take, and do I need to sign up?", a: "About 7 minutes for the individual diagnostic, and around 10 minutes per person for teams. There is no account to create — you start straight away and your report is sent to the email you give at the end." },
  { q: "Is it free?", a: "Yes. Both the individual and the team and organisation diagnostics are free to take. Anything beyond the diagnostic, such as a deeper engagement, is optional and discussed with you separately." },
  { q: "What do I get at the end?", a: "A structured report with your overall score, a breakdown across Identity, Execution, and Capacity, your primary constraint named, and a clear starting point. Everything in the sample cards above is generated from your own responses." },
  { q: "Is it confidential?", a: "Yes. Individual responses are kept private, and team results are only ever presented in aggregate, never attributed to named individuals." }];

  const [open, setOpen] = React.useState(0);
  return (
    <section className="section bg-white">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-left">
            <span className="eyebrow">FAQ</span>
            <h2 style={{ marginTop: 16, fontSize: 40, lineHeight: 1.15, color: "var(--psl-dark-navy)", letterSpacing: "-0.02em", maxWidth: 380 }}>
              Common questions, answered directly.
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.7, color: "var(--psl-mid-grey)", maxWidth: 360 }}>
              Still unsure whether the diagnostic is right for you? Reach out and we'll route you to the right path.
            </p>
            <a href="#" className="faq-contact-link">Contact the team →</a>
          </div>
          <div className="faq-right">
            {items.map((it, i) =>
            <div key={i} className={"faq-item" + (i === open ? " open" : "")}>
                <button className="faq-button" onClick={() => setOpen(i === open ? -1 : i)} aria-expanded={i === open}>
                  <span className="faq-q">{it.q}</span>
                  <span className="faq-toggle" aria-hidden>+</span>
                </button>
                {i === open && <div className="faq-body">{it.a}</div>}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Hero, RoutingCards, Evaluates, HowItWorks, TrustBand, FAQ });