// The Write Stuff (Unordinary tab) — back-end advisor roster portal.
// Brett's vision: "what a back end of the portal looks like." Three views:
// 1) Advisor roster (the default) — tiles of advisors with availability, skills, last update
// 2) Open tenders / opportunities — match advisors to a brief
// 3) Applications in draft — the original pack view, retained as a mode
// The single top bar has the action buttons — no duplicated CTAs further down.

const { useState: useStateTWS } = React;

// ---- Data ----

const ADVISORS = [
  {
    id: 'sian', name: 'Sian Rinaldi', initials: 'SR', headshot: 'assets/headshot-sian.jpg',
    role: 'Strategic designer · AI adoption practitioner',
    location: 'Queanbeyan East, NSW',
    availability: 'available', availableFrom: '28 Apr 2026',
    dayRate: '$2,200', clearance: 'TSPV · NV1 · Baseline · NIC OSA (ASD, Defence)',
    lastSelfUpdate: '18 Apr 2026',
    skills: ['AI adoption', 'Executive coaching', 'Deficit-First Framework', 'Co-design', 'Regulatory reform', 'Change management', 'Governance'],
    sectors: ['Defence', 'Critical infrastructure', 'Health reg.', 'Environment', 'Industry'],
    hoursThisQtr: 42, capacity: 120,
    highlights: '15+ yrs, 43 engagements across 15+ agencies. Deficit-First Framework road-tested at DPS. $13M REDSPICE pitch lead.',
  },
  {
    id: 'kat', name: 'Katherine Meagher', initials: 'KM', headshot: 'assets/headshot-kat.jpg',
    role: 'Intervention architect · Strategic facilitator',
    location: 'Canberra, ACT',
    availability: 'available', availableFrom: '21 Apr 2026',
    dayRate: '$2,200', clearance: 'Current PV · ASD OSA',
    lastSelfUpdate: '20 Apr 2026',
    skills: ['Strategic facilitation', 'Program delivery', 'Change mgmt (APMG)', 'Requirements elicitation', 'Trauma-informed design', 'Cabinet-standard writing'],
    sectors: ['Defence', 'National security', 'Disability', 'Bushfire recovery', 'Aged care'],
    hoursThisQtr: 18, capacity: 120,
    highlights: '18+ yrs. Directed a 10-person team inside an $8B national security transformation. Two Cabinet submissions. 1,900-person event at KPMG.',
  },
  {
    id: 'beryl', name: 'Beryl Hooper', initials: 'BH', headshot: 'assets/headshot-beryl.png',
    role: 'Executive coach · SES development',
    location: 'Canberra, ACT',
    availability: 'partial', availableFrom: '6 May 2026',
    dayRate: '$1,900', clearance: 'Baseline',
    lastSelfUpdate: '14 Apr 2026',
    skills: ['Executive coaching', 'SES development', 'Cover letter craft', 'Interview prep', 'Board readiness'],
    sectors: ['APS', 'NFP boards', 'Higher education'],
    hoursThisQtr: 78, capacity: 100,
    highlights: '22+ yrs. Coached 140+ EL2s into SES. Panel chair for three 2025 APS roundtables.',
  },
  {
    id: 'chad', name: 'Chad Novak', initials: 'CN', headshot: 'assets/headshot-chad.png',
    role: 'Coach · evidence and selection criteria',
    location: 'Melbourne, VIC',
    availability: 'available', availableFrom: '24 Apr 2026',
    dayRate: '$1,800', clearance: 'Baseline',
    lastSelfUpdate: '19 Apr 2026',
    skills: ['Selection criteria', 'STAR responses', 'Evidence mining', 'APS process'],
    sectors: ['APS', 'Victorian public sector'],
    hoursThisQtr: 54, capacity: 100,
    highlights: 'Former EL2 (Treasury). 300+ briefing packs drafted. Ran the 2025 APS merit roundtable.',
  },
  {
    id: 'grant', name: 'Grant Okafor', initials: 'GO', headshot: 'assets/headshot-grant.png',
    role: 'Cyber advisor · sovereign capability',
    location: 'Canberra, ACT',
    availability: 'available', availableFrom: '28 Apr 2026',
    dayRate: '$2,400', clearance: 'TSPV · NV2 · ASD OSA',
    lastSelfUpdate: '15 Apr 2026',
    skills: ['Sovereign cyber', 'SOCI', 'Critical infrastructure', 'Red-teaming', 'Policy translation'],
    sectors: ['Defence', 'Critical infrastructure', 'Energy'],
    hoursThisQtr: 36, capacity: 120,
    highlights: '14 yrs. Former ACSC. Led three SOCI uplifts in 2024. AWS re:Inforce speaker.',
  },
  {
    id: 'amara', name: 'Amara Whelan', initials: 'AW', headshot: 'assets/headshot-amara.png',
    role: 'Behavioural designer · evaluation',
    location: 'Sydney, NSW',
    availability: 'partial', availableFrom: '1 May 2026',
    dayRate: '$1,900', clearance: 'Baseline',
    lastSelfUpdate: '11 Apr 2026',
    skills: ['Behavioural design', 'Nudge trials', 'Impact evaluation', 'Mixed methods'],
    sectors: ['Aviation', 'Industry', 'Gender equity'],
    hoursThisQtr: 62, capacity: 100,
    highlights: 'Behavioural Insights Team alum. Co-lead Women in Aviation nudge trial, +43% reported change.',
  },
];

