// TWS + EPL tab — the worked-example version of the portal, skinned in Elysium navy/blue.
// Three example opportunities, each with a recommended team and adapted CVs under the Elysium banner.
// The advisors are the same humans as in the Write Stuff tab; their positioning adapts.

const { useState: useStateEPL, useMemo: useMemoEPL, useEffect: useEffectEPL } = React;

// ---- Opportunities ----

const EPL_SCENARIOS = [
  {
    id: 'svc-coach',
    ref: 'EPL-2026-041',
    tag: 'Open tender',
    closes: 'Closes 7 May 2026',
    client: 'Services Australia',
    title: 'Executive coaching — AI adoption for SES cohort',
    summary: 'CSC-level coaching on AI adoption. Six to eight SES leaders. Twelve-week engagement with pre and post diagnostics.',
    value: '$320–420k',
    lead: 'sian',
    team: ['sian', 'kat', 'beryl'],
    highlights: [
      'Deficit-First Framework, road-tested at DPS, directly maps to the tender evaluation criteria.',
      'Kat has run SES-level intervention inside an $8B national security transformation.',
      'Beryl has coached 140+ EL2s into SES — proven pathway from diagnostic to behaviour change.',
    ],
    adaptedCV: 'sian',
  },
  {
    id: 'ci-soci',
    ref: 'EPL-2026-047',
    tag: 'Direct approach',
    closes: 'Rolling',
    client: 'Clean-energy data centre operator',
    title: 'Critical infrastructure uplift — SOCI and executive sponsor',
    summary: 'Mid-tier operator facing SOCI obligations. Needs executive sponsorship and a cleared-and-credentialled change spine.',
    value: '$1.2–1.8m',
    lead: 'kat',
    team: ['kat', 'sian'],
    highlights: [
      'Kat is cleared (PV) with ASD OSA and can sit inside the Ops team from day one.',
      'Sian brings AI governance and regulatory reform experience from environment and defence work.',
      'Both have worked under the Elysium advisory banner on previous ICT uplifts.',
    ],
    adaptedCV: 'kat',
  },
  {
    id: 'femfounder',
    ref: 'EPL-2026-049',
    tag: 'Scoping',
    closes: 'Pre-engagement',
    client: 'Australian government, female-founder panels',
    title: 'Panel readiness — gender-equitable procurement pilot',
    summary: 'Position Elysium + Unordinary jointly for the female-founder panel refresh. Strategy and supporting evidence.',
    value: '$180–260k',
    lead: 'sian',
    team: ['sian', 'kat'],
    highlights: [
      'Both leads are female founders — tender-eligible under the refreshed panel criteria.',
      'Sian led the $13M REDSPICE pitch and brings Commonwealth panel experience.',
      'Kat has two Cabinet submissions and Canberra network density to accelerate the play.',
    ],
    adaptedCV: 'sian',
  },
];

