import Link from "next/link";
import { ArrowRight, Cookie, Fingerprint, Gauge, Lock, ScrollText, ShieldCheck } from "lucide-react";
import { Section, SectionHeading } from "./section";
import { Reveal } from "./reveal";

const ITEMS = [
  { icon: <Lock />, title: "AES-256-GCM key encryption", body: "HKDF-derived data key, per-user authenticated data, decrypted in memory only for the outgoing request." },
  { icon: <Fingerprint />, title: "Argon2id passwords", body: "OWASP parameters (19 MiB, t=2, p=1). E-mail verification is required before the first sign-in." },
  { icon: <Cookie />, title: "HttpOnly cookies", body: "Sessions in HttpOnly, SameSite=Lax cookies, Secure in production. Nothing sensitive in localStorage." },
  { icon: <ShieldCheck />, title: "Strict CSP and headers", body: "frame-ancestors 'none', connect-src 'self', HSTS for a year, no third-party scripts anywhere." },
  { icon: <Gauge />, title: "Rate limits per account", body: "Sign-in 8/min, sign-up 4/min, chat 60/min, key changes 12/min — every sensitive route is limited." },
  { icon: <ScrollText />, title: "Audit log you can read", body: "Logins, key changes, exports and deletions recorded with IP and shown in your account settings." },
];

export function SecurityTeaser() {
  return (
    <Section id="security" tone="subtle" className="py-14 sm:py-20">
      <div className="grid gap-10 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <SectionHeading eyebrow="Private and secure" title="Built like infrastructure, not a toy" description="PolyLLM handles API keys with a billing account attached. The defaults are conservative on purpose, and the security page describes the real implementation, verified against the code." />
          <Reveal delay={0.1}>
            <Link href="/security" className="mt-6 inline-flex items-center gap-1.5 text-[14px] font-medium text-accent underline-offset-4 hover:underline">
              Read the security page <ArrowRight className="size-4" aria-hidden />
            </Link>
          </Reveal>
        </div>
        <ul className="grid gap-x-8 gap-y-7 sm:grid-cols-2 lg:col-span-8">
          {ITEMS.map((item, i) => (
            <Reveal key={item.title} as="li" delay={0.04 * i} className="flex gap-3.5">
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-elevated text-accent shadow-xs [&_svg]:size-4.5">{item.icon}</span>
              <div className="min-w-0">
                <h3 className="text-[15px] font-semibold tracking-tight">{item.title}</h3>
                <p className="mt-1 text-[13.5px] leading-6 text-fg-muted">{item.body}</p>
              </div>
            </Reveal>
          ))}
        </ul>
      </div>
    </Section>
  );
}