const OPEN_OPPORTUNITIES = [
  {
    id: 'svc', tag: 'Open tender',
    title: 'Services Australia — executive coaching for AI adoption',
    closes: '7 May 2026',
    brief: 'CSC-level coaching on AI adoption. 6–8 leaders, 12-week engagement, cleared preferred.',
    shortlist: ['sian', 'kat', 'beryl'],
  },
  {
    id: 'socl', tag: 'Direct approach',
    title: 'Clean-energy data centre operator — SOCI uplift and executive sponsor',
    closes: 'Rolling',
    brief: 'Mid-tier data centre operator. Critical infrastructure, SOCI exposure. Executive change spine needed.',
    shortlist: ['grant', 'sian', 'kat'],
  },
  {
    id: 'indus', tag: 'Scoping',
    title: 'Industry client — diagnostic front door for new capability bet',
    closes: 'Pre-engagement',
    brief: 'Mid-market ASX-lite. Board-approved bet. Buy-vs-build read and operating model diagnostic.',
    shortlist: ['sian', 'amara', 'kat'],
  },
];

const APPLICATIONS = [
  { id: 'exec', title: 'Ailsa McIntyre — exec leadership pack', status: 'In review', badgeTone: 'primary', advisor: 'beryl', accent: '#2AB59E', updated: '18 Apr', progress: 72, summary: 'EL2 → SES Band 1. Two target applications drafted, evidence section in review.' },
  { id: 'board', title: 'Jo Priestley — board-readiness pack', status: 'Drafting', badgeTone: 'secondary', advisor: 'chad', accent: '#E8198B', updated: '12 Apr', progress: 40, summary: 'NFP board applications. Three chairs shortlisted, cover notes drafted.' },
  { id: 'pivot', title: 'Dan Ortega — policy to philanthropy', status: 'Exploratory', badgeTone: 'tertiary', advisor: 'sian', accent: '#FFCC00', updated: '08 Apr', progress: 22, summary: 'Exploratory pivot after 18 years in the APS. Direction narrowed to two sectors.' },
];

// ---- View ----

