import { useServerFn } from "@tanstack/react-start";
import { subscribeNewsletter } from "@/lib/newsletter.functions";
import { Turnstile, resetTurnstile } from "@/components/Turnstile";
import { createFileRoute, Link } from '@tanstack/react-router';
import { useState, useEffect, useCallback } from 'react';
import {
  ArrowRight, Truck, Shield, Star, ChevronRight, CreditCard, FlaskConical,
  ShieldCheck, Award, HeartPulse, Package, Microscope, Lock, CheckCircle2, Plus, Minus,
} from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import ProductCard from '@/components/ProductCard';
import { products as mockProducts, type Category } from '@/data/mockProducts';
import { useFeaturedProducts, useCategories, useBlogPosts, useNewProducts, categoriesQueryOptions } from '@/hooks/useWooCommerce';
import HomeReviews from '@/components/HomeReviews';
import { peptides as kbPeptides } from '@/content/kennisbank/peptides';
import { getCategoryIcon } from '@/lib/categoryIcons';
import { motion } from 'framer-motion';
import heroBanner from '@/assets/hero-alpha-biopharma.jpg';
import ogImageAsset from '@/assets/og-image-v2.jpg.asset.json';
import { sanitizedHtml } from '@/lib/sanitize';
import { useIsMobile } from '@/hooks/use-mobile';
import { useT, useLang, headLang, localizePath, makeT, locale } from '@/lib/i18n';

const SITE_URL = 'https://peptidewinkel.com';
const HERO_OG = `${SITE_URL}${ogImageAsset.url}`;


const FAQS = (t: ReturnType<typeof import('@/lib/i18n').useT>) => [
  {
    q: t('Zijn jullie peptiden geschikt voor in-vitro onderzoek?', 'Are your peptides suitable for in-vitro research?'),
    a: t(
      'Ja. Al onze peptiden worden uitsluitend geleverd voor in-vitro laboratoriumonderzoek. Ze worden geproduceerd door Alpha BioPharma; batches worden getest door het externe lab Janoshik Analytical. Het doel is ≥ 99% zuiverheid — de gemeten waarde per batch staat op Labtesten.',
      'Yes. All our peptides are supplied exclusively for in-vitro laboratory research. They are produced by Alpha BioPharma; batches are tested by the independent lab Janoshik Analytical. The target is ≥ 99% purity — the measured value per batch is listed on Lab Tests.',
    ),
  },
  {
    q: t('Hoe snel wordt mijn bestelling verzonden?', 'How fast is my order shipped?'),
    a: t(
      'Op werkdagen vóór 12:00 besteld? Dan verzenden we dezelfde werkdag. In Nederland en België wordt je pakket doorgaans de volgende werkdag bezorgd; de bezorgtijd hangt af van de vervoerder. Verzending gebeurt 100% discreet, zonder logo of vermelding van de inhoud.',
      'Ordered on a weekday before 12:00? Then we ship it that same working day. In the Netherlands and Belgium your parcel is usually delivered the next working day; delivery time depends on the carrier. Shipping is 100% discreet, with no logo or mention of the contents.',
    ),
  },
  {
    q: t('Welke betaalmethoden accepteren jullie?', 'Which payment methods do you accept?'),
    a: t(
      'Je rekent veilig af met iDEAL, Bancontact, bankoverschrijving of crypto. Alle transacties zijn versleuteld en wij bewaren geen betaalgegevens.',
      'You can pay securely with iDEAL, Bancontact, bank transfer or crypto. All transactions are encrypted and we do not store payment details.',
    ),
  },
  {
    q: t('Waar komen jullie peptiden vandaan?', 'Where do your peptides come from?'),
    a: t(
      'Al onze peptiden worden geproduceerd door één vaste fabrikant: Alpha BioPharma. Peptidewinkel produceert zelf niet; wij kopen in, controleren de documentatie, verpakken discreet en verzenden vanuit de EU.',
      'All our peptides are produced by one fixed manufacturer: Alpha BioPharma. Peptidewinkel does not manufacture itself; we purchase, check the documentation, package discreetly and ship from the EU.',
    ),
  },
  {
    q: t('Hoe wordt de kwaliteit van iedere batch geverifieerd?', 'How is the quality of every batch verified?'),
    a: t(
      'Alpha BioPharma laat batches testen door Janoshik Analytical, een extern laboratorium dat geen eigendom is van Alpha BioPharma of Peptidewinkel. Dat bedoelen wij met "onafhankelijk getest": het lab staat los van wie produceert en wie verkoopt — de opdracht komt wel van de fabrikant. Per rapport tonen we op Labtesten het product, de batch (indien vermeld), de testdatum, het resultaat en een link naar het originele rapport op janoshik.com, waar je de echtheid zelf kunt controleren.',
      'Alpha BioPharma has batches tested by Janoshik Analytical, an independent laboratory not owned by Alpha BioPharma or Peptidewinkel. That is what we mean by "independently tested": the lab is separate from who manufactures and who sells — though it is commissioned by the manufacturer. For each report we show on Lab Tests the product, the batch (if stated), the test date, the result and a link to the original report on janoshik.com, where you can verify its authenticity yourself.',
    ),
  },
  {
    q: t('Hoe bewaar ik peptiden correct?', 'How do I store peptides correctly?'),
    a: t(
      'Gevriesdroogde (lyofiele) peptiden kun je bewaren op kamertemperatuur, bij voorkeur in een afgesloten kast zonder grote temperatuurschommelingen en uit direct licht. Pas na reconstitutie met bacteriostatisch water bewaar je het flesje in de koelkast (2–8 °C) en gebruik je het bij voorkeur binnen 30 dagen.',
      'Freeze-dried (lyophilized) peptides can be stored at room temperature, preferably in a closed cabinet without large temperature fluctuations and out of direct light. Only after reconstitution with bacteriostatic water should you store the vial in the fridge (2–8 °C), and use it preferably within 30 days.',
    ),
  },
];


