'use client';
import Link from 'next/link';
import { ShieldCheck, Lock, FileCheck, Server, KeyRound, EyeOff, ArrowRight } from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';
import { getSecurityBadges } from '../_data/marketing';

export default function SecurityPage() {
  const { t } = useTranslation();
  const badges = getSecurityBadges(t);

  const pillars = [
    { icon: <Lock size={20} />, title: t('landing.securityPage.p1Title', 'Encryption everywhere'),
      body: t('landing.securityPage.p1Body', 'AES-256 at rest, TLS 1.3 in transit. All customer data encrypted with per-tenant keys.') },
    { icon: <KeyRound size={20} />, title: t('landing.securityPage.p2Title', 'Identity & access'),
      body: t('landing.securityPage.p2Body', 'SSO, SAML, role-based permissions, and full audit trails on every staff action.') },
    { icon: <Server size={20} />, title: t('landing.securityPage.p3Title', 'Resilient infrastructure'),
      body: t('landing.securityPage.p3Body', 'Multi-region failover, daily encrypted backups, 99.9% uptime SLA, and disaster-recovery drills.') },
    { icon: <FileCheck size={20} />, title: t('landing.securityPage.p4Title', 'Compliance & audits'),
      body: t('landing.securityPage.p4Body', 'SOC 2 Type II audited annually. GDPR-ready. Pen-tested by a third-party every six months.') },
    { icon: <EyeOff size={20} />, title: t('landing.securityPage.p5Title', 'Privacy by default'),
      body: t('landing.securityPage.p5Body', 'Customer data is never sold or shared. PII is redacted in logs. You can delete data on request.') },
    { icon: <ShieldCheck size={20} />, title: t('landing.securityPage.p6Title', 'Responsible disclosure'),
      body: t('landing.securityPage.p6Body', 'A clear vulnerability disclosure policy and a private bounty program for security researchers.') },
  ];

  return (
    <div data-ra-landing className="min-h-screen bg-slate-50 dark:bg-[#080a0f]">
      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-400 text-xs font-semibold mb-4">
            <ShieldCheck size={12} /> {t('landing.securityPage.badge', 'Trust & Security')}
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t('landing.securityPage.title', 'Security you can audit')}
          </h1>
          <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-2xl mx-auto">
            {t('landing.securityPage.sub', 'Every restaurant we serve trusts us with their orders, their guests, and their reputation. Here is how we earn that trust.')}
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 mb-14">
          {badges.map((b) => (
            <div key={b.label} className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 text-center">
              <div className="text-xs font-bold text-slate-900 dark:text-white">{b.label}</div>
              <div className="text-[10px] text-slate-500 dark:text-slate-400 mt-1">{b.sub}</div>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {pillars.map((p) => (
            <div key={p.title} className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
              <div className="w-11 h-11 rounded-xl bg-emerald-100 dark:bg-emerald-900/40 text-emerald-600 dark:text-emerald-400 flex items-center justify-center mb-4">{p.icon}</div>
              <h3 className="font-bold text-slate-900 dark:text-white mb-2">{p.title}</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{p.body}</p>
            </div>
          ))}
        </div>

        <div className="mt-14 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 text-center">
          <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">
            {t('landing.securityPage.requestDocs', 'Need our SOC 2 report, DPA, or pen-test summary?')}
          </p>
          <Link href="/contact" className="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold transition-colors">
            {t('landing.securityPage.requestCta', 'Request security documentation')} <ArrowRight size={14} />
          </Link>
        </div>
      </section>
    </div>
  );
}