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: 'Refund Policy',
  description: 'CahooTravel is a digital service — subscriptions are non-refundable once used. Unused subscriptions may be refunded within 24 hours. Payments processed by Creem.',
  robots: { index: true, follow: true },
}

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

  const sections = [
    {
      title: t('sections.overview.title'),
      content: [
        { body: t('sections.overview.content.body') },
      ],
    },
    {
      title: t('sections.noRefunds.title'),
      content: [
        { body: t('sections.noRefunds.content.body') },
      ],
    },
    {
      title: t('sections.unusedException.title'),
      content: [
        { body: t('sections.unusedException.content.body') },
      ],
    },
    {
      title: t('sections.euUkWaiver.title'),
      content: [
        { body: t('sections.euUkWaiver.content.body') },
      ],
    },
    {
      title: t('sections.nonRefundable.title'),
      content: [
        { body: t('sections.nonRefundable.content.body') },
      ],
    },
    {
      title: t('sections.howToRequest.title'),
      content: [
        {
          heading: t('sections.howToRequest.content.contactUs.heading'),
          body: t('sections.howToRequest.content.contactUs.body'),
        },
        {
          heading: t('sections.howToRequest.content.paddleDirect.heading'),
          body: t('sections.howToRequest.content.paddleDirect.body'),
        },
      ],
    },
    {
      title: t('sections.processing.title'),
      content: [
        { body: t('sections.processing.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>
  );
}