import { Link } from '@tanstack/react-router';
import logoAsset from '@/assets/peptidewinkel-logo.png.asset.json';
import { Mail, ArrowUpRight, Send, ShieldCheck, FlaskConical, Truck, Lock, Facebook, Instagram } from 'lucide-react';
import { openCookieSettings } from '@/lib/cookie-consent';
import { useT } from '@/lib/i18n';

const TelegramIcon = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
    <path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0 12 12 0 0011.944 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
  </svg>
);

const categories = [
  { nl: 'Alle peptides', en: 'All peptides', slug: 'peptides' },
  { nl: 'Gewichtsbeheer & GLP-1', en: 'Weight Management & GLP-1', slug: 'gewichtsbeheer' },
  { nl: 'Herstel & weefsel', en: 'Recovery & Tissue', slug: 'herstel-weefsel' },
  { nl: 'Spiergroei', en: 'Muscle Growth', slug: 'spiergroei' },
  { nl: 'Vetverbranding & metabolisme', en: 'Fat Burning & Metabolism', slug: 'vetverbranding' },
  { nl: 'Haar & huid', en: 'Hair & Skin', slug: 'haar-huid' },
  { nl: 'Libido', en: 'Libido', slug: 'libido' },
  { nl: 'Nakuur & PCT', en: 'PCT', slug: 'nakuur-pct' },
  { nl: 'Stacks & Kits', en: 'Stacks & Kits', slug: 'stacks-kits' },
  { nl: 'Benodigdheden', en: 'Supplies', slug: 'benodigdheden' },
];

const infoLinks = [
  { nl: 'Webshop', en: 'Shop', to: '/shop' as const },
  { nl: 'Labtesten', en: 'Lab Tests', to: '/labtesten' as const },
  { nl: 'Kennisbank', en: 'Knowledge Base', to: '/kennisbank' as const },
  { nl: 'Peptidewijzer', en: 'Peptide Guide', to: '/peptidewijzer' as const },
  { nl: 'Blog', en: 'Blog', to: '/blog' as const },
  { nl: 'Peptide Calculator', en: 'Peptide Calculator', to: '/peptide-calculator' as const },
  { nl: 'Reviews', en: 'Reviews', to: '/reviews' as const },
  { nl: 'Over Ons', en: 'About Us', to: '/over-ons' as const },
  { nl: 'FAQ', en: 'FAQ', to: '/veelgestelde-vragen' as const },
  { nl: 'Contact', en: 'Contact', to: '/contact-us' as const },
  { nl: 'Verzending & Retour', en: 'Shipping & Returns', to: '/retourbeleid' as const },
  { nl: 'Algemene Voorwaarden', en: 'Terms & Conditions', to: '/algemene-voorwaarden' as const },
  { nl: 'Privacybeleid', en: 'Privacy Policy', to: '/privacybeleid' as const },
  { nl: 'Sitemap', en: 'Sitemap', to: '/sitemap' as const },
];

const trustBadges = [
  { icon: FlaskConical, nl: 'Lab-geverifieerd', en: 'Lab-verified' },
  { icon: ShieldCheck, nl: 'Tot 99,9% zuiverheid', en: 'Up to 99.9% purity' },
  { icon: Truck, nl: 'Discrete verzending', en: 'Discreet shipping' },
  { icon: Lock, nl: 'IDEAL/BANCONTACT', en: 'IDEAL/BANCONTACT' },
];

const SectionHeading = ({ children }: { children: React.ReactNode }) => (
  <h4 className="flex items-center gap-2 mb-5 text-[10px] uppercase tracking-[0.22em] font-bold text-shell-foreground/50">
    <span className="h-px w-5 bg-brand-gold/70" aria-hidden="true" />
    {children}
  </h4>
);

