import { createFileRoute, Link } from '@tanstack/react-router';
import Breadcrumbs from "@/components/Breadcrumbs";
import { useT, headLang, localizePath, SITE_URL } from '@/lib/i18n';

export const Route = createFileRoute('/sitemap')({
  head: (ctx) => {
    const lang = headLang(ctx);
    const path = localizePath('/sitemap', lang);
    return {
      meta: [
        { title: lang === 'en' ? 'Sitemap | Peptidewinkel' : 'Sitemap | Peptidewinkel' },
        { name: 'description', content: lang === 'en' ? 'Overview of all pages on Peptidewinkel.' : 'Overzicht van alle pagina\'s op Peptidewinkel.' },
        { property: 'og:url', content: `${SITE_URL}${path}` },
      ],
      links: [{ rel: 'canonical', href: `${SITE_URL}${path}` }],
    };
  },
  component: SitemapPage,
});

function SitemapPage() {
  const t = useT();
  const sections = [
    { title: t('Winkel', 'Shop'), links: [{ to: '/shop', label: t('Webshop', 'Webshop') }, { to: '/labtesten', label: t('Labtesten', 'Lab tests') }, { to: '/reviews', label: t('Beoordelingen', 'Reviews') }] },
    { title: t('Informatie', 'Information'), links: [{ to: '/over-ons', label: t('Over ons', 'About us') }, { to: '/peptide-calculator', label: 'Peptide Calculator' }, { to: '/blog', label: 'Blog' }, { to: '/veelgestelde-vragen', label: 'FAQ' }, { to: '/contact-us', label: t('Contact', 'Contact') }] },
    { title: t('Account', 'Account'), links: [{ to: '/my-account', label: t('Mijn account', 'My account') }, { to: '/cart', label: t('Winkelwagen', 'Cart') }, { to: '/checkout', label: t('Afrekenen', 'Checkout') }] },
    { title: t('Juridisch', 'Legal'), links: [{ to: '/retourbeleid', label: t('Retourbeleid', 'Return policy') }, { to: '/algemene-voorwaarden', label: t('Algemene voorwaarden', 'Terms & conditions') }, { to: '/privacybeleid', label: t('Privacybeleid', 'Privacy policy') }, { to: '/disclaimer', label: t('Disclaimer', 'Disclaimer') }] },
  ];

  return (
    <>
      <Breadcrumbs items={[{ label: 'Sitemap' }]} />
    <div className="container py-16 max-w-4xl">
      <h1 className="text-4xl font-display font-extrabold mb-10 clinical-rule">Sitemap</h1>
      <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-8">
        {sections.map((sec) => (
          <div key={sec.title}>
            <h2 className="font-bold mb-3">{sec.title}</h2>
            <ul className="space-y-2">
              {sec.links.map((l) => (
                <li key={l.to}><Link to={l.to as never} className="text-sm text-muted-foreground hover:text-primary">{l.label}</Link></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
    </>
  );
}