import type { Metadata } from 'next'
import InternalPageTemplate from '@/components/InternalPageTemplate';
import Link from 'next/link';
import { getTranslations } from 'next-intl/server';

export const metadata: Metadata = {
  title: 'Security — How We Protect Your Account & Data',
  description: 'CahooTravel uses bcrypt password hashing, JWT authentication, HTTPS everywhere, and strict CORS policies. Read our full security overview.',
}

export default async function SecurityPage() {
  const t = await getTranslations('pages.security');

  const sections = [
    {
      icon: '🔐',
      title: t('sections.accountSecurity.title'),
      items: [
        {
          heading: t('sections.accountSecurity.items.passwordHashing.heading'),
          detail: t('sections.accountSecurity.items.passwordHashing.detail'),
        },
        {
          heading: t('sections.accountSecurity.items.jsonWebTokens.heading'),
          detail: t('sections.accountSecurity.items.jsonWebTokens.detail'),
        },
        {
          heading: t('sections.accountSecurity.items.googleOauth.heading'),
          detail: t('sections.accountSecurity.items.googleOauth.detail'),
        },
        {
          heading: t('sections.accountSecurity.items.rateLimitedLogin.heading'),
          detail: t('sections.accountSecurity.items.rateLimitedLogin.detail'),
        },
      ],
    },
    {
      icon: '🌐',
      title: t('sections.dataInTransit.title'),
      items: [
        {
          heading: t('sections.dataInTransit.items.httpsEverywhere.heading'),
          detail: t('sections.dataInTransit.items.httpsEverywhere.detail'),
        },
        {
          heading: t('sections.dataInTransit.items.secureHeaders.heading'),
          detail: t('sections.dataInTransit.items.secureHeaders.detail'),
        },
        {
          heading: t('sections.dataInTransit.items.corsPolicy.heading'),
          detail: t('sections.dataInTransit.items.corsPolicy.detail'),
        },
      ],
    },
    {
      icon: '🗄️',
      title: t('sections.dataStorage.title'),
      items: [
        {
          heading: t('sections.dataStorage.items.minimalDataCollection.heading'),
          detail: t('sections.dataStorage.items.minimalDataCollection.detail'),
        },
        {
          heading: t('sections.dataStorage.items.noSellingOfData.heading'),
          detail: t('sections.dataStorage.items.noSellingOfData.detail'),
        },
        {
          heading: t('sections.dataStorage.items.sessionIsolation.heading'),
          detail: t('sections.dataStorage.items.sessionIsolation.detail'),
        },
      ],
    },
    {
      icon: '🛡️',
      title: t('sections.infrastructure.title'),
      items: [
        {
          heading: t('sections.infrastructure.items.ddosProtection.heading'),
          detail: t('sections.infrastructure.items.ddosProtection.detail'),
        },
        {
          heading: t('sections.infrastructure.items.dependencyHygiene.heading'),
          detail: t('sections.infrastructure.items.dependencyHygiene.detail'),
        },
        {
          heading: t('sections.infrastructure.items.monitoringAlerting.heading'),
          detail: t('sections.infrastructure.items.monitoringAlerting.detail'),
        },
      ],
    },
  ];

  return (
    <InternalPageTemplate>
      {/* Header */}
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('heading')}</h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          {t('subheading')}
        </p>
      </div>

      {/* Sections */}
      <div className="flex flex-col gap-12 mb-16">
        {sections.map(section => (
          <div key={section.title}>
            <div className="flex items-center gap-3 mb-6">
              <span className="text-xl">{section.icon}</span>
              <h2 className="text-lg font-semibold text-gray-900">{section.title}</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              {section.items.map(item => (
                <div key={item.heading} className="bg-gray-50 border border-gray-100 rounded-2xl px-6 py-5">
                  <h3 className="text-sm font-semibold text-gray-900 mb-1">{item.heading}</h3>
                  <p className="text-sm text-gray-500 leading-relaxed">{item.detail}</p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Responsible disclosure */}
      <div className="bg-gray-50 border border-gray-100 rounded-2xl px-8 py-7 mb-16">
        <h2 className="text-base font-semibold text-gray-900 mb-2">{t('disclosureHeading')}</h2>
        <p className="text-sm text-gray-500 leading-relaxed max-w-2xl mb-4">
          {t('disclosureBody')}
        </p>
        <Link
          href="/contact"
          className="inline-flex items-center gap-1 text-sm font-medium text-brand-purple hover:text-purple-700 transition-colors"
        >
          {t('disclosureCta')}
        </Link>
      </div>

      {/* Last reviewed */}
      <p className="text-xs text-gray-400">
        {t('footerNote')}{' '}
        <a href="/privacy" className="underline hover:text-gray-600 transition-colors">{t('footerNoteLink')}</a>.
      </p>
    </InternalPageTemplate>
  );
}