import { Link } from 'react-router-dom';
import { PublicLayout } from '@/components/public/PublicLayout';

const DOCS = [
  {
    to: '/legal/terms',
    title: 'Terms of Service',
    blurb: 'The agreement that governs your use of eLegal Software — accounts, plans, content ownership, disputes.',
  },
  {
    to: '/legal/privacy',
    title: 'Privacy Policy',
    blurb: 'What we collect, why, where it lives, who we share it with, and the rights you have over it.',
  },
  {
    to: '/legal/cookies',
    title: 'Cookie Policy',
    blurb: 'The (few, essential-only) cookies we set and how to control them.',
  },
  {
    to: '/legal/acceptable-use',
    title: 'Acceptable Use Policy',
    blurb: 'What you may not do on the platform — security, abuse, and fair-use rules.',
  },
  {
    to: '/legal/refunds',
    title: 'Billing & Refund Policy',
    blurb: 'How subscriptions, renewals, cancellations, refunds, and failed payments work.',
  },
  {
    to: '/legal/disclaimer',
    title: 'Legal Disclaimer',
    blurb: 'eLegal Software is software, not a law firm — no legal advice, no attorney–client relationship.',
  },
  {
    to: '/legal/dmca',
    title: 'DMCA & Copyright Policy',
    blurb: 'How to report copyright infringement and how takedowns and counter-notices work.',
  },
  {
    to: '/legal/dpa',
    title: 'Data Processing Addendum',
    blurb: 'How we process your clients’ data on your behalf — security measures, subprocessors, breach notice.',
  },
];

export default function LegalIndexPage() {
  return (
    <PublicLayout>
      <section className="container py-12 max-w-4xl">
        <header className="mb-10">
          <p className="text-xs uppercase tracking-wider text-brand-600 font-semibold">Legal</p>
          <h1 className="mt-2 text-3xl md:text-4xl font-bold text-ink-950 font-display">
            Legal center
          </h1>
          <p className="mt-3 text-ink-600 max-w-2xl">
            Everything that governs your relationship with eLegal Software, written in plain
            English. Questions about any of it:{' '}
            <a href="mailto:legal@elegalsoftware.com" className="text-brand-600 hover:underline">
              legal@elegalsoftware.com
            </a>
            .
          </p>
        </header>

        <div className="grid gap-4 sm:grid-cols-2">
          {DOCS.map((d) => (
            <Link
              key={d.to}
              to={d.to}
              className="rounded-2xl border border-ink-200 p-5 hover:border-brand-200 hover:bg-brand-50/30 transition group"
            >
              <h2 className="font-semibold text-ink-950 group-hover:text-brand-700 font-display">
                {d.title}
              </h2>
              <p className="mt-2 text-sm text-ink-600 leading-relaxed">{d.blurb}</p>
            </Link>
          ))}
        </div>
      </section>
    </PublicLayout>
  );
}