// CaseStudies.jsx — anonymized engagement outcomes with cursor-reactive accent glow
const CASES = [
  {
    sector: 'FINTECH',
    title: 'Series C neobank: domain admin in six days, fixed in seven',
    body: 'Four medium-severity findings combined into a path to the core ledger. We demonstrated it safely with synthetic data, walked the engineering team through every step, and they had it closed before the readout call ended.',
    metrics: [
      { k: 'Time to Domain Admin', v: 'Day 6' },
      { k: 'Critical findings', v: '11' },
      { k: 'Closed within 30d', v: '100%' },
    ],
    accent: '#5e6ad2',
  },
  {
    sector: 'HEALTHCARE',
    title: 'Hospital network: patient records reached in four hours without an alert',
    body: 'An assumed-breach engagement for a regional hospital group. Starting from one low-privilege workstation, we reached the patient-record store without triggering an alert. We wrote the missing detection rules together with their security team during the readout.',
    metrics: [
      { k: 'Time to Domain Admin', v: '4h 12m' },
      { k: 'ADCS ESC findings', v: '7' },
      { k: 'SOC alerts fired', v: '0' },
    ],
    accent: '#27a644',
  },
  {
    sector: 'SAAS',
    title: 'Scaling SaaS: one continuous program replaced four vendors',
    body: 'Continuous testing across web, mobile, API, and cloud with a dedicated engagement manager and a shared channel. New features were tested as they shipped. Critical findings fell 64% year over year and audit preparation went from three weeks to two days.',
    metrics: [
      { k: 'Critical findings, year over year', v: '↓ 64%' },
      { k: 'Audit prep time', v: '↓ 86%' },
      { k: 'Vendors consolidated', v: '4 → 1' },
    ],
    accent: '#828fff',
  },
];

const CaseStudies = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
    <div style={{ marginBottom: 48, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 720 }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>Engagement outcomes</p>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
          fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
          color: '#f7f8f8', margin: 0,
        }}>Case studies</h2>
      </div>
      <a href="/customers/" style={{
        fontSize: 13, fontWeight: 500, color: '#d0d6e0', textDecoration: 'none',
        background: 'transparent', border: '1px solid #23252a',
        borderRadius: 8, padding: '8px 14px', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        transition: 'border-color 150ms ease-out',
      }}
      onMouseEnter={e => e.currentTarget.style.borderColor = '#34343a'}
      onMouseLeave={e => e.currentTarget.style.borderColor = '#23252a'}
      >
        More customer outcomes
        <Icon name="arrowRight" size={12} strokeWidth={2} />
      </a>
    </div>

    <Stagger step={120} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {CASES.map((c) => <CaseRow key={c.title} c={c} />)}
    </Stagger>
  </section>
);

const CaseRow = ({ c }) => {
  const ref = React.useRef(null);
  const [hovered, setHovered] = React.useState(false);
  const [pos, setPos] = React.useState({ x: 50, y: 50 });
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setPos({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 });
  };
  return (
    <div ref={ref}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onMouseMove={onMove}
      style={{
        background: '#0f1011',
        border: `1px solid ${hovered ? c.accent + '55' : '#23252a'}`,
        borderRadius: 16, padding: 32, position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center',
        transition: 'border-color 220ms',
      }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, ${c.accent}40 50%, transparent)`,
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(circle 380px at ${pos.x}% ${pos.y}%, ${c.accent}1f 0%, transparent 65%)`,
        opacity: hovered ? 1 : 0.4,
        transition: 'opacity 200ms',
      }} />
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 500,
            color: c.accent, letterSpacing: '1px',
            background: `${c.accent}15`, border: `1px solid ${c.accent}30`,
            borderRadius: 9999, padding: '3px 10px',
          }}>{c.sector}</span>
          <span style={{ fontSize: 12, color: '#62666d' }}>· anonymized</span>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600,
          letterSpacing: '-0.8px', color: '#f7f8f8', lineHeight: 1.2,
          margin: '0 0 14px', textWrap: 'balance',
        }}>{c.title}</h3>
        <p style={{ fontSize: 15, color: '#8a8f98', lineHeight: 1.6, margin: 0, maxWidth: 540 }}>{c.body}</p>
        {/* Full write-ups are shared under NDA on request; the row itself is not a link. */}
        <a href="#contact" style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 18,
          fontSize: 13, fontWeight: 500, color: '#828fff', textDecoration: 'none',
        }}>
          Request the full case study
          <Icon name="arrowRight" size={12} color="#828fff" strokeWidth={2.2} />
        </a>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        background: '#141516', border: '1px solid #23252a', borderRadius: 12,
        position: 'relative',
      }}>
        {c.metrics.map((m, j) => (
          <div key={m.k} style={{
            padding: 18,
            borderRight: j < c.metrics.length - 1 ? '1px solid #23252a' : 'none',
            textAlign: 'center',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
              letterSpacing: '-0.5px', color: '#f7f8f8', marginBottom: 6, lineHeight: 1,
              fontVariantNumeric: 'tabular-nums',
            }}>{m.v}</div>
            <div style={{
              fontSize: 11, color: '#8a8f98', lineHeight: 1.3,
              textTransform: 'uppercase', letterSpacing: '0.3px', fontWeight: 500,
            }}>{m.k}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { CaseStudies, CaseRow });