import React from 'react';
import { localizePath, useLang, useT } from '../i18n';
import Footer from './Footer';
import LangSwitcher from './LangSwitcher';

const PrivacyPolicyPage = () => {
  const t = useT();
  const lang = useLang();
  const home = localizePath('/', lang);

  return (
    <div className="min-h-screen bg-background selection:bg-primary selection:text-background">
      <header className="bg-background/80 backdrop-blur-lg border-b border-white/5">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <a href={home} className="text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity">
            human<span className="text-primary">AI</span>
          </a>
          <div className="flex items-center gap-6">
            <a href={home} className="text-sm text-muted hover:text-foreground transition-colors">
              {t.common.backToHome}
            </a>
            <LangSwitcher />
          </div>
        </div>
      </header>

      <main className="container mx-auto px-6 py-16 max-w-3xl">
        <h1 className="text-4xl font-bold mb-2">{t.privacy.title}</h1>
        <p className="text-muted text-sm mb-8">{t.privacy.lastUpdated}</p>
        <p className="text-foreground/80 mb-12 leading-relaxed">{t.privacy.intro}</p>

        <div className="space-y-10">
          {t.privacy.sections.map((section, i) => (
            <section key={section.title} id={['controller', 'contact', 'analytics', 'cookies', 'rights', 'changes'][i]}>
              <h2 className="text-xl font-bold mb-4">{section.title}</h2>
              {section.body.split('\n\n').map((paragraph, i) => (
                <p key={i} className="text-foreground/80 leading-relaxed mb-3">
                  {paragraph}
                </p>
              ))}
            </section>
          ))}
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default PrivacyPolicyPage;