// Three Service Modes - the primary offering
function ModeCard({ data, featured }) {
  const I = window[data.icon];
  return (
    <div className={`mode${featured ? ' mode--featured' : ''}`}>
      {featured && <div className="mode__badge">Flagship</div>}
      <div className="mode__top">
        <div className="mode__icon"><I size={26} /></div>
        <div className="mode__chip">{data.tag}</div>
      </div>
      <div className="mode__name">{data.name}</div>
      <div className="mode__tagline">{data.tagline}</div>
      <p className="mode__desc">{data.desc}</p>

      <div className="mode__best">
        <div className="mode__best-k">BEST FOR</div>
        <div className="mode__best-v">{data.bestFor}</div>
      </div>

      <div className="mode__feats">
        {data.feats.map((f, i) => (
          <div key={i} className="mode__feat">
            <span className="mode__feat-bullet">→</span>
            <span>{f}</span>
          </div>
        ))}
      </div>

      <div className="mode__cta">
        <a className={`btn${featured ? '' : ' btn--ghost'}`} href="#contact" style={{ width: '100%', justifyContent: 'center' }}>
          {data.cta} <span className="btn__arrow">→</span>
        </a>
      </div>
    </div>
  );
}

const MODES = [
  {
    icon: 'IconRadar',
    tag: 'Mode 01',
    name: 'Continuous AI Assessment',
    tagline: 'Always-on AI agents across your attack surface.',
    desc: 'Dedicated AI agents continuously perform vulnerability assessment on approved assets. The platform detects, deduplicates, scores confidence, and streams meaningful issues into a single inbox.',
    bestFor: 'Teams that want ongoing visibility without quarterly testing cycles.',
    feats: [
      'Continuous vulnerability discovery',
      'AI-assisted reconnaissance',
      'Web, API, cloud, external surface',
      'Dedupe + clustering',
      'Noise reduction layer',
      'Confidence scoring',
      'Risk-based prioritization',
      'Live dashboard + alerts',
    ],
    cta: 'Start with AI',
  },
  {
    icon: 'IconBranch',
    tag: 'Mode 02 · Flagship',
    name: 'Hybrid AI + Human Pentest',
    tagline: 'The speed of AI. The confidence of human experts.',
    desc: 'AI agents discover and prioritize. Senior pentesters validate exploitability, refine impact, add evidence, and ship professional reports your engineering team can act on.',
    bestFor: 'Teams that need continuous coverage with manual-quality validation and reporting.',
    feats: [
      'AI-driven continuous testing',
      'Human validation · low → critical',
      'Exploitability confirmation',
      'Accurate severity assignment',
      'Business impact refinement',
      'Video PoCs for important findings',
      'Pentester-written reports',
      'Retest support included',
    ],
    cta: 'Talk to a pentester',
  },
  {
    icon: 'IconUsers',
    tag: 'Mode 03',
    name: 'Full Manual Pentest',
    tagline: 'Traditional, expert-led, methodology-driven.',
    desc: 'Experienced pentesters perform deep manual testing using professional methodologies (recon, exploitation, business-logic, access-control) with detailed reporting and retest support.',
    bestFor: 'Compliance-driven, high-risk, or business-critical applications.',
    feats: [
      'Web · API · Mobile · Network · Cloud',
      'Business logic testing',
      'Authn / authz / access control',
      'OWASP Top 10 coverage',
      'Custom attack scenarios',
      'Executive summary + technical report',
      'Retest included',
      'Compliance-mapped deliverables',
    ],
    cta: 'Scope a pentest',
  },
];

function ThreeModes() {
  return (
    <section className="section" id="modes">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <span className="eyebrow">02 · Service Modes</span>
            <h2 style={{ marginTop: 18 }}>Choose your testing model.<br/>Or run all three on the same platform.</h2>
            <p style={{ marginTop: 14, maxWidth: 560 }}>
              Continuous AI for coverage. Hybrid for the best results. Full manual for the deepest engagements. All findings flow into the same console.
            </p>
          </div>
          <div className="section-head__meta">[ continuous · hybrid · manual ]</div>
        </div>

        <div className="modes">
          <ModeCard data={MODES[0]} />
          <ModeCard data={MODES[1]} featured />
          <ModeCard data={MODES[2]} />
        </div>

        {/* Additional services strip */}
        <div className="addons">
          <div className="addons__head">
            <div className="addons__eyebrow">Add-on Services</div>
            <div className="addons__title">Available as standalone engagements or layered onto any plan.</div>
          </div>
          <div className="addons__grid">
            {[
              { icon: 'IconTarget', n: 'Red Team & Adversary Simulation', d: 'Goal-oriented multi-week engagements simulating real threat actors.' },
              { icon: 'IconBug',    n: 'Bug Bounty Triage',                d: 'Connect your bug bounty program and we dedupe, validate, and rank every submission before it reaches engineering.' },
              { icon: 'IconCode',   n: 'Source-Code Pentesting',           d: 'Code-aware AI agents for whitebox review, IaC, and CI/CD pipelines.' },
              { icon: 'IconBrain',  n: 'AI / LLM Security Testing',        d: 'OWASP LLM Top 10 · prompt injection · model theft · RAG poisoning.' },
            ].map((a, i) => {
              const I = window[a.icon];
              return (
                <div key={i} className="addon">
                  <div className="addon__icon"><I size={20} /></div>
                  <div>
                    <div className="addon__n">{a.n}</div>
                    <div className="addon__d">{a.d}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ThreeModes });