function WriteStuffTab() {
  const t = useBrand();
  const [mode, setMode] = useStateTWS(() => localStorage.getItem('tws_mode') || 'roster');
  const [selectedAdvisor, setSelectedAdvisor] = useStateTWS(null);
  const [selectedApp, setSelectedApp] = useStateTWS(null);
  const [search, setSearch] = useStateTWS('');

  React.useEffect(() => { localStorage.setItem('tws_mode', mode); }, [mode]);

  const MODES = [
    { key: 'roster', label: 'Advisors' },
    { key: 'opps', label: 'Open opportunities' },
    { key: 'apps', label: 'Applications in draft' },
  ];

  // pack-preview mode (legacy flow, kept for demo of what the portal can do)
  if (selectedApp) {
    return (
      <PortalShell
        nav={[{ label: 'Overview', route: 'overview' }]}
        currentRoute="overview"
        go={() => { setSelectedApp(null); }}
      >
        <PackPreview pack={selectedApp} onBack={() => setSelectedApp(null)} />
      </PortalShell>
    );
  }

  return (
    <PortalShell
      nav={[
        { label: 'Overview', route: 'overview' },
        { label: 'Advisors', route: 'roster' },
        { label: 'Opportunities', route: 'opps' },
        { label: 'Applications', route: 'apps' },
        { label: 'Library', route: 'lib' },
        { label: 'Settings', route: 'settings' },
      ]}
      currentRoute="overview"
      go={() => {}}
    >
      {/* Hero / back-end framing */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 10 }}>
          Back-end portal · preview for Elysium
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20 }}>
          <div>
            <h1 style={{ font: "700 36px/1.08 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.02em' }}>
              Your clients, their opportunities, one portal.
            </h1>
            <p style={{ font: "400 16px/1.5 Inter, Arial", color: t.body, margin: '12px 0 0', maxWidth: 760 }}>
              This is what The Write Stuff looks like from the perspective of a recruiter or coach helping clients.
              Clients are able to engage via a front line portal to keep their CVs current. The coach can then coach
              and champion them through to new opportunities. See the TWS + EPL tab to see how it could work for
              Elysium EPL.
            </p>
          </div>
          {/* Single action cluster — no duplication anywhere else on the page */}
          <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
            <Button kind="secondary">Export CSV</Button>
            <Button kind="primary">+ Add advisor</Button>
            <Button kind="cta">+ New opportunity</Button>
          </div>
        </div>
      </div>

      {/* Mode tabs */}
      <div style={{ display: 'flex', gap: 2, marginBottom: 22, borderBottom: `1px solid ${t.rule}` }}>
        {MODES.map(m => {
          const active = mode === m.key;
          return (
            <button key={m.key} onClick={() => { setMode(m.key); setSelectedAdvisor(null); }} style={{
              font: "600 14px/1 'Space Grotesk', Arial",
              padding: '12px 18px', border: 'none', cursor: 'pointer',
              background: 'transparent', color: active ? t.ink : t.body,
              borderBottom: `2px solid ${active ? t.primary : 'transparent'}`,
              marginBottom: -1,
            }}>{m.label}</button>
          );
        })}
        <div style={{ flex: 1 }} />
        {mode === 'roster' && (
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search skills, sectors, clearance…"
            style={{
              alignSelf: 'center', marginBottom: 8,
              padding: '8px 12px', border: `1px solid ${t.rule}`, borderRadius: 6,
              font: "400 13px/1.2 Inter, Arial", width: 280, outline: 'none', color: t.ink,
            }}
          />
        )}
      </div>

      {/* Mode bodies */}
      {mode === 'roster' && (
        <RosterView
          advisors={ADVISORS}
          search={search}
          selected={selectedAdvisor}
          onSelect={setSelectedAdvisor}
        />
      )}
      {mode === 'opps' && (
        <OpportunitiesView opps={OPEN_OPPORTUNITIES} advisors={ADVISORS} />
      )}
      {mode === 'apps' && (
        <ApplicationsView apps={APPLICATIONS} advisors={ADVISORS} onOpen={setSelectedApp} />
      )}
    </PortalShell>
  );
}

// ---- Roster ----

function RosterView({ advisors, search, selected, onSelect }) {
  const t = useBrand();
  const q = search.trim().toLowerCase();
  const filtered = !q ? advisors : advisors.filter(a =>
    (a.name + ' ' + a.role + ' ' + a.skills.join(' ') + ' ' + a.sectors.join(' ') + ' ' + a.clearance).toLowerCase().includes(q)
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: selected ? '1.2fr 1fr' : '1fr', gap: 24, alignItems: 'start' }}>
      <div style={{ display: 'grid', gridTemplateColumns: selected ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 14 }}>
        {filtered.map(a => (
          <AdvisorCard key={a.id} advisor={a} active={selected === a.id} onClick={() => onSelect(selected === a.id ? null : a.id)} />
        ))}
      </div>
      {selected && (
        <AdvisorDetail advisor={advisors.find(a => a.id === selected)} onClose={() => onSelect(null)} />
      )}
    </div>
  );
}

function AvailabilityDot({ status }) {
  const map = {
    available: { color: '#2AB59E', label: 'Available' },
    partial:   { color: '#FFCC00', label: 'Part-time' },
    booked:    { color: '#E8198B', label: 'Booked' },
  };
  const s = map[status] || map.partial;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: "600 11px/1 'Space Grotesk', Arial", color: s.color, letterSpacing: '.04em', textTransform: 'uppercase' }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: s.color }} />
      {s.label}
    </span>
  );
}