// Full adapted CVs for Sian and Kat, positioned under the Elysium banner.
const EPL_CV_DATA = {
  sian: {
    name: 'Sian Rinaldi',
    tagline: 'Strategic designer · AI adoption · Deficit-First Framework',
    headshot: 'assets/headshot-sian.jpg',
    initials: 'SR',
    location: 'Queanbeyan East, NSW',
    clearance: 'TSPV · NV1 · Baseline · NIC OSA (ASD, Defence)',
    years: '15+ years',
    engagements: '43 across 15+ agencies',
    dayRate: '$2,800',
    about: 'Strategic designer and consultant with 15 years across Defence, national security, environment and industry. Creator of the Deficit-First Framework for AI adoption. GAICD, cleared to NV1 with NIC OSA. Available under the Elysium EPL advisory banner.',
    strengths: [
      { t: 'AI adoption', colour: '#14345D', body: 'Diagnostic-led method. Names the real deficit before naming the tool.' },
      { t: 'Regulatory reform', colour: '#2BB7EA', body: '$13M REDSPICE pitch lead. Environment, industry and defence reform experience.' },
      { t: 'Executive coaching', colour: '#C8A24B', body: 'Behaviour change through repeated, evidenced small moves. Not workshops.' },
    ],
    engagementsList: [
      { year: '2025', client: 'Department of Parliamentary Services', role: 'AI adoption lead', body: 'Designed and delivered the Deficit-First Framework. Adopted by five business units; 18 use-cases qualified or rejected in the first quarter.' },
      { year: '2024', client: 'Department of Industry, Science and Resources', role: 'Evaluation design lead', body: 'Brought seven agency teams into alignment on a shared evaluation frame for the Industry Growth Program by 15 August, ahead of the 30 September board sign-off. Three of the seven had previously declined joint frames.' },
      { year: '2024', client: 'REDSPICE / ASD', role: 'Pitch lead', body: 'Led a $13M capability pitch through sponsor to endorsement. Four-month cycle. Coordinated 11 contributors across three agencies.' },
      { year: '2023', client: 'Department of Climate Change, Energy, the Environment and Water', role: 'Strategic advisor', body: 'Advised on reform design for the nature repair market. Drafted the evidence base that backed the second reading speech.' },
    ],
    credentials: ['GAICD', 'NIC OSA (ASD, Defence)', 'Deficit-First Framework (original method)', 'Master of Public Policy'],
  },
  kat: {
    name: 'Katherine Meagher',
    tagline: 'Intervention architect · Strategic facilitator · Cleared (PV)',
    headshot: 'assets/headshot-kat.jpg',
    initials: 'KM',
    location: 'Canberra, ACT',
    clearance: 'Current PV · ASD OSA',
    years: '18+ years',
    engagements: '31 major interventions',
    dayRate: '$2,800',
    about: 'Intervention architect with 18 years inside Defence, national security and social policy reform. Directed a 10-person team inside an $8B national security transformation. Two Cabinet submissions, APMG-accredited change practitioner. Currently PV-cleared, with ASD OSA. Elysium EPL advisor.',
    strengths: [
      { t: 'National security', colour: '#14345D', body: 'Cleared, credentialled and operator-grade inside integrated ops teams.' },
      { t: 'Cabinet-standard writing', colour: '#2BB7EA', body: 'Two submissions through to Cabinet sign-off. Works under the ministerial clock.' },
      { t: 'Intervention design', colour: '#C8A24B', body: 'APMG-accredited change practitioner. Trauma-informed facilitation method.' },
    ],
    engagementsList: [
      { year: '2024–25', client: 'National security agency', role: 'Intervention lead, $8B transformation', body: 'Directed a 10-person team through Tranche 2 of an $8B reform. Owned a workstream that delivered 18 months early against a stretch milestone.' },
      { year: '2024', client: 'Department of Social Services', role: 'Strategic facilitator', body: 'Trauma-informed co-design across six DFV peak bodies. Produced a 60-page options paper that moved to Cabinet without substantive rewrite.' },
      { year: '2023', client: 'Bushfire Recovery Victoria', role: 'Program design', body: 'Designed the community grants envelope for the 2022–23 recovery program. $184M distributed across 1,240 grants.' },
      { year: '2022', client: 'KPMG / APS200', role: 'Event architect', body: 'Designed and ran a 1,900-person APS200 event. One-day turnaround from Minister\u2019s address to 74 breakout sessions.' },
    ],
    credentials: ['Current PV', 'ASD OSA', 'APMG Change Practitioner', 'Master of Public Policy'],
  },
  beryl: {
    name: 'Beryl Hooper',
    tagline: 'Executive coach · SES development · Baseline',
    headshot: 'assets/headshot-beryl.png',
    initials: 'BH',
    location: 'Melbourne, VIC',
    clearance: 'Baseline',
    years: '22 years',
    engagements: '140+ coached into SES',
    dayRate: '$2,600',
    about: 'Executive coach specialising in SES development and behavioural change. Has coached 140+ EL2s into SES across APS, state government and statutory agencies. PCC-accredited with the ICF. Pairs diagnostic interviews with real-time, in-the-room coaching — not workshops.',
    strengths: [
      { t: 'SES pathway coaching', colour: '#14345D', body: 'Proven pipeline from EL2 capability gap to SES confirmation. Evidence-anchored.' },
      { t: 'AI adoption for leaders', colour: '#2BB7EA', body: 'Twelve-week executive coaching model built around the Deficit-First Framework.' },
      { t: 'Behaviour change', colour: '#C8A24B', body: 'Small, dated, repeated moves. Built into business-as-usual, not off to one side.' },
    ],
    engagementsList: [
      { year: '2025', client: 'Department of Finance', role: 'SES1 coaching cohort', body: 'Twelve-week cohort of eight EL2s. Six confirmed to SES1 within nine months; two elected to stay EL2 with a named development plan.' },
      { year: '2024', client: 'Attorney-General\u2019s Department', role: 'AI adoption exec coaching', body: 'Six SES leaders across two branches. Pre/post diagnostics. Shifted three projects from stalled to in-flight.' },
      { year: '2023', client: 'NSW Public Service Commission', role: 'Executive coaching panel', body: 'One of five named panel coaches for the NSW SES development pipeline. 32 coachees over 18 months.' },
      { year: '2022', client: 'Infrastructure Victoria', role: 'Executive coach', body: 'CEO and three direct reports through a strategy reset. Reframed the 30-year plan into a three-horizon operating rhythm.' },
    ],
    credentials: ['ICF PCC', 'Baseline', 'Deficit-First Framework (certified coach)', 'Master of Organisational Development'],
  },
  chad: {
    name: 'Chad Novak',
    tagline: 'Coach · evidence and selection criteria · Baseline',
    headshot: 'assets/headshot-chad.png',
    initials: 'CN',
    location: 'Brisbane, QLD',
    clearance: 'Baseline',
    years: '12 years',
    engagements: '60+ selection pitches coached',
    dayRate: '$2,200',
    about: 'Specialist coach on evidence-anchored writing for selection criteria and exec pitches. Ex-APS selection panel chair, 60+ pitches coached across SES and EL2 levels. Known for turning waffle into dated, measurable claims. Elysium EPL advisor.',
    strengths: [
      { t: 'Selection criteria', colour: '#14345D', body: 'STAR pattern with measurable R. One story, named and dated, beats five generic paragraphs.' },
      { t: 'Pitch coaching', colour: '#2BB7EA', body: 'Two-minute pitches delivered sitting down, not performed. Substance over warm-up.' },
      { t: 'Panel rehearsal', colour: '#C8A24B', body: 'Runs live panel rehearsals with ex-panel chairs. Targeted, specific, uncomfortable.' },
    ],
    engagementsList: [
      { year: '2025', client: 'Department of Health and Aged Care', role: 'SES pitch coach', body: 'Four EL2 candidates through to SES1 board. Three confirmed in-role; one withdrew on strategic grounds.' },
      { year: '2024', client: 'Department of Home Affairs', role: 'Selection criteria coach', body: 'Cohort of twelve EL1s, redrafted responses against the 2026 SES framework. 9 out of 12 progressed to interview.' },
      { year: '2023', client: 'Queensland Treasury', role: 'Panel rehearsal lead', body: 'Six candidates through rehearsed boards. 100% progressed to offer or close second.' },
    ],
    credentials: ['ICF ACC', 'Baseline', 'Ex-APS selection panel chair'],
  },
  grant: {
    name: 'Grant Okafor',
    tagline: 'Cyber advisor · sovereign capability · NV2',
    headshot: 'assets/headshot-grant.png',
    initials: 'GO',
    location: 'Canberra, ACT',
    clearance: 'NV2 · ASD OSA',
    years: '16 years',
    engagements: '22 sovereign capability uplifts',
    dayRate: '$3,100',
    about: 'Cyber and sovereign capability advisor. Sixteen years across Defence industry, the banks and critical infrastructure. NV2-cleared with ASD OSA. Elysium EPL advisor for SOCI uplift and sovereign ICT programs.',
    strengths: [
      { t: 'SOCI obligations', colour: '#14345D', body: 'Sits inside the Ops team, not next to it. Maps obligations to current operating model in week one.' },
      { t: 'Sovereign capability', colour: '#2BB7EA', body: 'Defence Industry Security Program-aligned. Three sovereign uplifts delivered end-to-end.' },
      { t: 'Regulatory readiness', colour: '#C8A24B', body: 'Prepares boards and CEOs for Home Affairs engagement. Plain language, evidenced.' },
    ],
    engagementsList: [
      { year: '2025', client: 'Clean-energy operator (disclosed on request)', role: 'SOCI lead', body: 'Fourteen-month SOCI program, Tier 2 critical infrastructure designation. Zero non-conformances at Home Affairs check-in.' },
      { year: '2024', client: 'Big-four bank', role: 'Executive cyber advisor', body: 'Coached CISO and deputy through APRA CPS 230 readiness. Two board packs, four regulator briefings.' },
      { year: '2023', client: 'Defence industry SME', role: 'Sovereign uplift', body: 'Delivered DISP and ISM compliance under a 90-day mandate. Opened $40M pipeline the quarter after.' },
    ],
    credentials: ['NV2', 'ASD OSA', 'CISSP', 'DISP-aligned'],
  },
  amara: {
    name: 'Amara Whelan',
    tagline: 'Behavioural designer · evaluation · Baseline',
    headshot: 'assets/headshot-amara.png',
    initials: 'AW',
    location: 'Sydney, NSW',
    clearance: 'Baseline',
    years: '10 years',
    engagements: '28 evaluation frames',
    dayRate: '$2,100',
    about: 'Behavioural designer and evaluation specialist. Builds evaluation frames that line up with the actual decision the sponsor needs to make, not a generic outcomes matrix. Ten years across social policy, health, and regulator portfolios. Elysium EPL advisor.',
    strengths: [
      { t: 'Evaluation design', colour: '#14345D', body: 'Sponsor-first frames. Names the decision, then works backwards to the evidence.' },
      { t: 'Behavioural insight', colour: '#2BB7EA', body: 'Ex-BIT practitioner. Trials and iteratives, not one-shot pilots.' },
      { t: 'Gender-equitable design', colour: '#C8A24B', body: 'Panel experience under gender-equitable procurement pilots. Female-founder eligible.' },
    ],
    engagementsList: [
      { year: '2025', client: 'Department of Health and Aged Care', role: 'Evaluation lead', body: 'Designed the evaluation frame for a $240M preventive-health uplift. Sponsor-ready in eight weeks.' },
      { year: '2024', client: 'Australian Human Rights Commission', role: 'Behavioural designer', body: 'Ran four iteratives with frontline staff; each shifted a named policy dial within the quarter.' },
      { year: '2023', client: 'State regulator (NSW)', role: 'Evaluation re-design', body: 'Retro-fitted evaluation onto a running $70M program. Unblocked the 18-month review.' },
    ],
    credentials: ['Baseline', 'Certified BIT practitioner', 'Female-founder panel-eligible'],
  },
};

