// Features section — CTRL Assist deep dive.
// Left: 4 tabbed modes (matches the 4 analysis cards in the real app).
// Right: an authentic-looking response panel that swaps content per tab.
// Below: secondary grid of platform modules.

const TAB_DATA = [
  {
    id: 'risk',
    tag: 'RISK_ANALYSIS',
    label: 'Risk Analysis',
    tint: '#f97316',
    desc: 'Score likelihood and impact, auto-map to HIPAA safeguards, and generate a defensible narrative — all from a one-line description.',
    panel: {
      title: 'Lack of Data Loss Prevention Controls',
      kind: 'Risk Analysis',
      body: [
        { type: 'section', text: 'LIKELIHOOD × IMPACT' },
        { type: 'stat-row', items: [
          { k: 'Likelihood', v: '3/5', tint: '#38bdf8' },
          { k: 'Impact', v: '3/5', tint: '#f97316' },
          { k: 'Score', v: '9', tint: '#a855f7' },
        ]},
        { type: 'section', text: 'NARRATIVE' },
        { type: 'p', text: 'Absence of DLP controls creates moderate-to-high exposure. Unauthorized PHI egress through email, removable media, and unsanctioned cloud storage cannot be reliably detected.' },
        { type: 'section', text: 'HIPAA MAPPING' },
        { type: 'chips', items: ['§ 164.308(a)(1)(ii)(A)', '§ 164.312(b)', '§ 164.310(c)'] },
      ],
    },
  },
  {
    id: 'treatment',
    tag: 'TREATMENT_OPTIONS',
    label: 'Treatment Options',
    tint: '#a855f7',
    desc: 'Get ranked mitigation, transfer, and acceptance strategies — with implementation effort, residual risk, and control coverage for each.',
    panel: {
      title: 'Lack of Data Loss Prevention Controls',
      kind: 'Treatment Options',
      body: [
        { type: 'section', text: 'RECOMMENDED · MITIGATE' },
        { type: 'rec', tint: '#22c55e', h: 'Deploy endpoint DLP agent',
          meta: ['Effort: Medium', 'Residual: 3', 'Coverage: 6 controls'] },
        { type: 'section', text: 'ALTERNATIVE · MITIGATE' },
        { type: 'rec', tint: '#38bdf8', h: 'Email-gateway PHI scanning',
          meta: ['Effort: Low', 'Residual: 5', 'Coverage: 2 controls'] },
        { type: 'section', text: 'TRANSFER' },
        { type: 'rec', tint: '#eab308', h: 'Cyber-liability rider for data-exfil events',
          meta: ['Effort: Low', 'Financial offset only'] },
      ],
    },
  },
  {
    id: 'mapping',
    tag: 'CONTROL_MAPPING',
    label: 'Control Mapping',
    tint: '#38bdf8',
    desc: 'Map any risk to applicable HIPAA controls, flag which are Required vs Addressable, and identify gaps in your current program.',
    panel: {
      title: 'Lack of Data Loss Prevention Controls',
      kind: 'Control Mapping',
      body: [
        { type: 'section', text: 'REQUIRED CONTROLS (3)' },
        { type: 'ctrl', id: '164.312(a)(2)(i)', name: 'Unique User Identification', req: 'REQUIRED', tint: '#f87171',
          why: 'Enables detection of unauthorized access and exfiltration.' },
        { type: 'ctrl', id: '164.312(b)', name: 'Audit Controls', req: 'REQUIRED', tint: '#f87171',
          why: 'Mandatory logging to detect and investigate data-loss incidents.' },
        { type: 'ctrl', id: '164.310(c)', name: 'Workstation Security', req: 'REQUIRED', tint: '#f87171',
          why: 'Prevents unauthorized workstation use for exfiltration.' },
        { type: 'section', text: 'ADDRESSABLE (1)' },
        { type: 'ctrl', id: '164.312(e)(2)(ii)', name: 'Encryption in Transit', req: 'ADDRESSABLE', tint: '#eab308',
          why: 'Mitigates exfil via unencrypted channels.' },
      ],
    },
  },
  {
    id: 'reference',
    tag: 'HIPAA_REFERENCE',
    label: 'HIPAA Reference',
    tint: '#eab308',
    desc: 'Every answer cites regulations directly — 45 CFR sections, OCR guidance, and NIST CSF 2.0 mappings. No invented references.',
    panel: {
      title: 'Lack of Data Loss Prevention Controls',
      kind: 'HIPAA Reference',
      body: [
        { type: 'section', text: '45 CFR § 164.308(a)(1)(ii)(A)' },
        { type: 'quote', text: 'Conduct an accurate and thorough assessment of the potential risks and vulnerabilities to the confidentiality, integrity, and availability of electronic protected health information…' },
        { type: 'section', text: 'OCR GUIDANCE · 2024-06-12' },
        { type: 'p', text: 'The Office for Civil Rights emphasized that DLP is considered a reasonable safeguard under the Security Rule where risk analysis identifies material exfiltration exposure.' },
        { type: 'section', text: 'NIST CSF 2.0 CROSSWALK' },
        { type: 'chips', items: ['PR.DS-01', 'PR.DS-02', 'DE.CM-01', 'DE.CM-03'] },
      ],
    },
  },
];