export const Route = createFileRoute('/')({
  loader: async ({ context }) => {
    try { await context.queryClient.ensureQueryData(categoriesQueryOptions()); } catch { /* categories render client-side */ }
  },
  head: (ctx) => {
    const lang = headLang(ctx);
    const t = makeT(lang);
    const title = t('Research peptides kopen | Lab-getest & peptidebundels | Peptidewinkel', 'Buy Research Peptides | Lab-Tested & Bundles | Peptidewinkel');
    const description = t(
      'Research peptides kopen van Alpha BioPharma, getest door extern lab Janoshik. Ook voordelige peptidebundels. Werkdagen vóór 12:00 besteld = dezelfde dag verzonden.',
      'Buy research peptides from Alpha BioPharma, tested by external lab Janoshik. Value peptide bundles available. Ordered on weekdays before 12:00 = shipped same day.',
    );
    const ogTitle = t('Peptidewinkel — Lab-getest, hoge zuiverheid, discreet verzonden', 'Peptidewinkel — Lab-Tested, High Purity, Shipped Discreetly');
    const ogDescription = t(
      'Research-grade peptiden van Alpha BioPharma met openbare Janoshik-labrapporten. Vóór 12:00 besteld = dezelfde werkdag verzonden.',
      'Research-grade peptides from Alpha BioPharma with public Janoshik lab reports. Ordered before 12:00 means shipped the same working day.',
    );
    const twitterTitle = t('Peptidewinkel — Research-Grade Peptiden', 'Peptidewinkel — Research-Grade Peptides');
    const twitterDescription = t('Hoge zuiverheid, lab-getest, discreet verzonden vanuit de EU.', 'High purity, lab-tested, shipped discreetly from the EU.');
    const orgDescription = t('Research-grade peptiden, lab-getest, discreet verzonden vanuit de EU.', 'Research-grade peptides, lab-tested, shipped discreetly from the EU.');
    const canonical = `${SITE_URL}${localizePath('/', lang)}`;
    const faqs = FAQS(t);
    return {
      meta: [
        { title },
        { name: 'description', content: description },
        { name: 'keywords', content: t('research peptides kopen, peptidebundels, peptiden kopen, BPC-157, TB-500, GLP-1, peptiden Nederland, lab-getest', 'buy research peptides, peptide bundles, buy peptides, BPC-157, TB-500, GLP-1, peptides Netherlands, lab-tested') },
        { property: 'og:title', content: ogTitle },
        { property: 'og:description', content: ogDescription },
        { property: 'og:image', content: HERO_OG },
        { property: 'og:type', content: 'website' },
        { property: 'og:url', content: canonical },
        { name: 'twitter:card', content: 'summary_large_image' },
        { name: 'twitter:title', content: twitterTitle },
        { name: 'twitter:description', content: twitterDescription },
        { name: 'twitter:image', content: HERO_OG },
      ],
      links: [{ rel: 'canonical', href: canonical }],
      scripts: [
        {
          type: 'application/ld+json',
          children: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Organization',
            name: 'Peptidewinkel',
            url: SITE_URL,
            logo: `${SITE_URL}/favicon.ico`,
            description: orgDescription,
            sameAs: ['https://www.facebook.com/PeptideWinkel', 'https://www.instagram.com/peptide_winkel', 'https://t.me/+Flllg3K_W9NhZjk0'],
            contactPoint: [{ '@type': 'ContactPoint', email: 'info@peptidewinkel.com', contactType: 'customer support', areaServed: 'EU' }],
          }),
        },
        {
          type: 'application/ld+json',
          children: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'FAQPage',
            mainEntity: faqs.map((f) => ({
              '@type': 'Question',
              name: f.q,
              acceptedAnswer: { '@type': 'Answer', text: f.a },
            })),
          }),
        },
      ],
    };
  },
  component: IndexPage,
});

const useParallax = (speed = 0.3) => {
  const [offset, setOffset] = useState(0);
  const handleScroll = useCallback(() => {
    requestAnimationFrame(() => setOffset(window.scrollY * speed));
  }, [speed]);
  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);
  return offset;
};

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-border/60">
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="w-full flex items-start justify-between gap-6 py-5 text-left group focus-ring"
        aria-expanded={open}
      >
        <span className="font-display font-semibold text-base text-foreground group-hover:text-primary transition-colors">{q}</span>
        <span className="shrink-0 mt-1 text-primary">{open ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}</span>
      </button>
      <div className={`grid transition-all duration-300 ${open ? 'grid-rows-[1fr] opacity-100 pb-5' : 'grid-rows-[0fr] opacity-0'}`}>
        <div className="overflow-hidden">
          <p className="text-sm text-muted-foreground leading-relaxed max-w-3xl">{a}</p>
        </div>
      </div>
    </div>
  );
}

function CategoryGrid({ categories }: { categories: Category[] }) {
  const t = useT();
  return (
    <>
      {categories.slice(0, 10).map((cat, idx) => (
        <Link key={cat.id} to="/product-category/$slug" params={{ slug: cat.slug }} aria-label={t(`Bekijk categorie ${cat.name}`, `View category ${cat.name}`)} className={`group block glass-card-premium p-4 sm:p-6 text-center focus-ring ${idx >= 6 ? 'hidden sm:block' : ''}`}>
          <div className="w-12 h-12 sm:w-14 sm:h-14 mx-auto mb-3 sm:mb-4 gradient-primary rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-glow-soft">
            {(() => { const IconComp = getCategoryIcon(cat.slug); return <IconComp className="w-5 h-5 sm:w-6 sm:h-6 text-white" aria-hidden="true" />; })()}
          </div>
          <h3 className="font-display font-semibold text-xs sm:text-sm mb-0.5 sm:mb-1 line-clamp-1">{cat.name}</h3>
          {cat.count > 0 && <p className="text-[10px] sm:text-xs text-muted-foreground">{cat.count} {cat.count === 1 ? t('product', 'product') : t('producten', 'products')}</p>}
        </Link>
      ))}
    </>
  );
}