// ---- Scenario index page ----

function EPLTab() {
  const t = useBrand();
  const [view, setView] = useStateEPL(() => {
    // 'scenario' view requires a selected scenario object which we don't persist;
    // coerce back to the list so the body never renders blank after a refresh.
    const v = localStorage.getItem('epl_view') || 'scenarios';
    return v === 'scenario' ? 'scenarios' : v;
  });
  const [scenario, setScenario] = useStateEPL(null);

  useEffectEPL(() => {
    // Don't persist the transient 'scenario' detail view.
    if (view !== 'scenario') localStorage.setItem('epl_view', view);
  }, [view]);

  const openScenario = (s) => { setScenario(s); setView('scenario'); };

  const nav = [
    { label: 'Opportunities', route: 'scenarios' },
    { label: 'Advisors', route: 'advisors' },
    { label: 'Tenders', route: 'tenders' },
    { label: 'Method', route: 'method' },
  ];

  return (
    <PortalShell
      nav={nav}
      currentRoute={view === 'scenario' ? 'scenarios' : view}
      go={(r) => { setView(r); setScenario(null); }}
    >
      {view === 'scenarios' && <ScenarioIndex onOpen={openScenario} />}
      {view === 'advisors' && <EPLAdvisors />}
      {view === 'tenders' && <EPLTenders onOpen={openScenario} />}
      {view === 'method' && <EPLMethod />}
      {view === 'scenario' && scenario && (
        <ScenarioDetail scenario={scenario} onBack={() => { setView('scenarios'); setScenario(null); }} />
      )}
    </PortalShell>
  );
}