// ─── Render helpers for panel body ────────────────────────────────
const PanelBody = ({ blocks }) => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  return (
    <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {blocks.map((b, i) => {
        if (b.type === 'section') return (
          <div key={i} style={{ ...mono, fontSize: 10, color: '#64748b', letterSpacing: 2, marginTop: i === 0 ? 0 : 8 }}>
            {b.text}
          </div>
        );
        if (b.type === 'p') return (
          <div key={i} style={{ fontSize: 13, color: '#cbd5e1', lineHeight: 1.6 }}>{b.text}</div>
        );
        if (b.type === 'quote') return (
          <div key={i} style={{
            fontSize: 13, color: '#e2e8f0', lineHeight: 1.6,
            borderLeft: '2px solid #334155', paddingLeft: 14, fontStyle: 'italic',
          }}>"{b.text}"</div>
        );
        if (b.type === 'chips') return (
          <div key={i} style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {b.items.map(c => (
              <span key={c} style={{
                ...mono, fontSize: 10.5, color: '#7dd3fc',
                background: 'rgba(56,189,248,0.1)', border: '1px solid rgba(56,189,248,0.3)',
                padding: '3px 8px', borderRadius: 4, letterSpacing: 0.5,
              }}>{c}</span>
            ))}
          </div>
        );
        if (b.type === 'stat-row') return (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {b.items.map(s => (
              <div key={s.k} style={{
                background: '#0a1020', border: '1px solid #1e293b',
                borderRadius: 8, padding: '12px 14px',
              }}>
                <div style={{ ...mono, fontSize: 9.5, color: '#64748b', letterSpacing: 1.5, marginBottom: 4 }}>
                  {s.k.toUpperCase()}
                </div>
                <div style={{ ...mono, fontSize: 24, fontWeight: 700, color: s.tint }}>{s.v}</div>
              </div>
            ))}
          </div>
        );
        if (b.type === 'rec') return (
          <div key={i} style={{
            background: '#0a1020', border: '1px solid #1e293b',
            borderLeft: `3px solid ${b.tint}`, borderRadius: 6, padding: '12px 14px',
          }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: '#e2e8f0', marginBottom: 6 }}>{b.h}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {b.meta.map(m => (
                <span key={m} style={{ ...mono, fontSize: 10, color: '#64748b', letterSpacing: 0.5 }}>{m}</span>
              ))}
            </div>
          </div>
        );
        if (b.type === 'ctrl') return (
          <div key={i} style={{
            background: '#0a1020', border: '1px solid #1e293b', borderRadius: 6,
            padding: '10px 14px', display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 12, alignItems: 'start',
          }}>
            <div style={{ ...mono, fontSize: 11, color: '#7dd3fc', fontWeight: 600, paddingTop: 2 }}>§ {b.id}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#e2e8f0', marginBottom: 2 }}>{b.name}</div>
              <div style={{ fontSize: 11.5, color: '#94a3b8', lineHeight: 1.5 }}>{b.why}</div>
            </div>
            <div style={{
              ...mono, fontSize: 9, letterSpacing: 1, color: b.tint,
              border: `1px solid ${b.tint}66`, padding: '2px 6px', borderRadius: 3,
              background: `${b.tint}14`, fontWeight: 700,
            }}>{b.req}</div>
          </div>
        );
        return null;
      })}
    </div>
  );
};

