/* Sections.jsx — reusable content blocks shared across pages */
const { createElement: sh } = React;

const CAPABILITIES = [
  { icon: 'radar', title: 'Contextual reprioritization', body: 'Risk scores shift in real time as new threat-activity intelligence emerges — so the top of your queue is always what matters now.' },
  { icon: 'cpu', title: 'Network-specific ML models', body: 'ANN models trained on attack data specific to the network they defend — not a generic corpus that ignores your reality.' },
  { icon: 'layers', title: 'Comprehensive asset mapping', body: 'A live map of every asset, service, and dependency, so reachability and blast radius factor into every score.' },
  { icon: 'activity', title: 'Monitoring & anomaly detection', body: 'Continuous monitoring surfaces anomalies as signal, not noise — correlated against your context, not raw volume.' },
  { icon: 'fingerprint', title: 'Zero Trust & identity', body: 'Zero Trust with identity management for cloud services, enforced where workloads and people actually meet.' },
  { icon: 'zap', title: 'Real-time threat modeling', body: 'Real-time data integration feeds AI-powered threat modeling that updates the moment the landscape moves.' },
];

function Capabilities({ go }) {
  const { Container, Kicker, Reveal } = window;
  return sh('section', { style: { padding: '104px 0', borderTop: '1px solid var(--border-1)' } },
    sh(Container, null,
      sh('div', { style: { maxWidth: 640, marginBottom: 56 } },
        sh(Kicker, { style: { marginBottom: 18 } }, 'THE PLATFORM'),
        sh('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,4vw,44px)', letterSpacing: '-.03em', lineHeight: 1.08, margin: '0 0 16px', color: 'var(--fg-1)' } },
          'Everything you need to defend ', sh('span', { className: 'ys-grad-text' }, 'in context.')),
        sh('p', { style: { color: 'var(--fg-2)', fontSize: 17.5, lineHeight: 1.6, margin: 0 } }, 'YottaSecure\'s platform is built on Artificial Neural Network technology — capable of building AI models for a wide range of security purposes.')
      ),
      sh('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 } },
        CAPABILITIES.map((c, i) => sh(Reveal, { key: c.title, delay: (i % 3) * 70 },
          sh(CapCard, c)
        ))
      )
    )
  );
}

function CapCard({ icon, title, body }) {
  const { Icon } = window;
  return sh('div', { className: 'ys-card', style: { height: '100%', boxSizing: 'border-box', padding: 24, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-1)', background: 'var(--bg-2)', transition: 'border-color var(--dur), background var(--dur), transform var(--dur)' } },
    sh('div', { style: { width: 40, height: 40, borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brand-gradient-soft)', border: '1px solid rgba(31,200,210,.22)', marginBottom: 18 } },
      sh(Icon, { name: icon, size: 19, style: { color: 'var(--brand-300)' } })),
    sh('h3', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 18, letterSpacing: '-.01em', margin: '0 0 8px', color: 'var(--fg-1)' } }, title),
    sh('p', { style: { color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, margin: 0 } }, body)
  );
}

/* The three RSAC transformations — used on Why + RSAC pages */
const SHIFTS = [
  { from: 'CVE lists', to: 'actual risk', icon: 'target', body: 'Stop triaging by raw CVSS. Score what is reachable, exploited, and business-critical in your environment.' },
  { from: 'Signals', to: 'decisions', icon: 'git-commit-horizontal', body: 'Turn a firehose of alerts into a short, ordered list of actions a security team can actually execute.' },
  { from: 'Compliance chaos', to: 'audit-ready evidence', icon: 'file-check', body: 'Continuous, contextual evidence — so audits become a query, not a quarter-long scramble.' },
];

function Shifts() {
  const { Container, Kicker, Icon, Reveal } = window;
  return sh('section', { style: { padding: '104px 0', borderTop: '1px solid var(--border-1)', position: 'relative' } },
    sh(Container, null,
      sh('div', { style: { textAlign: 'center', maxWidth: 660, margin: '0 auto 56px' } },
        sh('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: 18 } }, sh(Kicker, null, 'CLARITY OVER NOISE')),
        sh('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,4vw,44px)', letterSpacing: '-.03em', lineHeight: 1.08, margin: 0, color: 'var(--fg-1)' } },
          'Everyone has AI. ', sh('br'), 'Very few have ', sh('span', { className: 'ys-grad-text' }, 'context.'))
      ),
      sh('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 } },
        SHIFTS.map((s, i) => sh(Reveal, { key: s.to, delay: i * 80 },
          sh('div', { className: 'ys-card', style: { height: '100%', boxSizing: 'border-box', padding: 28, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-1)', background: 'var(--bg-2)' } },
            sh('div', { style: { display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 13, marginBottom: 18 } },
              sh('span', { style: { color: 'var(--fg-3)', textDecoration: 'line-through', textDecorationColor: 'var(--fg-4)' } }, s.from),
              sh(Icon, { name: 'arrow-right', size: 15, style: { color: 'var(--brand)' } }),
              sh('span', { style: { color: 'var(--brand-300)' } }, s.to)),
            sh('h3', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20, letterSpacing: '-.01em', margin: '0 0 10px', color: 'var(--fg-1)' } }, 'From ', s.from.toLowerCase(), ' to ', s.to),
            sh('p', { style: { color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, margin: 0 } }, s.body)
          )
        ))
      )
    )
  );
}

function Partners({ bare }) {
  const { Container, PartnerMark } = window;
  const names = ['Tabulera', 'Dosanjh USA', 'legalconnection', 'FedTech'];
  const inner = sh('div', null,
    sh('div', { style: { textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.16em', color: 'var(--fg-4)', marginBottom: 30 } }, 'CONSULTING & DELIVERY PARTNERS'),
    sh('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 56, flexWrap: 'wrap' } },
      names.map(n => sh(PartnerMark, { key: n, name: n })))
  );
  if (bare) return inner;
  return sh('section', { style: { padding: '64px 0', borderTop: '1px solid var(--border-1)' } }, sh(Container, null, inner));
}

Object.assign(window, { Capabilities, CapCard, Shifts, Partners, CAPABILITIES, SHIFTS });