// ---- Opportunity index ----

function ScenarioIndex({ onOpen }) {
  const t = useBrand();
  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 10 }}>
          Worked example · for Brett Ackroyd
        </div>
        <h1 style={{ font: "700 40px/1.05 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.02em', maxWidth: 820 }}>
          Three example opportunities, run through the Elysium EPL portal.
        </h1>
        <p style={{ font: "400 17px/1.55 Inter, Arial", color: t.body, margin: '14px 0 0', maxWidth: 780 }}>
          This is The Write Stuff under the hood, but configured for Elysium. Same database (though in a live version,
          you would have a separate database, with separate security protocols). Same functionality, same
          administrative ease.
        </p>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
        <Kpi label="Cleared advisors" value="12" note="PV · NV1 · Baseline" />
        <Kpi label="Example opportunities" value="3" note="2 open tender  ·  1 direct" />
        <Kpi label="Pipeline value" value="$2.0m" note="Weighted, 90-day horizon" />
        <Kpi label="Median response" value="36h" note="Brief to shortlist sent" />
      </div>

      {/* Scenarios list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {EPL_SCENARIOS.map(s => (
          <ScenarioRow key={s.id} s={s} onOpen={() => onOpen(s)} />
        ))}
      </div>
    </div>
  );
}

function Kpi({ label, value, note }) {
  const t = useBrand();
  return (
    <div style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10, padding: '18px 20px' }}>
      <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>{label}</div>
      <div style={{ font: "700 28px/1 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.02em', marginBottom: 6 }}>{value}</div>
      <div style={{ font: "400 12px/1.35 Inter, Arial", color: t.muted }}>{note}</div>
    </div>
  );
}

function ScenarioRow({ s, onOpen }) {
  const t = useBrand();
  const lead = EPL_ADVISORS[s.lead];
  return (
    <div onClick={onOpen} style={{
      background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10,
      padding: '22px 26px', cursor: 'pointer',
      display: 'grid', gridTemplateColumns: '1.2fr 1fr auto', gap: 26, alignItems: 'center',
      transition: 'box-shadow .18s, transform .18s, border-color .18s',
    }}
    onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 10px 24px rgba(20,52,93,0.12)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = t.secondary; }}
    onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = t.rule; }}
    >
      <div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
          <span style={{ font: "600 11px/1 'Space Grotesk', Arial", color: '#fff', background: t.primary, padding: '5px 9px', borderRadius: 4, letterSpacing: '.04em', textTransform: 'uppercase' }}>{s.tag}</span>
          <span style={{ font: "500 11px/1 Inter, Arial", color: t.muted, letterSpacing: '.04em' }}>{s.ref}  ·  {s.closes}</span>
        </div>
        <h3 style={{ font: "700 20px/1.2 'Space Grotesk', Arial", color: t.ink, margin: '0 0 6px', letterSpacing: '-.005em' }}>{s.title}</h3>
        <div style={{ font: "500 13px/1.3 Inter, Arial", color: t.secondary, marginBottom: 8 }}>{s.client}</div>
        <p style={{ font: "400 14px/1.55 Inter, Arial", color: t.body, margin: 0, maxWidth: 560 }}>{s.summary}</p>
      </div>
      <div>
        <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>Recommended team</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <StackedAvatars ids={s.team} />
          <span style={{ font: "500 13px/1.3 Inter, Arial", color: t.body }}>
            Lead: <span style={{ color: t.ink, fontWeight: 600 }}>{lead.name}</span>
          </span>
        </div>
        <div style={{ font: "500 12px/1 'Space Grotesk', Arial", color: t.primary }}>{s.value}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Button kind="primary">Open →</Button>
      </div>
    </div>
  );
}

function StackedAvatars({ ids }) {
  const t = useBrand();
  return (
    <div style={{ display: 'flex' }}>
      {ids.map((id, i) => {
        const a = EPL_ADVISORS[id];
        const style = {
          width: 32, height: 32, borderRadius: 999, border: '2px solid #fff',
          marginLeft: i === 0 ? 0 : -10, zIndex: 10 - i,
        };
        return a.headshot
          ? <img key={id} src={a.headshot} alt="" style={{ ...style, objectFit: 'cover' }} />
          : <div key={id} style={{ ...style, background: t.primary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 11px/1 'Space Grotesk', Arial" }}>{a.initials}</div>;
      })}
    </div>
  );
}

// ---- Scenario detail ----

function ScenarioDetail({ scenario, onBack }) {
  const t = useBrand();
  const lead = EPL_ADVISORS[scenario.lead];
  // Which team member's CV is currently showing. Defaults to the scenario's suggested lead CV.
  const [activeCV, setActiveCV] = useStateEPL(() => scenario.adaptedCV);
  useEffectEPL(() => { setActiveCV(scenario.adaptedCV); }, [scenario.id]);
  const cv = EPL_CV_DATA[activeCV] || EPL_CV_DATA[scenario.adaptedCV];

  return (
    <div>
      <Button kind="ghost" onClick={onBack} style={{ paddingLeft: 0, marginBottom: 18 }}>← Back to opportunities</Button>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, gap: 24 }}>
        <div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
            <span style={{ font: "600 11px/1 'Space Grotesk', Arial", color: '#fff', background: t.primary, padding: '5px 9px', borderRadius: 4, letterSpacing: '.04em', textTransform: 'uppercase' }}>{scenario.tag}</span>
            <span style={{ font: "500 12px/1 Inter, Arial", color: t.muted }}>{scenario.ref}  ·  {scenario.closes}</span>
          </div>
          <h1 style={{ font: "700 36px/1.1 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.02em', maxWidth: 820 }}>{scenario.title}</h1>
          <div style={{ font: "600 15px/1.3 'Space Grotesk', Arial", color: t.secondary, marginTop: 8 }}>{scenario.client}  ·  {scenario.value}</div>
        </div>
        <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
          <Button kind="secondary">Download pack</Button>
          <Button kind="primary">Submit via EPL</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24, marginBottom: 32 }}>
        <div style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10, padding: 24 }}>
          <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 12 }}>Brief</div>
          <p style={{ font: "400 16px/1.6 Inter, Arial", color: t.body, margin: '0 0 20px' }}>{scenario.summary}</p>

          <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 12 }}>Why this team</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {scenario.highlights.map((h, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 10, alignItems: 'start' }}>
                <div style={{ width: 20, height: 20, borderRadius: 999, background: t.secondaryLight, color: t.secondary, display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 11px/1 'Space Grotesk', Arial", marginTop: 2 }}>{i + 1}</div>
                <div style={{ font: "400 14px/1.55 Inter, Arial", color: t.body }}>{redactClassified(h)}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: t.primary, color: '#fff', borderRadius: 10, padding: 24, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: 999, background: 'rgba(43,183,234,0.18)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.08em', textTransform: 'uppercase' }}>Recommended team</div>
              <div style={{ font: "500 10px/1 Inter, Arial", color: 'rgba(255,255,255,0.6)', letterSpacing: '.06em', textTransform: 'uppercase' }}>Tap a member to view their CV</div>
            </div>

            {scenario.team.map((id, i) => {
              const a = EPL_ADVISORS[id];
              const isLead = id === scenario.lead;
              const isActive = id === activeCV;
              return (
                <button
                  key={id}
                  onClick={() => setActiveCV(id)}
                  aria-pressed={isActive}
                  style={{
                    width: '100%',
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '12px 12px', margin: '0 -12px',
                    borderRadius: 8,
                    background: isActive ? 'rgba(255,255,255,0.12)' : 'transparent',
                    border: 'none',
                    borderBottom: i < scenario.team.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                    cursor: 'pointer', textAlign: 'left',
                    transition: 'background .15s',
                  }}
                  onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
                >
                  {a.headshot
                    ? <img src={a.headshot} alt="" style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover', border: isActive ? `2px solid ${t.secondary}` : '2px solid rgba(255,255,255,0.3)' }}/>
                    : <div style={{ width: 44, height: 44, borderRadius: 999, background: t.secondary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 14px/1 'Space Grotesk', Arial" }}>{a.initials}</div>
                  }
                  <div style={{ flex: 1 }}>
                    <div style={{ font: "700 15px/1.2 'Space Grotesk', Arial", color: '#fff', marginBottom: 2, display: 'flex', alignItems: 'center', gap: 8 }}>
                      {a.name}
                      {isLead && <span style={{ font: "600 10px/1 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.06em', textTransform: 'uppercase' }}>Lead</span>}
                      {isActive && <span style={{ font: "600 10px/1 'Space Grotesk', Arial", color: t.primary, background: t.secondary, padding: '3px 7px', borderRadius: 3, letterSpacing: '.06em', textTransform: 'uppercase' }}>Viewing</span>}
                    </div>
                    <div style={{ font: "400 12px/1.4 Inter, Arial", color: 'rgba(255,255,255,0.72)' }}>{a.role}</div>
                  </div>
                  <div style={{ font: "500 11px/1 'Space Grotesk', Arial", color: 'rgba(255,255,255,0.6)', letterSpacing: '.04em', textTransform: 'uppercase' }}><Classified>{a.clearanceShort}</Classified></div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* Adapted CV */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
          <div>
            <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 8 }}>Adapted CV · {EPL_ADVISORS[activeCV]?.name || lead.name}</div>
            <h2 style={{ font: "700 26px/1.15 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.015em' }}>Under the Elysium EPL banner</h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button kind="secondary">Export PDF</Button>
            <Button kind="ghost">Regenerate bio</Button>
          </div>
        </div>
        <AdaptedCV cv={cv} key={activeCV} />
      </div>
    </div>
  );
}

// ---- Adapted CV (bold, Elysium-branded) ----

function AdaptedCV({ cv }) {
  const t = useBrand();
  return (
    <div style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 12, overflow: 'hidden', boxShadow: '0 8px 28px rgba(20,52,93,0.08)' }}>
      {/* Masthead */}
      <div style={{ background: t.primary, color: '#fff', padding: '32px 36px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 260, height: 260, borderRadius: 999, background: 'rgba(43,183,234,0.15)' }} />
        <div style={{ position: 'absolute', bottom: -100, right: 80, width: 200, height: 200, borderRadius: 999, background: 'rgba(200,162,75,0.12)' }} />
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 24 }}>
          {cv.headshot
            ? <img src={cv.headshot} alt="" style={{ width: 104, height: 104, borderRadius: 999, objectFit: 'cover', border: '3px solid rgba(255,255,255,0.3)' }}/>
            : <div style={{ width: 104, height: 104, borderRadius: 999, background: t.secondary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 36px/1 'Space Grotesk', Arial", border: '3px solid rgba(255,255,255,0.3)' }}>{cv.initials}</div>
          }
          <div style={{ flex: 1 }}>
            <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 8 }}>Elysium EPL · Advisor</div>
            <h2 style={{ font: "700 36px/1.05 'Space Grotesk', Arial", color: '#fff', margin: 0, letterSpacing: '-.02em' }}>{cv.name}</h2>
            <div style={{ font: "500 15px/1.3 Inter, Arial", color: 'rgba(255,255,255,0.82)', marginTop: 8 }}>{cv.tagline}</div>
          </div>
          <div style={{ display: 'flex', gap: 18 }}>
            <MastheadStat label="Clearance" value={<Classified>{cv.clearance}</Classified>} />
            <MastheadStat label="Experience" value={cv.years} />
            <MastheadStat label="Engagements" value={cv.engagements} />
          </div>
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '32px 36px 36px', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 36 }}>
        {/* Left column */}
        <div>
          <SectionHeader colour={t.primary} num="01" title="Summary" />
          <p style={{ font: "400 14px/1.65 Inter, Arial", color: t.body, margin: '10px 0 28px' }}>{redactClassified(cv.about)}</p>

          <SectionHeader colour={t.secondary} num="02" title="Credentials" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
            {cv.credentials.map(c => {
              const sensitive = /ASD|REDSPICE/i.test(c);
              return (
                <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 10, font: "500 13px/1.35 Inter, Arial", color: t.ink }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: t.secondary }} />
                  {sensitive ? <Classified>{c}</Classified> : c}
                </div>
              );
            })}
          </div>
        </div>

        {/* Right column */}
        <div>
          <SectionHeader colour={t.primary} num="03" title="Core strengths" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, margin: '12px 0 28px' }}>
            {cv.strengths.map(s => (
              <div key={s.t} style={{ background: t.soft, border: `1px solid ${t.rule}`, borderRadius: 8, padding: '14px 14px 16px', position: 'relative', overflow: 'hidden' }}>
                <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: s.colour }} />
                <div style={{ font: "700 13px/1.2 'Space Grotesk', Arial", color: s.colour, marginBottom: 6, letterSpacing: '-.005em' }}>{s.t}</div>
                <div style={{ font: "400 12px/1.5 Inter, Arial", color: t.body }}>{redactClassified(s.body)}</div>
              </div>
            ))}
          </div>

          <SectionHeader colour={t.primary} num="04" title="Selected engagements" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 8 }}>
            {cv.engagementsList.map((e, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 14, padding: '14px 0', borderBottom: i < cv.engagementsList.length - 1 ? `1px solid ${t.rule}` : 'none' }}>
                <div style={{ font: "700 13px/1.2 'Space Grotesk', Arial", color: t.secondary, letterSpacing: '.02em' }}>{e.year}</div>
                <div>
                  <div style={{ font: "700 14px/1.25 'Space Grotesk', Arial", color: t.ink, marginBottom: 2, letterSpacing: '-.005em' }}>{redactClassified(e.client)}</div>
                  <div style={{ font: "500 12px/1.3 Inter, Arial", color: t.muted, marginBottom: 6, letterSpacing: '.02em', textTransform: 'uppercase' }}>{e.role}</div>
                  <div style={{ font: "400 13px/1.55 Inter, Arial", color: t.body }}>{redactClassified(e.body)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Footer bar */}
      <div style={{ padding: '14px 36px', background: t.soft, borderTop: `1px solid ${t.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ font: "500 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.06em', textTransform: 'uppercase' }}>Elysium EPL  ·  Comprehensive, enduring value</div>
        <div style={{ font: "500 11px/1 Inter, Arial", color: t.muted }}>Generated 21 Apr 2026  ·  Advisor-maintained</div>
      </div>
    </div>
  );
}

function MastheadStat({ label, value }) {
  return (
    <div>
      <div style={{ font: "500 10px/1 'Space Grotesk', Arial", color: 'rgba(255,255,255,0.6)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ font: "700 13px/1.3 'Space Grotesk', Arial", color: '#fff', letterSpacing: '-.005em', maxWidth: 170 }}>{value}</div>
    </div>
  );
}

function SectionHeader({ colour, num, title }) {
  const t = useBrand();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ font: "700 11px/1 'Space Grotesk', Arial", color: colour, letterSpacing: '.06em' }}>{num}</span>
      <span style={{ flex: 1, height: 1, background: colour, opacity: 0.3 }} />
      <span style={{ font: "700 13px/1 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.005em', textTransform: 'uppercase' }}>{title}</span>
    </div>
  );
}

// ---- Other EPL views (lightweight) ----

const EPL_ADVISORS = {
  sian: { name: 'Sian Rinaldi', initials: 'SR', headshot: 'assets/headshot-sian.jpg', role: 'Strategic designer · AI adoption', clearanceShort: 'NV1 · OSA', availability: 'available' },
  kat: { name: 'Katherine Meagher', initials: 'KM', headshot: 'assets/headshot-kat.jpg', role: 'Intervention architect · Facilitator', clearanceShort: 'PV · OSA', availability: 'available' },
  beryl: { name: 'Beryl Hooper', initials: 'BH', headshot: 'assets/headshot-beryl.png', role: 'Executive coach · SES development', clearanceShort: 'Baseline', availability: 'partial' },
  chad: { name: 'Chad Novak', initials: 'CN', headshot: 'assets/headshot-chad.png', role: 'Coach · evidence & selection criteria', clearanceShort: 'Baseline', availability: 'available' },
  grant: { name: 'Grant Okafor', initials: 'GO', headshot: 'assets/headshot-grant.png', role: 'Cyber advisor · sovereign capability', clearanceShort: 'NV2 · OSA', availability: 'available' },
  amara: { name: 'Amara Whelan', initials: 'AW', headshot: 'assets/headshot-amara.png', role: 'Behavioural designer · evaluation', clearanceShort: 'Baseline', availability: 'partial' },
};

function EPLAdvisors() {
  const t = useBrand();
  const [selected, setSelected] = useStateEPL(null);

  // Detail view: adapted CV + opportunities where this advisor is on the team
  if (selected) {
    const cv = EPL_CV_DATA[selected];
    const advisor = EPL_ADVISORS[selected];
    const onTeam = EPL_SCENARIOS.filter(s => s.team.includes(selected));
    return (
      <div>
        <Button kind="ghost" onClick={() => setSelected(null)} style={{ paddingLeft: 0, marginBottom: 18 }}>← Back to advisors</Button>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
          <div>
            <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 8 }}>Advisor · {advisor.name}</div>
            <h1 style={{ font: "700 32px/1.15 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.015em' }}>Adapted CV under the Elysium EPL banner</h1>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button kind="secondary">Export PDF</Button>
            <Button kind="ghost">Regenerate bio</Button>
          </div>
        </div>

        {cv
          ? <AdaptedCV cv={cv} key={selected} />
          : (
            <div style={{ background: '#fff', border: `1px dashed ${t.rule}`, borderRadius: 10, padding: 32, textAlign: 'center', color: t.muted, font: "500 14px/1.5 Inter, Arial" }}>
              This advisor hasn't been onboarded to the Elysium adapted-CV template yet. Their Unordinary profile is still available on the Write Stuff portal.
            </div>
          )
        }

        {onTeam.length > 0 && (
          <div style={{ marginTop: 32 }}>
            <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 12 }}>On the team for</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {onTeam.map(s => (
                <div key={s.id} style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 8, padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ font: "600 14px/1.25 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.005em' }}>{s.title}</div>
                    <div style={{ font: "400 12px/1.4 Inter, Arial", color: t.muted, marginTop: 2 }}>{s.client}  ·  {s.ref}  ·  {s.value}</div>
                  </div>
                  {s.lead === selected && <span style={{ font: "600 10px/1 'Space Grotesk', Arial", color: t.secondary, background: t.secondaryLight, padding: '4px 8px', borderRadius: 3, letterSpacing: '.06em', textTransform: 'uppercase' }}>Lead</span>}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  // Grid view
  return (
    <div>
      <h1 style={{ font: "700 36px/1.08 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px', letterSpacing: '-.02em' }}>Advisors under the Elysium banner</h1>
      <p style={{ font: "400 16px/1.55 Inter, Arial", color: t.body, margin: '0 0 28px', maxWidth: 720 }}>
        The same advisor panel as the Unordinary portal. Each advisor maintains their own profile.
        Elysium surfaces them against live opportunities with the Elysium skin applied. Click any advisor to see their adapted CV.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {Object.entries(EPL_ADVISORS).map(([id, a]) => {
          const cvCount = EPL_CV_DATA[id] ? EPL_CV_DATA[id].engagementsList.length : 0;
          const onTeamCount = EPL_SCENARIOS.filter(s => s.team.includes(id)).length;
          return (
            <button
              key={id}
              onClick={() => setSelected(id)}
              style={{
                background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10,
                padding: 18, display: 'flex', gap: 14, alignItems: 'flex-start',
                textAlign: 'left', cursor: 'pointer',
                transition: 'box-shadow .18s, transform .18s, border-color .18s',
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 10px 24px rgba(20,52,93,0.12)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = t.secondary; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = t.rule; }}
            >
              {a.headshot
                ? <img src={a.headshot} alt="" style={{ width: 52, height: 52, borderRadius: 999, objectFit: 'cover', flexShrink: 0 }}/>
                : <div style={{ width: 52, height: 52, borderRadius: 999, background: t.primary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 16px/1 'Space Grotesk', Arial", flexShrink: 0 }}>{a.initials}</div>
              }
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: "700 15px/1.2 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.005em' }}>{a.name}</div>
                <div style={{ font: "400 12px/1.4 Inter, Arial", color: t.body, marginTop: 2 }}>{a.role}</div>
                <div style={{ font: "500 11px/1.3 'Space Grotesk', Arial", color: t.secondary, marginTop: 8, letterSpacing: '.04em', textTransform: 'uppercase' }}><Classified>{a.clearanceShort}</Classified></div>
                <div style={{ display: 'flex', gap: 12, marginTop: 10, font: "500 11px/1 Inter, Arial", color: t.muted }}>
                  <span>{cvCount > 0 ? `${cvCount} engagements` : 'Profile only'}</span>
                  {onTeamCount > 0 && <span style={{ color: t.secondary, fontWeight: 600 }}>• On {onTeamCount} {onTeamCount === 1 ? 'opportunity' : 'opportunities'}</span>}
                </div>
              </div>
              <div style={{ font: "700 14px/1 'Space Grotesk', Arial", color: t.secondary, flexShrink: 0, marginTop: 2 }}>→</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function EPLTenders({ onOpen }) {
  const t = useBrand();
  return (
    <div>
      <h1 style={{ font: "700 36px/1.08 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px', letterSpacing: '-.02em' }}>Tenders</h1>
      <p style={{ font: "400 16px/1.55 Inter, Arial", color: t.body, margin: '0 0 24px', maxWidth: 720 }}>
        Open and scoping-stage opportunities. Click through to see the recommended team and adapted CV.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {EPL_SCENARIOS.filter(s => s.tag !== 'Scoping').map(s => (
          <ScenarioRow key={s.id} s={s} onOpen={() => onOpen(s)} />
        ))}
      </div>
    </div>
  );
}

function EPLMethod() {
  const t = useBrand();
  const loops = [
    { n: '01', colour: t.primary, title: 'Advisors self-maintain', body: 'Each advisor owns a single profile. Skills, sectors, clearance, availability, day rate. Updated the moment something changes, with an update pulse back to Elysium.' },
    { n: '02', colour: t.secondary, title: 'Scenarios pull from the pool', body: 'A brief comes in. The portal surfaces advisors matched on skills, clearance and availability — not gut feel. Shortlist in hours, evidenced.' },
    { n: '03', colour: '#C8A24B', title: 'Adapted CVs, one click', body: 'The CV reskins under the Elysium banner and reweights evidence for the specific brief. Export PDF, submit via EPL, done.' },
    { n: '04', colour: t.tertiary, title: 'Feedback loops', body: 'Win/lose rates, utilisation, rate realisation and advisor NPS flow back to the pool. The next brief starts smarter.' },
  ];
  return (
    <div>
      <h1 style={{ font: "700 36px/1.08 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px', letterSpacing: '-.02em' }}>Method</h1>
      <p style={{ font: "400 16px/1.55 Inter, Arial", color: t.body, margin: '0 0 28px', maxWidth: 720 }}>
        The four loops that turn an advisor panel into a running platform.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {loops.map(l => (
          <div key={l.n} style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10, padding: 24, position: 'relative', overflow: 'hidden' }}>
            <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 5, background: l.colour }} />
            <div style={{ font: "700 11px/1 'Space Grotesk', Arial", color: l.colour, letterSpacing: '.08em', marginBottom: 10 }}>{l.n}</div>
            <h3 style={{ font: "700 20px/1.2 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px', letterSpacing: '-.01em' }}>{l.title}</h3>
            <p style={{ font: "400 14px/1.6 Inter, Arial", color: t.body, margin: 0 }}>{l.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

window.EPLTab = EPLTab;