const SwotQuadrant = ({ kind, title, letter, items, tint }) => (
  <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 10, padding: '22px 22px 18px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: 14, right: 18, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 80, color: tint, opacity: 0.12, lineHeight: 1 }}>{letter}</div>
    <div className="mono" style={{ fontSize: 10, color: tint, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{kind}</div>
    <h3 style={{ margin: '6px 0 18px', fontSize: 20, fontWeight: 500 }}>{title}</h3>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: 'grid', gridTemplateColumns: '30px 1fr', gap: 10 }}>
          <div className="mono" style={{ fontSize: 10, color: tint, fontWeight: 600, letterSpacing: '0.1em' }}>{String(i + 1).padStart(2, '0')}</div>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 500, marginBottom: 3 }}>{it.title}</div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.55 }}>{it.desc}</div>
          </div>
        </li>
      ))}
    </ul>
  </div>
);

const Swot = () => {
  const t = (k) => window.__t ? window.__t(k) : k;
  const s = window.__data.swot;
  return (
    <div className="content view">
      <div className="section-head">
        <div>
          <div className="sub">{t('swot.sub')}</div>
          <h2>{t('swot.title').replace(t('swot.title.em'), '').trim()} <em>{t('swot.title.em')}</em></h2>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><Icon name="download" size={12} /> {t('swot.export')}</button>
          <button className="btn primary"><Icon name="plus" size={12} /> {t('swot.add')}</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
        <SwotQuadrant kind={t('swot.kind.s')} title={t('swot.title.s')} letter="S" items={s.strengths}     tint="var(--pos)"          />
        <SwotQuadrant kind={t('swot.kind.w')} title={t('swot.title.w')} letter="W" items={s.weaknesses}    tint="var(--warn)"         />
        <SwotQuadrant kind={t('swot.kind.o')} title={t('swot.title.o')} letter="O" items={s.opportunities} tint="var(--accent-deep)"  />
        <SwotQuadrant kind={t('swot.kind.t')} title={t('swot.title.t')} letter="T" items={s.threats}       tint="var(--neg)"          />
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="sub">{t('swot.actions.sub')}</div>
            <h3>{t('swot.actions.title').replace(t('swot.actions.title.em'), '').trim()} <em>{t('swot.actions.title.em')}</em></h3>
          </div>
        </div>
        <div className="card-body">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { p: 'P1', text: 'Resolve insurance routing complaints — single comms page + AI-driven payer matrix.', due: 'May 02', impact: 'Risk -' },
              { p: 'P1', text: 'Open additional Psychiatry slots (Dr. Dana evenings, Dr. Yara weekends).', due: 'May 12', impact: '+24/wk' },
              { p: 'P1', text: 'Reduce Dentistry no-show rate via 2-stage SMS reminder + 24h confirm-or-rebook prompt.', due: 'May 09', impact: '-3.5pp NSR' },
              { p: 'P2', text: 'Pilot Saturday clinic for Cardiology + Internal Medicine — 28 extra bookings/wk.', due: 'May 24', impact: '+9.6K QAR/wk' },
              { p: 'P2', text: 'Telehealth follow-ups for Dermatology / Psychiatry — frees ~15% in-person slots.', due: 'Jun 01', impact: '+15% capacity' }
            ].map((a, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px 90px', gap: 12, alignItems: 'center', padding: '12px 14px', background: 'var(--bg-soft)', borderRadius: 8, border: '1px solid var(--line)' }}>
                <span style={{ fontSize: 10, fontWeight: 700, padding: '3px 0', borderRadius: 4, textAlign: 'center', background: a.p === 'P1' ? 'var(--neg)' : 'var(--fg-3)', color: 'white', letterSpacing: '0.06em' }}>{a.p}</span>
                <div style={{ flex: 1, fontSize: 13 }}>{a.text}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', textAlign: 'right' }}>{t('swot.due')} {a.due}</div>
                <div className="mono" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--accent-deep)', textAlign: 'right' }}>{a.impact}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.Swot = Swot;