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: 'Terms of Service',
  description: 'CahooTravel terms of service. Subscriptions are billed by Creem as Merchant of Record. Covers acceptable use, cancellation, refunds, and governing law.',
  robots: { index: true, follow: true },
}

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

  const sections = [
    {
      title: t('sections.acceptance.title'),
      content: [
        { body: t('sections.acceptance.content.body') },
      ],
    },
    {
      title: t('sections.services.title'),
      content: [
        { body: t('sections.services.content.body') },
      ],
    },
    {
      title: t('sections.merchantOfRecord.title'),
      content: [
        {
          heading: t('sections.merchantOfRecord.content.paddle.heading'),
          body: t('sections.merchantOfRecord.content.paddle.body'),
        },
        {
          heading: t('sections.merchantOfRecord.content.paddleTerms.heading'),
          body: t('sections.merchantOfRecord.content.paddleTerms.body'),
        },
      ],
    },
    {
      title: t('sections.subscriptions.title'),
      content: [
        {
          heading: t('sections.subscriptions.content.autoRenewal.heading'),
          body: t('sections.subscriptions.content.autoRenewal.body'),
        },
        {
          heading: t('sections.subscriptions.content.priceChanges.heading'),
          body: t('sections.subscriptions.content.priceChanges.body'),
        },
      ],
    },
    {
      title: t('sections.cancellation.title'),
      content: [
        { body: t('sections.cancellation.content.body') },
      ],
    },
    {
      title: t('sections.refunds.title'),
      content: [
        { body: t('sections.refunds.content.body') },
      ],
    },
    {
      title: t('sections.acceptableUse.title'),
      content: [
        {
          heading: t('sections.acceptableUse.content.prohibited.heading'),
          body: t('sections.acceptableUse.content.prohibited.body'),
        },
        {
          heading: t('sections.acceptableUse.content.accountResponsibility.heading'),
          body: t('sections.acceptableUse.content.accountResponsibility.body'),
        },
      ],
    },
    {
      title: t('sections.intellectualProperty.title'),
      content: [
        { body: t('sections.intellectualProperty.content.body') },
      ],
    },
    {
      title: t('sections.disclaimer.title'),
      content: [
        { body: t('sections.disclaimer.content.body') },
      ],
    },
    {
      title: t('sections.limitation.title'),
      content: [
        { body: t('sections.limitation.content.body') },
      ],
    },
    {
      title: t('sections.governing.title'),
      content: [
        { body: t('sections.governing.content.body') },
      ],
    },
    {
      title: t('sections.changes.title'),
      content: [
        { body: t('sections.changes.content.body') },
      ],
    },
  ];

  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}>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{section.title}</h2>
            <div className="flex flex-col gap-3">
              {section.content.map((item, i) => (
                <div key={i} className="bg-gray-50 border border-gray-100 rounded-2xl px-6 py-5">
                  {'heading' in item && item.heading && (
                    <h3 className="text-sm font-semibold text-gray-900 mb-1">{item.heading}</h3>
                  )}
                  <p className="text-sm text-gray-500 leading-relaxed">{item.body}</p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Contact */}
      <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('contactHeading')}</h2>
        <p className="text-sm text-gray-500 leading-relaxed max-w-2xl mb-4">
          {t('contactBody')}
        </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('contactCta')}
        </Link>
      </div>

      {/* Footer note */}
      <p className="text-xs text-gray-400">
        {t('footerNote')}
      </p>
    </InternalPageTemplate>
  );
}