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: 'How It Works — Find the Best Hotel Price in 5 Steps',
  description: 'Paste any hotel URL from Booking.com, Airbnb or Expedia and CahooTravel compares prices across 100+ countries instantly. See how to find the cheapest rate.',
}

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

  const steps = [
    {
      number: '01',
      title: t('steps.01.title'),
      description: t('steps.01.description'),
      detail: t('steps.01.detail'),
    },
    {
      number: '02',
      title: t('steps.02.title'),
      description: t('steps.02.description'),
      detail: t('steps.02.detail'),
    },
    {
      number: '03',
      title: t('steps.03.title'),
      description: t('steps.03.description'),
      detail: t('steps.03.detail'),
    },
    {
      number: '04',
      title: t('steps.04.title'),
      description: t('steps.04.description'),
      detail: t('steps.04.detail'),
    },
    {
      number: '05',
      title: t('steps.05.title'),
      description: t('steps.05.description'),
      detail: t('steps.05.detail'),
    },
  ];

  const faqs = [
    {
      q: t('faqs.freeToUse.q'),
      a: t('faqs.freeToUse.a'),
    },
    {
      q: t('faqs.whyPricesDiffer.q'),
      a: t('faqs.whyPricesDiffer.a'),
    },
    {
      q: t('faqs.noFees.q'),
      a: t('faqs.noFees.a'),
    },
    {
      q: t('faqs.platformsSupported.q'),
      a: t('faqs.platformsSupported.a'),
    },
    {
      q: t('faqs.dataSafe.q'),
      a: t('faqs.dataSafe.a'),
    },
  ];

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqs.map(faq => ({
      '@type': 'Question',
      name: faq.q,
      acceptedAnswer: { '@type': 'Answer', text: faq.a },
    })),
  }

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

      {/* Steps */}
      <div className="mb-20">
        <div className="flex flex-col gap-0">
          {steps.map((step, i) => (
            <div key={step.number} className="relative flex gap-8 pb-12 last:pb-0">
              {/* Connector line */}
              {i < steps.length - 1 && (
                <div className="absolute left-[19px] top-10 bottom-0 w-px bg-gray-200" />
              )}

              {/* Number bubble */}
              <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>

              {/* Content */}
              <div className="pt-1.5 pb-2">
                <h3 className="text-base font-semibold text-gray-900 mb-1">{step.title}</h3>
                <p className="text-sm text-gray-700 mb-2 leading-relaxed">{step.description}</p>
                <p className="text-sm text-gray-400 leading-relaxed">{step.detail}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* FAQ */}
      <div id="faq" className="mb-20">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t('faqHeading')}</h2>
        <div className="flex flex-col divide-y divide-gray-100">
          {faqs.map(faq => (
            <div key={faq.q} className="py-5">
              <h3 className="text-sm font-semibold text-gray-900 mb-2">{faq.q}</h3>
              <p className="text-sm text-gray-500 leading-relaxed">{faq.a}</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>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
    </InternalPageTemplate>
  );
}