import { Lock, Shield, KeyRound, Download } from 'lucide-react';

import { cn } from '@/lib/utils';

interface TrustSectionProps {
  className?: string;
}

export function TrustSection({ className }: TrustSectionProps) {
  const trustItems = [
    {
      icon: Lock,
      title: 'Encrypted Credentials',
      description: 'API keys and OAuth tokens encrypted at rest. Never stored in plaintext.',
    },
    {
      icon: Shield,
      title: 'Read-Only GSC Access',
      description:
        'We only read your Search Console data. We never modify your search settings or properties.',
    },
    {
      icon: KeyRound,
      title: 'Secure WP Connection',
      description: 'HMAC-signed requests between RankWiz and your WordPress site. No passwords over the wire.',
    },
    {
      icon: Download,
      title: 'Export Anytime',
      description: 'Full data export and deletion on request. GDPR-compliant from day one.',
    },
  ];

  return (
    <section
      className={cn('bg-slate-950 py-24 text-slate-100', className)}
      aria-labelledby="trust-heading"
    >
      <div className="container">
        <div className="mx-auto max-w-5xl">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 id="trust-heading" className="mb-4 text-3xl font-bold tracking-tight text-slate-100">
              Your data stays yours
            </h2>
            <p className="text-lg text-slate-400">
              We never sell, share, or use your content to train AI models.
            </p>
          </div>

          {/* Trust Cards Grid */}
          <div className="grid gap-8 lg:grid-cols-2">
            {trustItems.map((item, index) => {
              const Icon = item.icon;
              return (
                <div
                  key={index}
                  className="rounded-lg border border-slate-700 bg-slate-900 p-8 transition-all hover:border-slate-600 hover:shadow-lg"
                >
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
                    <Icon className="h-6 w-6 text-blue-400" aria-hidden="true" />
                  </div>

                  <h3 className="mb-3 text-lg font-semibold text-slate-100">{item.title}</h3>
                  <p className="text-slate-400">{item.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}