const FeaturesSection = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const { SectionLabel, SectionH, SectionSub } = window;
  const [active, setActive] = React.useState(0);
  const tab = TAB_DATA[active];

  return (
    <section id="features" style={{
      position: 'relative', background: '#05080f', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
    }}>
      {/* soft atmosphere tinted by active tab */}
      <div style={{
        position: 'absolute', top: 0, left: '30%', width: '40%', height: 400,
        background: `radial-gradient(ellipse, ${tab.tint}15, transparent 70%)`,
        transition: 'background 0.6s ease', pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <SectionLabel n="02" label="FEATURES // CTRL_ASSIST" />
        <SectionH>Four ways to get an answer. <span style={{ color: '#64748b' }}>One AI that knows your program.</span></SectionH>
        <SectionSub>
          CTRL Assist isn't a generic chatbot. It's embedded in every risk, control, incident, and policy in your workspace — with de-identified context, live citations, and four specialized analysis modes.
        </SectionSub>

        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 32, alignItems: 'start' }}>
          {/* Tab strip */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {TAB_DATA.map((t, i) => {
              const isActive = i === active;
              return (
                <button
                  key={t.id}
                  onClick={() => setActive(i)}
                  style={{
                    textAlign: 'left',
                    background: isActive ? `linear-gradient(135deg, ${t.tint}18, #0b1220)` : '#0b1220',
                    border: `1px solid ${isActive ? t.tint + '88' : '#1e293b'}`,
                    borderRadius: 10, padding: '18px 20px', cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    transform: isActive ? 'translateX(0)' : 'translateX(0)',
                  }}
                >
                  <div style={{
                    ...mono, fontSize: 10, letterSpacing: 1.5,
                    color: isActive ? t.tint : '#475569', marginBottom: 6,
                  }}>
                    0{i + 1} · {t.tag}
                  </div>
                  <div style={{
                    fontSize: 17, fontWeight: 700,
                    color: isActive ? '#fff' : '#cbd5e1', marginBottom: 6, letterSpacing: -0.3,
                  }}>
                    {t.label}
                  </div>
                  <div style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.5 }}>
                    {t.desc}
                  </div>
                </button>
              );
            })}
          </div>

          {/* Response panel */}
          <div style={{
            background: '#070c18', border: '1px solid #1e293b', borderRadius: 12,
            overflow: 'hidden',
            boxShadow: '0 30px 80px -30px rgba(0,0,0,0.9), 0 0 60px -30px ' + tab.tint + '40',
            transition: 'box-shadow 0.6s ease',
          }}>
            {/* Panel header */}
            <div style={{
              padding: '14px 18px', borderBottom: '1px solid #1e293b',
              display: 'flex', alignItems: 'center', gap: 12, background: '#0a1020',
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="4" y="7" width="16" height="12" rx="2.5" />
                <circle cx="9" cy="13" r="1.3" fill="#38bdf8" stroke="none" />
                <circle cx="15" cy="13" r="1.3" fill="#38bdf8" stroke="none" />
                <path d="M12 4v3" />
              </svg>
              <div style={{ flex: 1 }}>
                <div style={{ ...mono, fontSize: 10, color: '#64748b', letterSpacing: 1.5 }}>CTRL_ASSIST · {tab.tag}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#e2e8f0', marginTop: 2 }}>{tab.panel.title}</div>
              </div>
              <div style={{
                ...mono, fontSize: 10, letterSpacing: 1, color: '#22c55e',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22c55e' }} />
                DE-IDENTIFIED
              </div>
            </div>

            <PanelBody blocks={tab.panel.body} />

            {/* Footer */}
            <div style={{
              borderTop: '1px solid #1e293b', padding: '12px 18px',
              background: '#0a1020',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              ...mono, fontSize: 10, color: '#475569', letterSpacing: 1,
            }}>
              <span>RESPONSE_TIME: 2.4s · MODEL: ctrl-assist-v1</span>
              <span>↗ export · ↗ save to workspace</span>
            </div>
          </div>
        </div>

        {/* Platform modules row */}
        <div style={{ marginTop: 80 }}>
          <div style={{ ...mono, fontSize: 10, color: '#475569', letterSpacing: 2, marginBottom: 20 }}>
            — PLUS THE FULL CTRL PLATFORM
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12,
          }}>
            {[
              { n: 'Risk Register', d: 'Inherent/current/target scoring with automated controls mapping.' },
              { n: 'Policy Library', d: '200+ HIPAA-aligned policy templates with version control.' },
              { n: 'Incident Response', d: '4-factor breach assessments with 60-day clock tracking.' },
              { n: 'Vendor / BAA', d: 'Lifecycle tracking with expiration alerts and subprocessor maps.' },
              { n: 'Workforce Training', d: 'Role-based curricula, attestations, and completion reporting.' },
              { n: 'Audit Evidence', d: 'OCR Phase 2 protocol-aligned evidence collection and export.' },
            ].map(m => (
              <div key={m.n} style={{
                background: '#0b1220', border: '1px solid #1e293b', borderRadius: 8,
                padding: '14px 16px',
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#e2e8f0', marginBottom: 4 }}>{m.n}</div>
                <div style={{ fontSize: 11.5, color: '#94a3b8', lineHeight: 1.5 }}>{m.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FeaturesSection = FeaturesSection;