const Footer = () => {
  const t = useT();
  return (
    <footer className="relative bg-shell text-shell-foreground mt-16 overflow-hidden">
      {/* Top hairline + ambient gold glow */}
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand-gold/60 to-transparent" aria-hidden="true" />
      <div className="absolute -top-32 left-1/4 w-[480px] h-[480px] bg-brand-gold/[0.04] blur-3xl rounded-full pointer-events-none" aria-hidden="true" />

      {/* Trust strip */}
      <div className="border-b border-shell-border bg-shell-elevated/60 relative">
        <div className="container grid grid-cols-2 md:grid-cols-4 gap-4 py-5">
          {trustBadges.map(({ icon: Icon, nl, en }) => (
            <div key={nl} className="flex items-center gap-2.5 text-[11px] uppercase tracking-wide text-shell-foreground/70">
              <Icon className="w-4 h-4 text-brand-gold shrink-0" />
              <span>{t(nl, en)}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="container py-16 relative">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12">
          {/* Brand block */}
          <div className="lg:col-span-4">
            <Link to="/" className="flex items-center gap-3 group">
              <div className="relative shrink-0">
                <img src={logoAsset.url} alt="Peptidewinkel logo — research peptiden" width={44} height={44} loading="lazy" decoding="async" className="relative h-11 w-auto" />
              </div>
              <div className="flex flex-col leading-tight">
                <span className="font-display font-semibold text-lg tracking-tight text-shell-foreground">
                  <span className="text-brand-gold">Peptide</span>winkel
                </span>
                <span className="text-[9px] text-shell-foreground/40 tracking-[0.22em] uppercase">Research Peptiden</span>

              </div>
            </Link>

            <p className="text-shell-foreground/60 text-sm leading-relaxed mt-6 max-w-sm">
              {t('Research-grade peptiden met onafhankelijke labrapporten. Discreet verpakt, snelle verzending binnen Europa.', 'Research-grade peptides with independent lab reports. Discreetly packaged, fast shipping within Europe.')}
            </p>

            {/* Lab badge */}
            <div className="mt-6 inline-flex items-center gap-3 rounded-full border border-brand-gold/30 bg-brand-gold/[0.06] pl-2 pr-4 py-1.5">
              <span className="flex items-center justify-center w-6 h-6 rounded-full bg-gradient-to-br from-brand-gold-hi to-brand-gold-lo text-brand-gold-contrast">
                <FlaskConical className="w-3.5 h-3.5" />
              </span>
              <span className="text-[10px] uppercase tracking-[0.18em] font-bold text-brand-gold">{t('Purity tot 99,9%', 'Purity up to 99.9%')}</span>
            </div>
          </div>

          {/* Peptides */}
          <div className="lg:col-span-3">
            <SectionHeading>{t('Peptides', 'Peptides')}</SectionHeading>
            <ul className="space-y-2.5 text-sm">
              {categories.map((cat) => (
                <li key={cat.slug}>
                  <Link
                    to="/product-category/$slug"
                    params={{ slug: cat.slug }}
                    className="text-shell-foreground/65 hover:text-brand-gold transition-colors inline-flex items-center gap-1.5 group"
                  >
                    {t(cat.nl, cat.en)}
                    <ArrowUpRight className="w-3 h-3 -translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Info */}
          <div className="lg:col-span-3">
            <SectionHeading>{t('Informatie', 'Information')}</SectionHeading>
            <ul className="space-y-2.5 text-sm">
              {infoLinks.map((link) => (
                <li key={link.to}>
                  <Link
                    to={link.to}
                    className="text-shell-foreground/65 hover:text-brand-gold transition-colors inline-flex items-center gap-1.5 group"
                  >
                    {t(link.nl, link.en)}
                    <ArrowUpRight className="w-3 h-3 -translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="lg:col-span-2">
            <SectionHeading>{t('Contact', 'Contact')}</SectionHeading>
            <ul className="space-y-3 text-sm">
              <li>
                <a
                  href="https://t.me/+Flllg3K_W9NhZjk0"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 text-shell-foreground/65 hover:text-brand-gold transition-colors group"
                >
                  <span className="w-8 h-8 rounded-md border border-shell-border bg-shell-foreground/[0.03] flex items-center justify-center text-brand-gold group-hover:border-brand-gold/40 group-hover:bg-brand-gold/[0.08] transition-all shrink-0">
                    <TelegramIcon className="w-3.5 h-3.5" />
                  </span>
                  <span className="truncate">{t('Telegram-kanaal', 'Telegram channel')}</span>
                </a>
              </li>
              <li>
                <a
                  href="mailto:info@peptidewinkel.com"
                  className="flex items-center gap-3 text-shell-foreground/65 hover:text-brand-gold transition-colors group"
                >
                  <span className="w-8 h-8 rounded-md border border-shell-border bg-shell-foreground/[0.03] flex items-center justify-center text-brand-gold group-hover:border-brand-gold/40 group-hover:bg-brand-gold/[0.08] transition-all shrink-0">
                    <Mail className="w-3.5 h-3.5" />
                  </span>
                  <span className="truncate">info@peptidewinkel.com</span>
                </a>
              </li>
              <li>
                <a href="https://www.facebook.com/PeptideWinkel" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-shell-foreground/65 hover:text-brand-gold transition-colors group">
                  <span className="w-8 h-8 rounded-md border border-shell-border bg-shell-foreground/[0.03] flex items-center justify-center text-brand-gold group-hover:border-brand-gold/40 group-hover:bg-brand-gold/[0.08] transition-all shrink-0">
                    <Facebook className="w-3.5 h-3.5" />
                  </span>
                  <span className="truncate">Facebook</span>
                </a>
              </li>
              <li>
                <a href="https://www.instagram.com/peptide_winkel" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-shell-foreground/65 hover:text-brand-gold transition-colors group">
                  <span className="w-8 h-8 rounded-md border border-shell-border bg-shell-foreground/[0.03] flex items-center justify-center text-brand-gold group-hover:border-brand-gold/40 group-hover:bg-brand-gold/[0.08] transition-all shrink-0">
                    <Instagram className="w-3.5 h-3.5" />
                  </span>
                  <span className="truncate">Instagram</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Disclaimer band */}
        <div className="mt-14 rounded-xl border border-brand-gold/15 bg-brand-gold/[0.03] px-5 py-4 flex items-start gap-3">
          <ShieldCheck className="w-4 h-4 text-brand-gold mt-0.5 shrink-0" />
          <p className="text-[11px] leading-relaxed text-shell-foreground/55">
            {t('Alle producten zijn uitsluitend bestemd voor', 'All products are intended solely for')} <span className="text-shell-foreground/80 font-medium">{t('in-vitro laboratoriumonderzoek', 'in-vitro laboratory research')}</span>. {t('Niet voor menselijke of dierlijke consumptie, diagnose of therapeutisch gebruik.', 'Not for human or animal consumption, diagnosis or therapeutic use.')}
          </p>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-shell-border mt-10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-[11px] text-shell-foreground/45 tracking-wide">
            © {new Date().getFullYear()} Peptidewinkel · {t('Alle rechten voorbehouden.', 'All rights reserved.')}
          </p>
          <div className="flex items-center gap-6 text-[11px] uppercase tracking-wider text-shell-foreground/50">
            <Link to="/disclaimer" className="hover:text-brand-gold transition-colors">{t('Disclaimer', 'Disclaimer')}</Link>
            <Link to="/privacybeleid" className="hover:text-brand-gold transition-colors">{t('Privacy', 'Privacy')}</Link>
            <Link to="/algemene-voorwaarden" className="hover:text-brand-gold transition-colors">{t('Voorwaarden', 'Terms')}</Link>
            <button
              type="button"
              onClick={() => void openCookieSettings()}
              className="hover:text-brand-gold transition-colors uppercase tracking-wider"
            >
              {t('Cookie-instellingen', 'Cookie settings')}
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;