/* global React */
// Security & Privacy trust section — between HowItWorks and ProductPreview.
const SEC_ICON_PATHS = {
  'shield-check':   '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>',
  'lock':           '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  'users':          '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  'clipboard-list': '<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>',
  'code-2':         '<path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/>',
};

function SecIcon({ name }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={14} height={14}
      viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'inline-block', flexShrink: 0 }}
      dangerouslySetInnerHTML={{ __html: SEC_ICON_PATHS[name] || '' }}
    />
  );
}

const SEC_CHIPS = [
  { icon: 'shield-check',   label: 'DPIA-led risk assessment' },
  { icon: 'lock',           label: 'Encrypted data handling' },
  { icon: 'code-2',         label: 'Secure SDLC' },
];

function Security() {
  return (
    <section id="security" style={{ background: 'var(--ink-900)', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle glow — top-right, distinct from the CTA glow at bottom-center */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-80px', right: '-60px',
        width: '520px', height: '380px', pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, color-mix(in srgb, var(--cyan-500) 16%, transparent), transparent 65%)',
      }} />

      <div style={{
        position: 'relative',
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'var(--section-y) var(--container-pad)',
        display: 'flex', flexDirection: 'column', gap: '28px',
      }}>

        {/* Heading */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          <span className="ds-eyebrow" style={{ color: 'var(--cyan-400)' }}>Security &amp; Privacy</span>
          <h2 style={{
            fontSize: 'clamp(1.9rem, 3.4vw, 2.6rem)', fontWeight: 700,
            letterSpacing: '-0.025em', color: '#ffffff',
            maxWidth: '24ch', margin: 0,
          }}>
            GDPR-aligned privacy and secure development practices
          </h2>
        </div>

        {/* Chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {SEC_CHIPS.map(chip => (
            <span key={chip.label} style={{
              display: 'inline-flex', alignItems: 'center', gap: '7px',
              padding: '7px 14px', borderRadius: 'var(--radius-full)',
              background: 'rgba(255,255,255,0.07)',
              border: '1px solid rgba(255,255,255,0.12)',
              fontFamily: 'var(--font-sans)', fontSize: '13px', fontWeight: 600,
              color: 'rgba(255,255,255,0.85)',
            }}>
              <span style={{ color: 'var(--cyan-400)', display: 'inline-flex' }}>
                <SecIcon name={chip.icon} />
              </span>
              {chip.label}
            </span>
          ))}
        </div>

        {/* Body */}
        <p style={{
          fontSize: '16px', lineHeight: 1.65,
          color: 'rgba(255,255,255,0.52)',
          maxWidth: '68ch', margin: 0,
        }}>
          ReconcileAI is designed for sensitive financial workflows, with DPIA-led privacy
          risk assessment, encrypted data handling, role-based access controls, audit logging,
          and secure SDLC practices across development and deployment.
        </p>

      </div>
    </section>
  );
}
window.Security = Security;