import { useTranslation } from 'react-i18next';
import { usePageMeta } from '../../hooks/usePageMeta';
import Footer from '../ui/Footer';
import { PRIVACY, TERMS, type LegalDoc } from './legal-content';

export type LegalKind = 'terms' | 'privacy';

const DOCS: Record<LegalKind, LegalDoc> = { terms: TERMS, privacy: PRIVACY };

export default function LegalPage({ kind }: { kind: LegalKind }) {
  const { t, i18n } = useTranslation();
  const doc = DOCS[kind];
  usePageMeta(`${doc.title} | Perfect Postcode`, doc.metaDescription);

  const showEnglishNotice = !i18n.language?.toLowerCase().startsWith('en');

  return (
    <main className="flex-1 overflow-y-auto bg-warm-50 dark:bg-navy-950">
      <div className="mx-auto max-w-3xl px-4 py-10 sm:py-14">
        <h1 className="text-3xl font-bold text-navy-950 dark:text-warm-100">{doc.title}</h1>
        <p className="mt-2 text-sm text-warm-500 dark:text-warm-400">
          {t('legal.lastUpdated', { date: doc.lastUpdated })}
        </p>
        {showEnglishNotice && (
          <p className="mt-2 text-sm italic text-warm-500 dark:text-warm-400">
            {t('legal.englishOnly')}
          </p>
        )}

        <div className="mt-6 space-y-4">
          {doc.intro.map((paragraph) => (
            <p key={paragraph} className="leading-relaxed text-warm-700 dark:text-warm-300">
              {paragraph}
            </p>
          ))}
        </div>

        <div className="mt-8 space-y-8">
          {doc.sections.map((section) => (
            <section key={section.heading}>
              <h2 className="text-lg font-semibold text-navy-950 dark:text-warm-100">
                {section.heading}
              </h2>
              {section.paragraphs.map((paragraph) => (
                <p
                  key={paragraph}
                  className="mt-2 leading-relaxed text-warm-700 dark:text-warm-300"
                >
                  {paragraph}
                </p>
              ))}
              {section.bullets && (
                <ul className="mt-2 list-disc space-y-1.5 pl-5 text-warm-700 dark:text-warm-300">
                  {section.bullets.map((bullet) => (
                    <li key={bullet} className="leading-relaxed">
                      {bullet}
                    </li>
                  ))}
                </ul>
              )}
            </section>
          ))}
        </div>
      </div>
      <Footer />
    </main>
  );
}
