// Industries.jsx — verticals with hover-reveal of representative attack chain
const INDUSTRIES = [
  {
    icon: 'globe', t: 'Financial Services',
    d: 'Banking, fintech, payments, and capital markets, where downtime and data exposure carry regulatory consequences.',
    focus: ['PCI DSS', 'DORA', 'SWIFT CSP'],
    attack: 'Payment-rail tampering · core-banking IDOR · SWIFT MT103 forgery',
    sev: 0.92,
  },
  {
    icon: 'fingerprint', t: 'Healthcare',
    d: 'Hospitals, telemedicine, health-tech, and medical devices, where patient data and uptime are both at stake.',
    focus: ['HIPAA', 'NHS DSP', 'FDA pre-market'],
    attack: 'EHR mass-assignment · device firmware downgrade · PACS ePHI exfil',
    sev: 0.88,
  },
  {
    icon: 'cloud', t: 'SaaS & AI Platforms',
    d: 'B2B SaaS, AI products, and developer tools, where one cross-tenant bug affects every customer.',
    focus: ['SOC 2', 'ISO 27001', 'OWASP LLM Top 10'],
    attack: 'GraphQL field-level BFLA · IAM trust loop · indirect prompt injection',
    sev: 0.85,
  },
  {
    icon: 'server', t: 'Critical Infrastructure',
    d: 'Energy, utilities, transportation, and industrial control, where a breach has physical consequences.',
    focus: ['NIS2', 'IEC 62443', 'NERC CIP'],
    attack: 'Modbus replay · HMI authentication bypass · jumpbox lateral path',
    sev: 0.96,
  },
  {
    icon: 'lock', t: 'Public Sector & Defense',
    d: 'Government, defense contractors, and cleared environments, where the adversary is often a nation-state.',
    focus: ['ISO 27001', 'CMMC L3', 'NIST 800-171'],
    attack: 'Federation forgery · GPO ACL abuse · CUI bucket exposure',
    sev: 0.90,
  },
  {
    icon: 'network', t: 'Retail & E-commerce',
    d: 'Marketplaces, direct-to-consumer brands, fulfillment, and payments, where a checkout bug costs revenue.',
    focus: ['PCI DSS', 'GDPR', 'CCPA'],
    attack: 'Magecart skimmer · coupon-stack race · API rate-limit bypass',
    sev: 0.78,
  },
];

const Industries = () => (
  <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
    <div style={{ marginBottom: 48, maxWidth: 720 }}>
      <p style={{
        fontSize: 13, fontWeight: 500, color: '#828fff',
        letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
      }}>Where we work</p>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
        fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
        color: '#f7f8f8', margin: '0 0 16px',
      }}>Industries we serve</h2>
      <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 580 }}>
        A pentest in fintech is a different job from a pentest in healthcare. The regulators, adversaries, and tolerance for downtime all change, so our testers specialize by industry.
      </p>
    </div>

    <Stagger className="gs-grid-auto" step={80} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, '--gs-min': '260px' }}>
      {INDUSTRIES.map(ind => <IndustryCard key={ind.t} ind={ind} />)}
    </Stagger>
  </section>
);

const IndustryCard = ({ ind }) => {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        background: h ? '#141516' : '#0f1011',
        border: `1px solid ${h ? '#34343a' : '#23252a'}`,
        borderRadius: 12, padding: 22, position: 'relative', overflow: 'hidden',
        transition: 'background 220ms, border-color 220ms',
        minHeight: 240,
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, rgba(94,105,210,${h ? 0.35 : 0.05}) 50%, transparent)`,
        transition: 'background 220ms',
      }} />
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 16,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: h ? 'rgba(94,105,210,0.14)' : '#141516',
          border: `1px solid ${h ? 'rgba(94,105,210,0.3)' : '#23252a'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 220ms',
        }}>
          <Icon name={ind.icon} size={17} color="#828fff" />
        </div>
        {/* Risk index meter */}
        <div title="Engagement risk index" style={{
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{ fontSize: 9, color: '#62666d', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: 0.4 }}>risk</span>
          <div style={{ width: 56, height: 4, background: '#1a1b1e', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{
              height: '100%', width: `${ind.sev * 100}%`,
              background: ind.sev > 0.9 ? '#e8543a' : ind.sev > 0.8 ? '#d98326' : '#5e6ad2',
              transition: 'width 600ms cubic-bezier(.2,.8,.2,1)',
              transform: h ? 'scaleX(1)' : 'scaleX(0.85)', transformOrigin: 'left',
            }} />
          </div>
        </div>
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 500,
        letterSpacing: '-0.4px', color: '#f7f8f8', margin: '0 0 6px',
      }}>{ind.t}</h3>
      <p style={{ fontSize: 13.5, color: '#8a8f98', lineHeight: 1.5, margin: '0 0 16px' }}>{ind.d}</p>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, paddingTop: 12, borderTop: '1px solid #1a1b1e' }}>
        {ind.focus.map(f => (
          <span key={f} style={{
            fontSize: 10.5, color: '#8a8f98', padding: '2px 8px',
            background: '#141516', border: '1px solid #23252a', borderRadius: 9999,
            fontFamily: 'var(--font-mono)', letterSpacing: '0.2px',
          }}>{f}</span>
        ))}
      </div>

      {/* Hover-reveal attack chain */}
      <div style={{
        marginTop: 14,
        maxHeight: h ? 80 : 0,
        opacity: h ? 1 : 0,
        overflow: 'hidden',
        transition: 'max-height 280ms ease-out, opacity 220ms ease-out',
      }}>
        <div style={{
          paddingTop: 12, borderTop: '1px dashed #23252a',
          display: 'flex', alignItems: 'flex-start', gap: 8,
        }}>
          <Icon name="target" size={11} color="#e8543a" style={{ marginTop: 2 }} />
          <div>
            <div style={{ fontSize: 9.5, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 2 }}>Typical attack chain</div>
            <div style={{ fontSize: 12, color: '#d0d6e0', fontFamily: 'var(--font-mono)', lineHeight: 1.5 }}>{ind.attack}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Industries });