function AdvisorCard({ advisor, active, onClick }) {
  const t = useBrand();
  const a = advisor;
  const utilPct = Math.round((a.hoursThisQtr / a.capacity) * 100);
  return (
    <div onClick={onClick} style={{
      background: '#fff', border: `1px solid ${active ? t.primary : t.rule}`, borderRadius: 10,
      padding: 18, cursor: 'pointer', transition: 'border-color .15s, box-shadow .15s, transform .15s',
      boxShadow: active ? `0 0 0 3px ${t.primaryMid}` : 'none',
    }}
    onMouseEnter={e => { if (!active) { e.currentTarget.style.boxShadow = '0 8px 20px rgba(26,26,26,0.08)'; e.currentTarget.style.transform = 'translateY(-2px)'; } }}
    onMouseLeave={e => { if (!active) { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; } }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          {a.headshot ? (
            <img src={a.headshot} alt="" style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover' }} />
          ) : (
            <div style={{ width: 44, height: 44, borderRadius: 999, background: t.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 14px/1 'Space Grotesk', Arial" }}>{a.initials}</div>
          )}
          <div>
            <div style={{ font: "700 15px/1.15 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.005em' }}>{a.name}</div>
            <div style={{ font: "400 12px/1.3 Inter, Arial", color: t.muted, marginTop: 2 }}>{a.location}</div>
          </div>
        </div>
        <AvailabilityDot status={a.availability} />
      </div>

      <div style={{ font: "500 13px/1.4 Inter, Arial", color: t.body, marginBottom: 12 }}>{a.role}</div>

      {/* Skills */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 12, minHeight: 44 }}>
        {a.skills.slice(0, 4).map(s => (
          <span key={s} style={{ font: "500 11px/1 Inter, Arial", padding: '5px 8px', borderRadius: 4, background: t.soft, color: t.body, border: `1px solid ${t.rule}` }}>{s}</span>
        ))}
        {a.skills.length > 4 && (
          <span style={{ font: "500 11px/1 Inter, Arial", padding: '5px 8px', color: t.muted }}>+{a.skills.length - 4}</span>
        )}
      </div>

      {/* Utilisation bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{ flex: 1, height: 4, background: t.soft, borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: `${Math.min(utilPct, 100)}%`, height: '100%', background: utilPct > 90 ? '#E8198B' : t.primary }} />
        </div>
        <span style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.body, minWidth: 50, textAlign: 'right' }}>{utilPct}% Q2</span>
      </div>

      {/* Meta row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', font: "400 11px/1.3 Inter, Arial", color: t.muted, paddingTop: 10, borderTop: `1px solid ${t.rule}` }}>
        <span>Self-updated {a.lastSelfUpdate}</span>
        <span>{a.dayRate}/day</span>
      </div>
    </div>
  );
}

function AdvisorDetail({ advisor, onClose }) {
  const t = useBrand();
  const a = advisor;
  return (
    <div style={{ background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10, padding: 24, position: 'sticky', top: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          {a.headshot ? (
            <img src={a.headshot} alt="" style={{ width: 64, height: 64, borderRadius: 999, objectFit: 'cover' }} />
          ) : (
            <div style={{ width: 64, height: 64, borderRadius: 999, background: t.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 20px/1 'Space Grotesk', Arial" }}>{a.initials}</div>
          )}
          <div>
            <h3 style={{ font: "700 22px/1.15 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.01em' }}>{a.name}</h3>
            <div style={{ font: "500 13px/1.3 Inter, Arial", color: t.body, marginTop: 4 }}>{a.role}</div>
          </div>
        </div>
        <button onClick={onClose} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: t.muted, font: "400 20px/1 'Space Grotesk', Arial" }}>×</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 18px', marginBottom: 18 }}>
        <DetailField label="Availability" value={<AvailabilityDot status={a.availability} />} />
        <DetailField label="From" value={a.availableFrom} />
        <DetailField label="Day rate" value={a.dayRate} />
        <DetailField label="Self-updated" value={a.lastSelfUpdate} />
        <DetailField label="Clearance" value={<Classified>{a.clearance}</Classified>} wide />
      </div>

      <SectionLabel>Highlight</SectionLabel>
      <p style={{ font: "400 14px/1.55 Inter, Arial", color: t.body, margin: '8px 0 18px' }}>{redactClassified(a.highlights)}</p>

      <SectionLabel>Skills</SectionLabel>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, margin: '8px 0 16px' }}>
        {a.skills.map(s => (
          <span key={s} style={{ font: "500 12px/1 Inter, Arial", padding: '6px 10px', borderRadius: 4, background: t.primaryLight, color: t.primary, border: `1px solid ${t.primaryMid}` }}>{s}</span>
        ))}
      </div>

      <SectionLabel>Sectors</SectionLabel>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, margin: '8px 0 20px' }}>
        {a.sectors.map(s => (
          <span key={s} style={{ font: "500 12px/1 Inter, Arial", padding: '6px 10px', borderRadius: 4, background: t.soft, color: t.body, border: `1px solid ${t.rule}` }}>{s}</span>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 8, paddingTop: 16, borderTop: `1px solid ${t.rule}` }}>
        <Button kind="primary">View CV</Button>
        <Button kind="secondary">Generate bio</Button>
        <Button kind="ghost">Request availability</Button>
      </div>
    </div>
  );
}

function DetailField({ label, value, wide }) {
  const t = useBrand();
  return (
    <div style={{ gridColumn: wide ? '1 / -1' : 'auto' }}>
      <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div style={{ font: "500 13px/1.35 Inter, Arial", color: t.ink }}>{value}</div>
    </div>
  );
}

function SectionLabel({ children }) {
  const t = useBrand();
  return (
    <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.06em', textTransform: 'uppercase' }}>{children}</div>
  );
}

// ---- Opportunities ----

function OpportunitiesView({ opps, advisors }) {
  const t = useBrand();
  const byId = Object.fromEntries(advisors.map(a => [a.id, a]));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {opps.map(o => (
        <div key={o.id} style={{
          background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10,
          padding: '20px 24px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 28,
        }}>
          <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8 }}>
              <span style={{ font: "600 11px/1 'Space Grotesk', Arial", color: t.primary, background: t.primaryMid, padding: '4px 8px', borderRadius: 4, letterSpacing: '.04em', textTransform: 'uppercase' }}>{o.tag}</span>
              <span style={{ font: "400 12px/1 Inter, Arial", color: t.muted }}>Closes {o.closes}</span>
            </div>
            <h3 style={{ font: "700 19px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px', letterSpacing: '-.005em' }}>{o.title}</h3>
            <p style={{ font: "400 14px/1.55 Inter, Arial", color: t.body, margin: '0 0 14px' }}>{o.brief}</p>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button kind="primary">Open brief</Button>
              <Button kind="secondary">Generate pack</Button>
            </div>
          </div>
          <div style={{ borderLeft: `1px solid ${t.rule}`, paddingLeft: 24 }}>
            <SectionLabel>Shortlist</SectionLabel>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 10 }}>
              {o.shortlist.map(id => {
                const a = byId[id];
                return (
                  <div key={id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: t.soft, border: `1px solid ${t.rule}`, borderRadius: 6 }}>
                    {a.headshot
                      ? <img src={a.headshot} alt="" style={{ width: 28, height: 28, borderRadius: 999, objectFit: 'cover' }}/>
                      : <div style={{ width: 28, height: 28, borderRadius: 999, background: t.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 11px/1 'Space Grotesk', Arial" }}>{a.initials}</div>
                    }
                    <div style={{ flex: 1 }}>
                      <div style={{ font: "600 13px/1.2 'Space Grotesk', Arial", color: t.ink }}>{a.name}</div>
                      <div style={{ font: "400 11px/1.3 Inter, Arial", color: t.muted }}>{a.role}</div>
                    </div>
                    <AvailabilityDot status={a.availability} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---- Applications ----

function ApplicationsView({ apps, advisors, onOpen }) {
  const t = useBrand();
  const byId = Object.fromEntries(advisors.map(a => [a.id, a]));
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {apps.map(p => {
        const coach = byId[p.advisor];
        return (
          <div key={p.id} onClick={() => onOpen(p)} style={{
            background: '#fff', border: `1px solid ${t.rule}`, borderRadius: 10,
            padding: 20, cursor: 'pointer', position: 'relative', overflow: 'hidden',
            transition: 'box-shadow .18s, transform .18s',
          }}
          onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 10px 24px rgba(26,26,26,0.08)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
          onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}
          >
            <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: p.accent }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <Badge tone={p.badgeTone}>{p.status}</Badge>
              <span style={{ font: "400 12px/1 Inter, Arial", color: t.muted }}>Updated {p.updated}</span>
            </div>
            <h3 style={{ font: "700 17px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px', letterSpacing: '-.005em' }}>{p.title}</h3>
            <p style={{ font: "400 13px/1.5 Inter, Arial", color: t.body, margin: '0 0 16px', minHeight: 40 }}>{p.summary}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div style={{ flex: 1, height: 4, background: t.soft, borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: `${p.progress}%`, height: '100%', background: t.primary }} />
              </div>
              <span style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.body, marginLeft: 12 }}>{p.progress}%</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 10, borderTop: `1px solid ${t.rule}` }}>
              {coach.headshot
                ? <img src={coach.headshot} alt="" style={{ width: 24, height: 24, borderRadius: 999, objectFit: 'cover' }}/>
                : <div style={{ width: 24, height: 24, borderRadius: 999, background: t.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: "700 10px/1 'Space Grotesk', Arial" }}>{coach.initials}</div>
              }
              <span style={{ font: "500 12px/1.2 Inter, Arial", color: t.body }}>Coach: {coach.name}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.WriteStuffTab = WriteStuffTab;