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: 'Affiliate Partners — Earn by Helping Travellers Save',
  description: 'Join the CahooTravel affiliate programme. Earn recurring commission by referring travellers to the smartest hotel price comparison tool. Apply in minutes.',
}

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

  const partnerTypes = [
    {
      icon: '✍️',
      title: t('audience.contentCreators.title'),
      description: t('audience.contentCreators.description'),
      fit: t('audience.contentCreators.fit'),
    },
    {
      icon: '🏢',
      title: t('audience.travelAgencies.title'),
      description: t('audience.travelAgencies.description'),
      fit: t('audience.travelAgencies.fit'),
    },
    {
      icon: '📱',
      title: t('audience.appOwners.title'),
      description: t('audience.appOwners.description'),
      fit: t('audience.appOwners.fit'),
    },
    {
      icon: '🎓',
      title: t('audience.studentCommunities.title'),
      description: t('audience.studentCommunities.description'),
      fit: t('audience.studentCommunities.fit'),
    },
  ];

  const benefits = [
    {
      title: t('benefits.recurringCommission.title'),
      description: t('benefits.recurringCommission.description'),
    },
    {
      title: t('benefits.realTimeDashboard.title'),
      description: t('benefits.realTimeDashboard.description'),
    },
    {
      title: t('benefits.readyMadeAssets.title'),
      description: t('benefits.readyMadeAssets.description'),
    },
    {
      title: t('benefits.dedicatedSupport.title'),
      description: t('benefits.dedicatedSupport.description'),
    },
  ];

  const steps = [
    {
      number: '01',
      title: t('steps.apply.title'),
      description: t('steps.apply.description'),
    },
    {
      number: '02',
      title: t('steps.getApproved.title'),
      description: t('steps.getApproved.description'),
    },
    {
      number: '03',
      title: t('steps.shareAndEarn.title'),
      description: t('steps.shareAndEarn.description'),
    },
  ];

  return (
    <InternalPageTemplate>
      {/* Hero */}
      <div className="mb-16">
        <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
          {t('heroHeading')}<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>

      {/* Who is it for */}
      <div className="mb-20">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t('audienceHeading')}</h2>
        <div className="grid md:grid-cols-2 gap-4">
          {partnerTypes.map(type => (
            <div key={type.title} className="bg-gray-50 border border-gray-100 rounded-2xl p-6">
              <div className="text-2xl mb-3">{type.icon}</div>
              <h3 className="text-base font-semibold text-gray-900 mb-2">{type.title}</h3>
              <p className="text-sm text-gray-500 leading-relaxed mb-3">{type.description}</p>
              <p className="text-xs text-brand-purple font-medium">{type.fit}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Benefits */}
      <div className="mb-20">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t('benefitsHeading')}</h2>
        <div className="grid md:grid-cols-2 gap-4">
          {benefits.map(benefit => (
            <div key={benefit.title} className="flex gap-4">
              <div className="w-1 rounded-full bg-brand-purple flex-shrink-0 self-stretch" />
              <div>
                <h3 className="text-sm font-semibold text-gray-900 mb-1">{benefit.title}</h3>
                <p className="text-sm text-gray-500 leading-relaxed">{benefit.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* How it works */}
      <div className="mb-20">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t('stepsHeading')}</h2>
        <div className="flex flex-col gap-0">
          {steps.map((step, i) => (
            <div key={step.number} className="relative flex gap-6 pb-10 last:pb-0">
              {i < steps.length - 1 && (
                <div className="absolute left-[19px] top-10 bottom-0 w-px bg-gray-200" />
              )}
              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-brand-purple text-white flex items-center justify-center text-xs font-bold z-10">
                {step.number}
              </div>
              <div className="pt-1.5">
                <h3 className="text-sm font-semibold text-gray-900 mb-1">{step.title}</h3>
                <p className="text-sm text-gray-500 leading-relaxed">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Application 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="/contact"
          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>
  );
}