function IndexPage() {
  const t = useT();
  const lang = useLang();
  const { data: wcFeatured, isLoading: featuredLoading } = useFeaturedProducts();
  const { data: wcNew, isLoading: newLoading } = useNewProducts(8);
  const { data: blogData, isLoading: blogLoading } = useBlogPosts({ per_page: 3 });
  const [hydrated, setHydrated] = useState(false);

  const parallaxOffset = useParallax(0.35);
  const isMobile = useIsMobile();

  useEffect(() => {
    setHydrated(true);
  }, []);

  const { data: wcCategories } = useCategories();
  // Real categories are primed by the route loader (SSR), so no outdated
  // placeholder list with "0 producten" is ever rendered.
  const categories = (wcCategories ?? []).filter((c) => (c.parent ?? 0) === 0 && c.count > 0);
  const featuredProducts = hydrated && wcFeatured ? wcFeatured : mockProducts.filter((p) => p.isFeatured);
  const newProducts = hydrated && wcNew ? wcNew : mockProducts.filter((p) => p.isNew).slice(0, 8);
  const showFeaturedLoading = hydrated && featuredLoading;
  const showNewLoading = hydrated && newLoading;
  const showBlogLoading = hydrated && blogLoading;

  return (
    <div className="overflow-hidden">
      {/* 1. HERO */}
      <section className="relative bg-[#050505] overflow-hidden" aria-labelledby="hero-heading">
        <div className="absolute -top-32 -right-32 w-[500px] h-[500px] bg-[#936B25]/15 rounded-full blur-[120px] pointer-events-none" aria-hidden="true" />
        <div className="absolute -bottom-32 -left-32 w-[400px] h-[400px] bg-[#E5B85F]/[0.06] rounded-full blur-[100px] pointer-events-none" aria-hidden="true" />
        <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#FFD777 1px, transparent 1px)', backgroundSize: '40px 40px' }} aria-hidden="true" />

        <div className="container relative z-10 py-12 lg:py-16">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            <div className="lg:col-span-7 space-y-6">
              <motion.div initial={false} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6 }}>
                <span className="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full border border-[#936B25]/40 bg-[#936B25]/10 text-[#E5B85F] text-[11px] font-semibold tracking-[0.22em] uppercase">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#FFD777] opacity-75" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-[#FFD777]" />
                  </span>
                  {t('Gevalideerde onderzoekskwaliteit', 'Validated research quality')}
                </span>
              </motion.div>

              <motion.h1 id="hero-heading" initial={false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.1 }} className="font-display text-white text-5xl md:text-6xl lg:text-7xl font-extrabold leading-[0.9] tracking-tight uppercase">
                {t('De nieuwe', 'The new')}<br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FFD777] via-[#E5B85F] to-[#936B25]">{t('standaard', 'standard')}</span>
                <span className="block text-white/90 text-2xl md:text-3xl font-semibold normal-case tracking-tight mt-4">{t('in research-grade peptiden', 'in research-grade peptides')}</span>
              </motion.h1>

              <motion.p initial={false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.25 }} className="text-white/60 text-lg max-w-xl leading-relaxed">
                {t('Geproduceerd door Alpha BioPharma, per batch getest door het externe lab Janoshik. Doel: een zuiverheid van', 'Produced by Alpha BioPharma, each batch tested by the independent lab Janoshik. Target: a purity of')}{' '}
                <span className="text-white font-semibold">≥ 99%</span>. {t('Vóór 12:00 besteld? Dan vertrekt je pakket dezelfde werkdag nog — anoniem en zonder logo.', 'Ordered before 12:00? Then your parcel leaves that same working day — anonymous and without a logo.')}
              </motion.p>

              <motion.div initial={false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.4 }} className="flex flex-col sm:flex-row sm:flex-wrap gap-4 sm:gap-5 pt-2">
                {/* The hero is always dark, so this button uses the fixed brand gold
                    rather than the theme tokens: in light mode those turn it into a
                    dark brown block with white text on the black hero. */}
                <Link to="/shop" className="group relative inline-flex justify-center items-center gap-2.5 px-9 py-4 bg-gradient-to-br from-[#FFD777] to-[#936B25] text-black font-display font-bold uppercase tracking-[0.18em] text-sm hover:brightness-110 transition-all duration-300">
                  <span className="absolute inset-0 border border-white/25 translate-x-1.5 translate-y-1.5 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300" aria-hidden="true" />
                  <span className="relative z-10 inline-flex items-center gap-2.5">
                    {t('Bekijk assortiment', 'View range')} <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
                  </span>
                </Link>
                <Link to="/labtesten" className="inline-flex justify-center items-center px-9 py-4 border border-white/15 text-white font-display font-bold uppercase tracking-[0.18em] text-sm hover:bg-white/5 transition-colors">
                  {t('Labrapporten', 'Lab Reports')}
                </Link>
              </motion.div>

              <motion.div initial={false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.55 }} className="grid grid-cols-3 gap-6 pt-6 border-t border-white/10">
                <div>
                  <div className="font-display text-[#FFD777] font-extrabold text-xl sm:text-2xl md:text-3xl tracking-tighter whitespace-nowrap">{t('tot 99,9%', 'up to 99.9%')}</div>
                  <div className="text-white/40 text-[10px] uppercase tracking-[0.18em] font-semibold mt-1">{t('Gemeten zuiverheid', 'Measured purity')}</div>
                </div>
                <div>
                  <div className="font-display text-[#FFD777] font-extrabold text-2xl md:text-3xl tracking-tighter">Janoshik</div>
                  <div className="text-white/40 text-[10px] uppercase tracking-[0.18em] font-semibold mt-1">{t('Extern getest', 'Independently tested')}</div>
                </div>
                <div>
                  <div className="font-display text-[#FFD777] font-extrabold text-2xl md:text-3xl tracking-tighter">12:00</div>
                  <div className="text-white/40 text-[10px] uppercase tracking-[0.18em] font-semibold mt-1">{t('Werkdagen = vandaag verzonden', 'Weekdays = shipped today')}</div>
                </div>
              </motion.div>
            </div>

            <motion.div initial={false} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: 0.3 }} className="lg:col-span-5 relative">
              <div className="relative z-10 group">
                <div className="relative aspect-[4/5] max-h-[80vh] lg:max-h-none lg:max-w-[440px] overflow-hidden rounded-2xl border border-white/10 bg-zinc-900 shadow-2xl lg:will-change-transform" style={isMobile ? undefined : { transform: `translate3d(0, ${parallaxOffset * -0.15}px, 0)` }}>
                  <img src={heroBanner} alt={t("Alpha BioPharma Retatrutide en Tirzepatide verpakkingen met vials", "Alpha BioPharma Retatrutide and Tirzepatide packaging with vials")} width={1200} height={1500} loading="eager" decoding="async" fetchPriority="high" className="w-full h-full object-cover object-center" style={{ imageRendering: 'auto' }} />
                  <div className="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-[#050505]/80 to-transparent" aria-hidden="true" />
                  <div className="absolute bottom-3 right-3 sm:bottom-6 sm:right-6 bg-black/80 backdrop-blur-md border border-[#936B25]/60 px-3 py-2 sm:px-6 sm:py-4">
                    <div className="font-display text-[#FFD777] text-xl sm:text-3xl font-extrabold tracking-tighter">{t('Tot 99,9%', 'Up to 99.9%')}</div>
                    <div className="text-white/60 text-[9px] sm:text-[10px] font-bold tracking-[0.2em] uppercase mt-0.5">{t('Gemeten zuiverheid · HPLC', 'Measured purity · HPLC')}</div>
                  </div>
                </div>
                <div className="absolute -bottom-10 -right-10 w-64 h-64 bg-[#936B25]/15 rounded-full blur-[100px] -z-10" aria-hidden="true" />
              </div>
              <div className="absolute top-1/2 -right-2 translate-x-full -translate-y-1/2 hidden xl:block">
                <span className="text-[#936B25] text-[10px] font-bold uppercase tracking-[0.5em] opacity-60" style={{ writingMode: 'vertical-lr' }}>
                  {t('Premium Laboratory Grade Only', 'Premium Laboratory Grade Only')}
                </span>
              </div>
            </motion.div>

          </div>
        </div>
      </section>

      {/* 2. TRUST STRIP */}
      <section className="border-y border-border/60 bg-card/40" aria-label={t("Onze beloftes", "Our promises")}>
        <div className="container py-5 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { icon: FlaskConical, label: t('Getest door Janoshik', 'Tested by Janoshik') },
            { icon: ShieldCheck, label: t('Tot 99,9% zuiverheid', 'Up to 99.9% purity') },
            { icon: Truck, label: t('Werkdagen vóór 12:00 = vandaag verzonden', 'Weekdays before 12:00 = shipped today') },
            { icon: Lock, label: 'iDEAL · Bancontact · Crypto' },
          ].map(({ icon: Icon, label }) => (
            <div key={label} className="flex items-center gap-2.5 text-[11px] sm:text-xs uppercase tracking-wide text-foreground/70">
              <Icon className="w-4 h-4 text-primary shrink-0" />
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* 3. BENTO — ONDERZOEKSGEBIEDEN */}
      <section className="container py-16" aria-labelledby="cat-heading">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-4">
          <div>
            <p className="text-primary text-xs font-semibold uppercase tracking-[0.24em] mb-2">{t('Onderzoeksgebieden', 'Research areas')}</p>
            <h2 id="cat-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter">{t('Kies je categorie', 'Choose your category')}</h2>
            <p className="text-muted-foreground text-sm mt-2 max-w-lg">{t('Van herstel- en groeipeptiden tot GLP-1 en cognitieve verbindingen — vind direct wat je nodig hebt.', 'From healing and growth peptides to GLP-1 and cognitive compounds — find what you need right away.')}</p>
          </div>
          <Link to="/shop" className="group hidden sm:flex text-xs font-bold uppercase tracking-[0.2em] text-foreground items-center gap-3 shrink-0">
            {t('Alle categorieën', 'All categories')} <span className="rule-grow" aria-hidden="true" />
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 md:auto-rows-[248px] gap-4 mb-4">
          <Link to="/shop" className="group bento-tile md:col-span-2 md:row-span-2 p-0 focus-ring">
            <img src={heroBanner} alt={t("Peptide-vials in het laboratorium", "Peptide vials in the laboratory")} loading="lazy" decoding="async" className="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:scale-105 transition-transform duration-1000" />
            <div className="absolute inset-0 bg-gradient-to-t from-[#050505] via-[#050505]/60 to-transparent" aria-hidden="true" />
            <div className="absolute bottom-8 left-8 right-8 z-10">
              <h3 className="font-display text-4xl md:text-5xl font-extrabold text-white uppercase tracking-tighter mb-3">{t('Bestsellers', 'Bestsellers')}</h3>
              <p className="text-white/60 max-w-sm mb-6 text-base">{t('De meest vertrouwde verbindingen voor structureel onderzoek.', 'The most trusted compounds for structural research.')}</p>
              <span className="inline-flex items-center gap-3 text-[#E5B85F] font-bold text-xs tracking-[0.2em] uppercase border-b border-[#936B25]/60 pb-1">
                {t('Shop collectie', 'Shop collection')} <ArrowRight className="w-4 h-4" />
              </span>
            </div>
          </Link>

          <div className="bento-tile md:col-span-2 p-8 flex flex-col justify-between">
            <div className="flex justify-between items-start gap-4">
              <div className="w-14 h-14 gradient-primary flex items-center justify-center rounded-2xl rotate-3 shadow-glow-soft">
                <Package className="w-6 h-6 text-white" aria-hidden="true" />
              </div>
              <div className="text-right">
                <span className="block font-display text-primary font-extrabold text-2xl tracking-tighter uppercase">{t('Voorraad', 'Stock')}</span>
                <span className="text-[10px] text-muted-foreground font-bold uppercase tracking-[0.2em]">{t('Actuele status', 'Live status')}</span>
              </div>
            </div>
            <div>
              <h3 className="font-display text-2xl font-bold uppercase tracking-tighter mb-2">{t('Direct leverbaar', 'Ready to ship')}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed max-w-md">{t('Bestellingen vóór 12:00 gaan dezelfde werkdag discreet de deur uit vanuit ons EU-distributiecentrum.', 'Orders before 12:00 leave discreetly the same working day from our EU distribution center.')}</p>
            </div>
          </div>

          <div className="bento-tile p-8 flex flex-col justify-center">
            <div className="font-display text-primary font-extrabold text-3xl tracking-tighter">{t('tot 99,9%', 'up to 99.9%')}</div>
            <h4 className="text-foreground font-bold text-xs tracking-[0.2em] uppercase mt-3">{t('Gemeten zuiverheid', 'Measured purity')}</h4>
            <div className="w-full h-1 bg-muted mt-5 rounded-full overflow-hidden">
              <div className="h-full gradient-primary w-[99%]" />
            </div>
            <p className="text-[10px] text-muted-foreground uppercase tracking-[0.16em] mt-3">{t('Batchdocumentatie beschikbaar', 'Batch documentation available')}</p>
          </div>

          <Link to="/labtesten" className="group relative overflow-hidden rounded-[2rem] gradient-primary p-8 flex flex-col justify-center items-center text-center transition-transform duration-300 hover:-translate-y-1 focus-ring">
            <span className="text-black/60 text-[10px] font-extrabold uppercase tracking-[0.3em] mb-2">Verified</span>
            <div className="font-display text-black font-extrabold text-5xl tracking-tighter">COA</div>
            <div className="mt-4 w-8 h-0.5 bg-black/25" aria-hidden="true" />
            <p className="mt-4 text-black font-bold text-[10px] leading-tight uppercase tracking-[0.14em]">{t("Bekijk alle", "View all")}<br />{t("labrapportages", "lab reports")}</p>
          </Link>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
          <CategoryGrid categories={categories} />
        </div>
      </section>


      {/* 4. FEATURED PRODUCTS */}
      <section className="bg-surface/50" aria-labelledby="feat-heading">
        <div className="container py-16">
          <div className="flex items-end justify-between mb-10 gap-4">
            <div>
              <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-1">{t('Meest besteld', 'Most ordered')}</p>
              <h2 id="feat-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter">{t('Bestsellers van deze maand', "This month's bestsellers")}</h2>
              <p className="text-muted-foreground text-sm mt-2 max-w-lg">{t('De peptiden waar onze klanten steeds weer voor terugkomen — allemaal op voorraad en klaar voor verzending.', 'The peptides our customers keep coming back for — all in stock and ready to ship.')}</p>
            </div>
            <Link to="/shop" className="text-sm text-primary font-semibold hover:underline flex items-center gap-1 group shrink-0">
              {t('Bekijk alles', 'View all')} <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </Link>
          </div>
          {showFeaturedLoading ? (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
              {Array.from({ length: 8 }).map((_, i) => (
                <div key={i} className={`bg-card rounded-2xl border border-border/50 overflow-hidden shadow-card ${i >= 4 ? 'hidden md:block' : ''}`}>
                  <Skeleton className="aspect-square" />
                  <div className="p-5 space-y-2"><Skeleton className="h-3 w-16" /><Skeleton className="h-4 w-full" /><Skeleton className="h-6 w-20" /></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
              {featuredProducts.slice(0, 8).map((product, i) => (
                <div key={product.id} className={i >= 4 ? 'hidden md:block' : ''}>
                  <ProductCard product={product} />
                </div>
              ))}
            </div>
          )}
          <div className="mt-10 text-center">
            <Link to="/shop" className="inline-flex items-center gap-2 px-8 py-4 rounded-sm gradient-primary text-white font-bold uppercase tracking-[0.18em] text-sm hover:shadow-glow transition-all">
              {t('Naar de volledige shop', 'Go to the full shop')} <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* 5. HOW IT WORKS */}
      <section className="container py-20" aria-labelledby="how-heading">
        <div className="text-center max-w-2xl mx-auto mb-14">
          <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-2">{t('Zo werkt het', 'How it works')}</p>
          <h2 id="how-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter mb-4">{t('Van bestelling tot brievenbus in drie stappen', 'From order to doorstep in three steps')}</h2>
          <p className="text-muted-foreground">{t('Op werkdagen vóór 12:00 besteld = dezelfde dag verzonden; in NL en BE doorgaans de volgende werkdag bezorgd. Het labrapport per batch staat online.', 'Ordered on weekdays before 12:00 = shipped the same day; usually delivered the next working day in NL and BE. The lab report per batch is available online.')}</p>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {[
            { step: '01', icon: Package, title: t('Kies & bestel', 'Choose & order'), desc: t('Selecteer je peptide(n), reken veilig af met iDEAL, Bancontact of bank overschrijving. Klaar in minder dan twee minuten.', 'Select your peptide(s), pay securely with iDEAL, Bancontact or bank transfer. Done in under two minutes.') },
            { step: '02', icon: Microscope, title: t('Snel verwerkt', 'Processed quickly'), desc: t('Vóór 12:00 besteld? Dan gaat je pakket dezelfde werkdag de deur uit — netjes verpakt en gecontroleerd.', 'Ordered before 12:00? Then your parcel leaves that same working day — neatly packed and checked.') },
            { step: '03', icon: Truck, title: t('Discreet bij je thuis', 'Discreetly delivered'), desc: t('Anonieme verpakking, getrackte verzending vanuit de EU. In Nederland en België doorgaans de volgende werkdag binnen.', 'Anonymous packaging, tracked shipping from the EU. Usually delivered the next working day in the Netherlands and Belgium.') },
          ].map((s) => (
            <div key={s.step} className="relative bg-card border border-border/60 rounded-2xl p-7 shadow-card hover:shadow-card-hover transition-all">
              <div className="absolute top-5 right-6 text-5xl font-display font-bold text-primary/15 select-none">{s.step}</div>
              <div className="w-12 h-12 rounded-xl gradient-primary flex items-center justify-center mb-5 shadow-glow-soft">
                <s.icon className="w-5 h-5 text-white" />
              </div>
              <h3 className="font-display font-semibold text-lg mb-2">{s.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{s.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 6. NEW PRODUCTS */}
      <section className="bg-surface/50" aria-labelledby="new-heading">
        <div className="container py-16">
          <div className="flex items-end justify-between mb-10 gap-4">
            <div>
              <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-1">{t('Net binnen', 'Just in')}</p>
              <h2 id="new-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter">{t('Nieuwe aanwinsten', 'New arrivals')}</h2>
              <p className="text-muted-foreground text-sm mt-2 max-w-lg">{t('Vers binnengekomen lichtingen en uitbreidingen op bestaande lijnen — als eerste in huis.', 'Freshly arrived batches and extensions to existing lines — be the first to have them.')}</p>
            </div>
            <Link to="/shop" search={{ sort: 'newest' } as never} className="text-sm text-primary font-semibold hover:underline flex items-center gap-1 group shrink-0">
              {t('Bekijk alles', 'View all')} <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </Link>
          </div>
          {showNewLoading ? (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
              {Array.from({ length: 8 }).map((_, i) => (
                <div key={i} className={`bg-card rounded-2xl border border-border/50 overflow-hidden shadow-card ${i >= 4 ? 'hidden md:block' : ''}`}>
                  <Skeleton className="aspect-square" />
                  <div className="p-5 space-y-2"><Skeleton className="h-3 w-16" /><Skeleton className="h-4 w-full" /><Skeleton className="h-6 w-20" /></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
              {newProducts.slice(0, 8).map((product, i) => (
                <div key={product.id} className={i >= 4 ? 'hidden md:block' : ''}>
                  <ProductCard product={product} />
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* 7. WHY ALPHA + SEO CONTENT */}
      <section className="container py-20" aria-labelledby="why-heading">
        <div className="grid lg:grid-cols-5 gap-12 items-start">
          <div className="lg:col-span-3 space-y-5">
            <p className="text-primary text-xs font-bold uppercase tracking-[0.24em]">{t('Waarom Peptidewinkel', 'Why Peptidewinkel')}</p>
            <h2 id="why-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter">
              {t('Peptiden waar je écht op kunt bouwen', 'Peptides you can really build on')}
            </h2>
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                {t('Wij zijn opgericht door onderzoekers die het zat waren om bij elke nieuwe leverancier opnieuw zelf de zuiverheid te moeten meten.', 'We were founded by researchers who were tired of having to measure purity themselves again with every new supplier.')} <strong className="text-foreground">Peptidewinkel</strong> {t('draait dat om: alle producten komen van één vaste fabrikant, Alpha BioPharma, en de batches worden getest door het externe lab Janoshik. De rapporten publiceren we met link naar het origineel.', 'turns that around: all products come from one fixed manufacturer, Alpha BioPharma, and the batches are tested by the independent lab Janoshik. We publish the reports with a link to the original.')}
              </p>
              <p>
                {t('Ons assortiment dekt de meest gevraagde categorieën — van herstel- en groeipeptiden (BPC-157, TB-500, Ipamorelin) tot GLP-1 analogen, cosmetische peptiden en peptide-stacks. We streven naar een', 'Our range covers the most requested categories — from healing and growth peptides (BPC-157, TB-500, Ipamorelin) to GLP-1 analogs, cosmetic peptides and peptide stacks. We aim for a')} <strong className="text-foreground">{t('zuiverheid van ≥ 99%', 'purity of ≥ 99%')}</strong>, {t('publiceren de gemeten waarden per batch en koppelen kwaliteit boven prijs.', 'publish the measured values per batch and put quality above price.')}
              </p>
              <p>
                {t('Bestellingen vóór 12:00 verwerken we dezelfde werkdag. We verzenden', 'Orders before 12:00 are processed the same working day. We ship')} <strong className="text-foreground">{t('100% discreet vanuit de EU', '100% discreetly from the EU')}</strong> — {t('geen logo, geen vermelding van de inhoud. Vragen? Onze support antwoordt meestal binnen enkele uren via WhatsApp of Telegram.', 'no logo, no mention of the contents. Questions? Our support usually replies within a few hours via WhatsApp or Telegram.')}
              </p>
            </div>
            <div className="flex flex-wrap gap-3 pt-2">
              <Link to="/over-ons" className="inline-flex items-center gap-2 px-6 py-3 rounded-xl gradient-primary text-white font-semibold text-sm hover:shadow-glow transition-all">
                {t('Lees ons verhaal', 'Read our story')} <ArrowRight className="w-4 h-4" />
              </Link>
              <Link to="/labtesten" className="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-border bg-card text-foreground font-semibold text-sm hover:border-primary/50 transition-all">
                {t('Bekijk labtesten', 'View lab tests')}
              </Link>
            </div>
          </div>

          <div className="lg:col-span-2 grid grid-cols-2 gap-3 sm:gap-4">
            {[
              { icon: FlaskConical, title: t('Extern getest', 'Independently tested'), desc: t('Batches getest door Janoshik; rapporten openbaar en controleerbaar.', 'Batches tested by Janoshik; reports public and verifiable.') },
              { icon: ShieldCheck, title: t('Discreet bezorgd', 'Discreetly delivered'), desc: t('100% anonieme verpakking, getrackt vanuit de EU.', '100% anonymous packaging, tracked from the EU.') },
              { icon: Award, title: t('Eén fabrikant', 'One manufacturer'), desc: t('Alle producten komen van Alpha BioPharma — geen wisselende bronnen.', 'All products come from Alpha BioPharma — no changing sources.') },
              { icon: HeartPulse, title: t('Echte support', 'Real support'), desc: t('Directe lijn met ons team via Telegram en e-mail.', 'Direct line with our team via Telegram and email.') },
            ].map((item) => (
              <div key={item.title} className="bg-card border border-border/50 rounded-2xl p-5 shadow-card hover:shadow-card-hover hover:-translate-y-0.5 transition-all">
                <div className="w-11 h-11 rounded-xl gradient-primary flex items-center justify-center mb-4 shadow-glow-soft">
                  <item.icon className="w-5 h-5 text-white" />
                </div>
                <h3 className="font-display font-semibold text-base mb-1.5">{item.title}</h3>
                <p className="text-xs text-muted-foreground leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 8. SOCIAL PROOF — live reviews */}
      <HomeReviews />

      {/* 9. FAQ */}
      <section className="container py-20" aria-labelledby="faq-heading">
        <div className="grid lg:grid-cols-3 gap-12">
          <div className="lg:col-span-1">
            <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-2">{t('Veelgestelde vragen', 'Frequently asked questions')}</p>
            <h2 id="faq-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter mb-4">{t('Eerst even checken?', 'Check this first?')}</h2>
            <p className="text-muted-foreground text-sm mb-6">{t('De vragen die we het vaakst krijgen. Staat jouw vraag er niet bij? Bel of mail ons — we helpen je graag verder.', 'The questions we get most often. Is your question not listed? Call or email us — we are happy to help.')}</p>
            <Link to="/veelgestelde-vragen" className="inline-flex items-center gap-2 text-primary font-semibold text-sm hover:underline">
              {t("Alle FAQ's", 'All FAQs')} <ChevronRight className="w-4 h-4" />
            </Link>
          </div>
          <div className="lg:col-span-2">
            {FAQS(t).map((f) => <FaqItem key={f.q} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>

      {/* 10. BLOG */}
      <section className="bg-surface/50" aria-labelledby="blog-heading">
        <div className="container py-16">
          <div className="flex items-end justify-between mb-10 gap-4">
            <div>
              <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-1">{t('Blog', 'Blog')}</p>
              <h2 id="blog-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter">{t('Laatste artikelen', 'Latest articles')}</h2>
              <p className="text-muted-foreground text-sm mt-2">{t('Verdiepende stukken over peptiden, opslag en onderzoek. Of bekijk de', 'In-depth pieces on peptides, storage and research. Or check out the')} <Link to="/kennisbank" className="text-primary font-semibold hover:underline">{t(`Kennisbank met ${kbPeptides.length} peptideprofielen`, `Knowledge base with ${kbPeptides.length} peptide profiles`)}</Link>.</p>
            </div>
            <Link to="/blog" className="text-sm text-primary font-semibold hover:underline flex items-center gap-1 group shrink-0">
              {t('Naar de blog', 'To the blog')} <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-5 sm:gap-6">
            {showBlogLoading ? (
              Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-card">
                  <Skeleton className="aspect-video w-full" />
                  <div className="p-6 space-y-2"><Skeleton className="h-3 w-20" /><Skeleton className="h-4 w-full" /><Skeleton className="h-3 w-3/4" /></div>
                </div>
              ))
            ) : blogData?.data && blogData.data.length > 0 ? (
              blogData.data.map((post) => {
                const featuredImg = post._embedded?.['wp:featuredmedia']?.[0]?.source_url;
                const excerpt = post.excerpt.rendered.replace(/<[^>]*>/g, '').trim();
                const date = new Date(post.date).toLocaleDateString(locale(lang), { day: 'numeric', month: 'long', year: 'numeric' });
                return (
                  <Link key={post.id} to="/blog/$slug" params={{ slug: post.slug }} className="group block bg-card rounded-2xl border border-border/50 overflow-hidden shadow-card hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300">
                    {featuredImg ? (
                      <div className="aspect-video overflow-hidden">
                        <img src={featuredImg} alt={t(`Uitgelichte afbeelding: ${post.title.rendered.replace(/<[^>]*>/g, '')}`, `Featured image: ${post.title.rendered.replace(/<[^>]*>/g, '')}`)} width={600} height={400} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" decoding="async" />
                      </div>
                    ) : (
                      <div className="aspect-video bg-surface-alt" />
                    )}
                    <div className="p-6">
                      <p className="text-xs text-muted-foreground mb-2 font-medium">{date}</p>
                      <h3 className="font-bold text-sm mb-2.5 group-hover:text-primary transition-colors leading-snug" dangerouslySetInnerHTML={sanitizedHtml(post.title.rendered)} />
                      <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{excerpt}</p>
                    </div>
                  </Link>
                );
              })
            ) : (
              kbPeptides.slice(0, 3).map((p) => (
                <Link key={p.slug} to="/kennisbank/$slug" params={{ slug: p.slug }} className="group block bg-card rounded-2xl border border-border/50 p-6 shadow-card hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300">
                  <p className="text-xs text-primary font-semibold mb-2 uppercase tracking-wider">{t('Kennisbank', 'Knowledge base')}</p>
                  <h3 className="font-bold text-base mb-2 group-hover:text-primary transition-colors">{p.name}</h3>
                  <p className="text-xs text-muted-foreground">{t('Profiel: werking, onderzoek, bewaren en veelgestelde vragen.', 'Profile: mechanism, research, storage and frequently asked questions.')}</p>
                </Link>
              ))
            )}
          </div>
        </div>
      </section>

      {/* 10b. SEO INTRO — research peptides kopen & peptidebundels */}
      <section className="container py-16" aria-labelledby="seo-heading">
        <div className="grid md:grid-cols-2 gap-10 max-w-6xl">
          <div>
            <h2 id="seo-heading" className="text-display text-3xl md:text-4xl uppercase tracking-tighter mb-4">{t('Research peptides kopen bij Peptidewinkel', 'Buy research peptides at Peptidewinkel')}</h2>
            <p className="text-muted-foreground leading-relaxed mb-3">
              {t('Wil je research peptides kopen met openbare labrapporten? Alle peptiden in onze webshop komen van producent Alpha BioPharma en batches worden getest door het externe lab Janoshik. Per product zie je de gemeten zuiverheid en een link naar het originele rapport.',
                 'Looking to buy research peptides with public lab reports? Every peptide in our shop comes from manufacturer Alpha BioPharma and batches are tested by the external lab Janoshik. Each product shows the measured purity and a link to the original report.')}
            </p>
            <p className="text-muted-foreground leading-relaxed">
              {t('Bekijk het volledige ', 'Browse the full ')}<Link to="/shop" className="text-brand-gold underline underline-offset-4">{t('assortiment research peptides', 'range of research peptides')}</Link>{t(', of controleer eerst de ', ', or check the ')}<Link to="/labtesten" className="text-brand-gold underline underline-offset-4">{t('labtesten', 'lab tests')}</Link>.
            </p>
          </div>
          <div>
            <h2 className="text-display text-3xl md:text-4xl uppercase tracking-tighter mb-4">{t('Peptidebundels & stacks', 'Peptide bundles & stacks')}</h2>
            <p className="text-muted-foreground leading-relaxed mb-3">
              {t('Onderzoek je meerdere peptiden tegelijk? Onze peptidebundels combineren veelgebruikte peptiden in één pakket, tegen een lagere prijs dan los gekocht. Op elke bundelpagina zie je precies welke producten erin zitten.',
                 'Researching several peptides at once? Our peptide bundles combine commonly studied peptides in one package, at a lower price than buying them separately. Every bundle page lists exactly which products are included.')}
            </p>
            <p className="text-muted-foreground leading-relaxed">
              <Link to="/product-category/$slug" params={{ slug: 'stacks-kits' }} className="text-brand-gold underline underline-offset-4">{t('Bekijk alle peptidebundels', 'View all peptide bundles')}</Link>
            </p>
          </div>
        </div>
      </section>

      {/* 11. FINAL CTA / NEWSLETTER */}
      <section className="container py-20">
        <div className="relative overflow-hidden rounded-3xl bg-[#050505] border border-[#936B25]/30 p-10 md:p-16">
          <div className="absolute -top-32 -right-32 w-[400px] h-[400px] bg-[#936B25]/20 rounded-full blur-[120px] pointer-events-none" aria-hidden="true" />
          <div className="absolute -bottom-32 -left-32 w-[300px] h-[300px] bg-[#E5B85F]/10 rounded-full blur-[100px] pointer-events-none" aria-hidden="true" />
          <div className="relative z-10 grid md:grid-cols-2 gap-10 items-center">
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="h-px w-10 bg-[#936B25]" />
                <span className="text-[#E5B85F] uppercase tracking-[0.3em] text-[10px] font-semibold">{t('Klaar om te starten?', 'Ready to start?')}</span>
              </div>
              <h2 className="text-white text-3xl md:text-4xl font-light leading-tight mb-4">
                {t('Vóór 12:00 besteld,', 'Ordered before 12:00,')} <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#FFD777] to-[#936B25]">{t('vandaag verzonden', 'shipped today')}</span>
              </h2>
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[#E5B85F] uppercase tracking-[0.2em] text-[11px] font-bold">✉ {t('Nieuwsbrief', 'Newsletter')}</span>
              </div>
              <p className="text-white font-semibold text-base mb-1">{t('Schrijf je in voor onze nieuwsbrief', 'Sign up for our newsletter')}</p>
              <p className="text-white/60 mb-6 text-sm leading-relaxed">
                {t('Voeg je e-mail toe voor batch-releases, lab-updates en exclusieve kortingen voor abonnees — gemiddeld één mail per maand, nooit spam.', 'Add your email for batch releases, lab updates and exclusive subscriber discounts — on average one email per month, never spam.')}
              </p>
              <NewsletterForm />
            </div>
            <div className="space-y-3">
              <Link to="/shop" className="flex items-center justify-between gap-4 p-5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#FFD777]/40 rounded-sm transition-all group">
                <div>
                  <div className="text-white font-bold text-base mb-0.5">{t('Direct naar de shop', 'Go straight to the shop')}</div>
                  <div className="text-white/50 text-xs">{t('Bekijk het volledige assortiment', 'View the full range')}</div>
                </div>
                <ArrowRight className="w-5 h-5 text-[#E5B85F] group-hover:translate-x-1 transition-transform" />
              </Link>
              <Link to="/labtesten" className="flex items-center justify-between gap-4 p-5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#FFD777]/40 rounded-sm transition-all group">
                <div>
                  <div className="text-white font-bold text-base mb-0.5">{t('Bekijk labrapporten', 'View lab reports')}</div>
                  <div className="text-white/50 text-xs">{t('Janoshik-rapporten per batch, met link naar het origineel', 'Janoshik reports per batch, with a link to the original')}</div>
                </div>
                <ArrowRight className="w-5 h-5 text-[#E5B85F] group-hover:translate-x-1 transition-transform" />
              </Link>
              <Link to="/contact-us" className="flex items-center justify-between gap-4 p-5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#FFD777]/40 rounded-sm transition-all group">
                <div>
                  <div className="text-white font-bold text-base mb-0.5">{t('Vraag advies aan', 'Ask for advice')}</div>
                  <div className="text-white/50 text-xs">{t('Direct contact met ons team', 'Direct contact with our team')}</div>
                </div>
                <ArrowRight className="w-5 h-5 text-[#E5B85F] group-hover:translate-x-1 transition-transform" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function NewsletterForm() {
  const t = useT();
  const subscribe = useServerFn(subscribeNewsletter);
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'done' | 'error'>('idle');
  const [token, setToken] = useState('');

  if (status === 'done') {
    return <p className="text-[#E5B85F] text-sm font-semibold">{t('Bedankt! Je bent aangemeld voor de nieuwsbrief.', "Thanks! You've been signed up for the newsletter.")}</p>;
  }

  return (
    <form
      className="flex flex-col gap-2"
      onSubmit={async (e) => {
        e.preventDefault();
        if (!token) { setStatus('error'); return; }
        setStatus('loading');
        try {
          const res = await subscribe({ data: { email, turnstile_token: token } });
          if (res.ok) { setStatus('done'); return; }
          setStatus('error');
        } catch {
          setStatus('error');
        }
        resetTurnstile();
        setToken('');
      }}
    >
      <div className="flex flex-col sm:flex-row gap-3">
        <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('je@e-mail.nl', 'you@email.com')} aria-label={t('E-mailadres voor de nieuwsbrief', 'Email address for the newsletter')} className="flex-1 px-5 py-3.5 rounded-sm bg-white/5 text-white placeholder:text-white/40 border border-white/15 text-sm focus:ring-2 focus:ring-[#FFD777]/30 focus:border-[#FFD777]/50 outline-none" />
        {/* Same reasoning as the hero button: this band is fixed dark too. */}
        <button type="submit" disabled={status === 'loading'} className="px-7 py-3.5 bg-gradient-to-br from-[#FFD777] to-[#936B25] text-black font-bold uppercase tracking-[0.18em] text-xs hover:brightness-110 transition-all rounded-sm disabled:opacity-60">
          {status === 'loading' ? t('Bezig…', 'Working…') : t('Inschrijven', 'Subscribe')}
        </button>
      </div>
      <Turnstile action="newsletter" onVerify={setToken} />
      {status === 'error' && <p className="text-red-300 text-xs">{token ? t('Aanmelden mislukt. Probeer het later opnieuw.', 'Signup failed. Please try again later.') : t('Bevestig eerst de captcha.', 'Please confirm the captcha first.')}</p>}
    </form>
  );
}