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: 'About Us — Our Story & Mission',
  description: 'CahooTravel was built to expose geo-pricing: the same hotel room costs different amounts depending on where you search from. Learn our story and what we stand for.',
}

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

  const values = [
    {
      title: t('values.transparency.title'),
      description: t('values.transparency.description'),
    },
    {
      title: t('values.fairness.title'),
      description: t('values.fairness.description'),
    },
    {
      title: t('values.simplicity.title'),
      description: t('values.simplicity.description'),
    },
  ];

  return (
    <InternalPageTemplate>
      {/* Hero */}
      <div className="mb-16">
        <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
          {t('heroHeadingPrefix')}<br />
          <span className="gradient-text">{t('heroHeadingSpan')}</span>
        </h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          {t('heroSubheading')}
        </p>
      </div>

      {/* Story */}
      <div className="grid md:grid-cols-2 gap-12 mb-20 items-center">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 mb-4">{t('storyHeading')}</h2>
          <div className="flex flex-col gap-4 text-gray-500 text-sm leading-relaxed">
            <p>{t('storyP1')}</p>
            <p>{t('storyP2')}</p>
            <p>{t('storyP3')}</p>
          </div>
        </div>

        <div className="rounded-2xl overflow-hidden bg-gray-50 border border-gray-100 p-8 flex flex-col gap-6">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-brand-purple/10 flex items-center justify-center text-brand-purple font-bold text-sm">
              23
            </div>
            <div>
              <div className="text-sm font-semibold text-gray-900">{t('statPlatformsLabel')}</div>
              <div className="text-xs text-gray-400">{t('statPlatformsDetail')}</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-brand-purple/10 flex items-center justify-center text-brand-purple font-bold text-sm">
              €31k
            </div>
            <div>
              <div className="text-sm font-semibold text-gray-900">{t('statSavedLabel')}</div>
              <div className="text-xs text-gray-400">{t('statSavedDetail')}</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-brand-purple/10 flex items-center justify-center text-brand-purple font-bold text-sm">
              1k+
            </div>
            <div>
              <div className="text-sm font-semibold text-gray-900">{t('statTravellersLabel')}</div>
              <div className="text-xs text-gray-400">{t('statTravellersDetail')}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Values */}
      <div className="mb-20">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t('valuesHeading')}</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {values.map(v => (
            <div key={v.title} className="bg-gray-50 rounded-2xl p-6 border border-gray-100">
              <h3 className="text-base font-semibold text-brand-purple mb-2">{v.title}</h3>
              <p className="text-sm text-gray-500 leading-relaxed">{v.description}</p>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="rounded-2xl bg-brand-purple text-white p-10 flex flex-col md:flex-row items-center justify-between gap-6">
        <div>
          <h3 className="text-xl font-bold mb-1">{t('ctaHeading')}</h3>
          <p className="text-purple-200 text-sm">{t('ctaBody')}</p>
        </div>
        <Link
          href="/"
          className="flex-shrink-0 bg-brand-yellow hover:bg-brand-yellow-dark text-gray-900 font-medium text-sm px-6 py-2.5 rounded-md transition-colors"
        >
          {t('ctaButton')}
        </Link>
      </div>
    </InternalPageTemplate>
  );
}