// Home.tsx — VETX Homepage
// Lemonade-inspired: White canvas, hand-drawn pet illustrations flanking hero,
// scroll-triggered reveals, staggered card entrances, handwritten annotations.
// Single vibrant accent (hot pink) on pure white for maximum impact.
import Layout, { StarRating, VerdictStrip, DataCard } from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import { SchemaMarkup, buildOrganizationSchema, buildWebSiteSchema } from "@/components/SchemaMarkup";
import { Link } from "wouter";
import { IMAGES, HP_REFERRAL_URL, carriers, breeds, comparisons } from "@/lib/data";
import { ArrowRight, ExternalLink, Shield, TrendingUp, Heart, CheckCircle, ChevronRight, Sparkles } from "lucide-react";
import { PawPrint, DogSilhouette, CatSilhouette, Bone, Heart as HeartSvg } from "@/components/PetIllustrations";
import { HoverLift, Float, FloatRotate, HandDrawnAnnotation } from "@/components/Animations";
import { TextReveal, ScrollReveal, SlideReveal, CountUp } from "@/components/TextReveal";
import TiltCard from "@/components/TiltCard";
import { StaggerOnScroll, Parallax } from "@/components/ScrollSection";
import DragCarousel from "@/components/DragCarousel";
import ClipReveal from "@/components/ClipReveal";
import OptimizedImage from "@/components/OptimizedImage";
import EmailSignup from "@/components/EmailSignup";
import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect, useRef } from "react";

/* ─── Hero Comparison Widget ─── */
/* Interactive hero comparison widget — visitors pick any two carriers to compare */
function HeroComparisonWidget() {
  const [carrierAIdx, setCarrierAIdx] = useState(0);
  const [carrierBIdx, setCarrierBIdx] = useState(1);
  const [isAutoPlay, setIsAutoPlay] = useState(true);
  const autoPlayRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // Auto-cycle pairs until user interacts
  const presetPairs = [
    [0, 1], [0, 3], [1, 2], [2, 4], [3, 5],
  ];
  const [presetIdx, setPresetIdx] = useState(0);

  useEffect(() => {
    if (!isAutoPlay) return;
    autoPlayRef.current = setInterval(() => {
      setPresetIdx((prev) => {
        const next = (prev + 1) % presetPairs.length;
        setCarrierAIdx(presetPairs[next][0]);
        setCarrierBIdx(presetPairs[next][1]);
        return next;
      });
    }, 4000);
    return () => { if (autoPlayRef.current) clearInterval(autoPlayRef.current); };
  }, [isAutoPlay]);

  const stopAutoPlay = () => {
    setIsAutoPlay(false);
    if (autoPlayRef.current) clearInterval(autoPlayRef.current);
  };

  const carrierA = carriers[carrierAIdx];
  const carrierB = carriers[carrierBIdx];

  const ComparisonRow = ({ label, valA, valB, highlight }: { label: string; valA: string; valB: string; highlight?: "a" | "b" | null }) => (
    <div className="grid grid-cols-[0.8fr_1fr_1fr] gap-1 sm:gap-2 py-2 sm:py-2.5 border-b border-gray-border/30 last:border-0 items-center">
      <span className="text-[10px] sm:text-xs font-sans font-medium text-gray-mid uppercase tracking-wide">{label}</span>
      <span className={`text-xs sm:text-sm font-semibold text-center ${
        highlight === "a" ? "text-indigo" : "text-charcoal"
      }`}>{valA}</span>
      <span className={`text-xs sm:text-sm font-semibold text-center ${
        highlight === "b" ? "text-indigo" : "text-charcoal"
      }`}>{valB}</span>
    </div>
  );

  const CarrierSelect = ({ value, onChange, excludeIdx }: { value: number; onChange: (v: number) => void; excludeIdx: number }) => (
    <select
      value={value}
      onChange={(e) => {
        stopAutoPlay();
        onChange(Number(e.target.value));
      }}
      className="w-full text-xs sm:text-sm font-serif font-bold text-charcoal bg-transparent border-0 border-b-2 border-pink/20 focus:border-pink focus:outline-none text-center py-1 cursor-pointer appearance-none hover:border-pink/50 transition-colors"
    >
      {carriers.map((c, i) => (
        <option key={c.slug} value={i} disabled={i === excludeIdx}>
          {c.shortName}
        </option>
      ))}
    </select>
  );

  return (
    <div className="relative max-w-sm sm:max-w-md mx-auto lg:mx-0">
      {/* Decorative glow */}
      <div className="absolute -inset-4 bg-gradient-to-br from-pink/8 via-pink/4 to-transparent rounded-3xl blur-2xl" />
      <div className="relative liquid-glass rounded-2xl overflow-hidden">
        {/* Header */}
        <div className="bg-gradient-to-r from-charcoal to-charcoal/90 px-3 sm:px-5 py-3 sm:py-3.5 flex items-center justify-between">
          <span className="text-white text-xs font-sans font-semibold uppercase tracking-wider">Quick Compare</span>
          <div className="flex items-center gap-2">
            {isAutoPlay && (
              <span className="text-[10px] text-white/40 font-sans">auto</span>
            )}
            <div className="w-1.5 h-1.5 rounded-full bg-pink animate-pulse" />
          </div>
        </div>

        {/* Interactive carrier selectors */}
        <AnimatePresence mode="wait">
          <motion.div
            key={`${carrierAIdx}-${carrierBIdx}`}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.3 }}
          >
            <div className="grid grid-cols-[0.8fr_1fr_1fr] gap-1 sm:gap-2 px-3 sm:px-5 pt-3 sm:pt-4 pb-2">
              <div className="flex items-end">
                <span className="text-[10px] text-gray-mid/50 font-sans uppercase">Pick any two</span>
              </div>
              <div className="text-center">
                <CarrierSelect value={carrierAIdx} onChange={setCarrierAIdx} excludeIdx={carrierBIdx} />
                <div className="flex items-center justify-center gap-0.5 mt-1">
                  <span className="text-xs font-semibold text-indigo">{carrierA.rating}</span>
                  <span className="text-[10px] text-gray-mid">/5</span>
                </div>
              </div>
              <div className="text-center">
                <CarrierSelect value={carrierBIdx} onChange={setCarrierBIdx} excludeIdx={carrierAIdx} />
                <div className="flex items-center justify-center gap-0.5 mt-1">
                  <span className="text-xs font-semibold text-indigo">{carrierB.rating}</span>
                  <span className="text-[10px] text-gray-mid">/5</span>
                </div>
              </div>
            </div>

            {/* Comparison rows */}
            <div className="px-3 sm:px-5 pb-2">
              <ComparisonRow
                label="Premium"
                valA={carrierA.monthlyPremiumRange}
                valB={carrierB.monthlyPremiumRange}
                highlight={null}
              />
              <ComparisonRow
                label="Coverage"
                valA={carrierA.coverageLimit.includes("Unlimited") ? "Unlimited" : carrierA.coverageLimit.split(" ")[0]}
                valB={carrierB.coverageLimit.includes("Unlimited") ? "Unlimited" : carrierB.coverageLimit.split(" ")[0]}
                highlight={carrierA.coverageLimit.includes("Unlimited") ? "a" : carrierB.coverageLimit.includes("Unlimited") ? "b" : null}
              />
              <ComparisonRow
                label="Wait (Acc.)"
                valA={carrierA.waitingPeriodAccident}
                valB={carrierB.waitingPeriodAccident}
                highlight={parseInt(carrierA.waitingPeriodAccident) < parseInt(carrierB.waitingPeriodAccident) ? "a" : parseInt(carrierB.waitingPeriodAccident) < parseInt(carrierA.waitingPeriodAccident) ? "b" : null}
              />
              <ComparisonRow
                label="Claims"
                valA={carrierA.avgClaimTime}
                valB={carrierB.avgClaimTime}
                highlight={null}
              />
              <ComparisonRow
                label="AM Best"
                valA={carrierA.bbRating.split(" ")[0]}
                valB={carrierB.bbRating.split(" ")[0]}
                highlight={null}
              />
            </div>
          </motion.div>
        </AnimatePresence>

        {/* Footer CTA */}
        <div className="px-3 sm:px-5 py-2.5 sm:py-3 bg-gray-50/80 border-t border-gray-border/30">
          <Link
            href={`/compare/${carrierA.slug}-vs-${carrierB.slug}`}
            className="flex items-center justify-center gap-1.5 text-xs font-semibold text-pink hover:text-pink/80 transition-colors font-sans uppercase tracking-wide"
          >
            See full comparison
            <ArrowRight className="w-3 h-3" />
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function Home() {
  const topCarrier = carriers[0]; // Healthy Paws
  const [breedFilter, setBreedFilter] = useState("all");

  const filteredBreeds = breeds.filter((breed) => {
    switch (breedFilter) {
      case "dog": return breed.type === "dog";
      case "cat": return breed.type === "cat";
      case "high-risk": return breed.healthRiskLevel === "Very High" || breed.healthRiskLevel === "High";
      case "budget": {
        const cost = parseInt(breed.avgInsuranceCost.replace(/[^0-9]/g, ""));
        return cost < 30;
      }
      default: return true;
    }
  }).slice(0, 16);

  return (
    <Layout>
      <SEOHead
        title="Independent Pet Insurance Reviews & Comparisons"
        description="Independent pet insurance reviews by a licensed professional. Expert carrier comparisons, breed guides, and cost tools to find the best coverage."
        keywords="pet insurance reviews, best pet insurance 2026, pet insurance comparison, dog insurance, cat insurance, pet insurance cost"
        canonicalPath="/"
        ogImage={IMAGES.heroMain}
      />
      <SchemaMarkup schema={[buildOrganizationSchema(), buildWebSiteSchema()]} />

      {/* ===== HERO — Split: clarity headline left, mini comparison widget right ===== */}
      <section className="relative overflow-hidden bg-gradient-to-br from-white via-white to-pink/[0.03]">
        <div className="container relative z-10 py-14 lg:py-20">
          <div className="grid lg:grid-cols-2 gap-10 lg:gap-14 items-center">
            {/* Left: Headline & CTA */}
            <div className="order-2 lg:order-1">
              <ScrollReveal y={20}>
                <div className="inline-flex items-center gap-2 bg-indigo/5 text-indigo text-sm font-medium px-4 py-2 rounded-full mb-6 border border-indigo/10">
                  <Shield className="w-4 h-4" />
                  Written by Licensed Insurance Professionals
                </div>
              </ScrollReveal>

              <TextReveal tag="h1" className="text-display text-4xl md:text-5xl lg:text-[3.4rem] xl:text-6xl text-charcoal mb-3 leading-[1.08]" mode="word" entrance entranceDelay={0.3} stagger={0.08}>
                Pet insurance is confusing.
              </TextReveal>
              <TextReveal tag="span" className="block text-display text-4xl md:text-5xl lg:text-[3.4rem] xl:text-6xl mb-5 leading-[1.08] text-pink" mode="word" entrance entranceDelay={0.9} stagger={0.08}>
                We make it clear.
              </TextReveal>

              <ScrollReveal y={30} delay={0.2}>
                <p className="text-lg md:text-xl text-gray-mid leading-relaxed mb-8 max-w-lg">
                  Side-by-side carrier comparisons from a licensed professional. No affiliate bias. No marketing fluff.
                </p>
              </ScrollReveal>

              <ScrollReveal y={30} delay={0.3}>
                <div className="flex flex-col sm:flex-row items-start gap-4">
                  <Link
                    href="/best/best-pet-insurance"
                    className="inline-flex items-center gap-2 font-semibold text-base px-8 py-4 rounded-full transition-all hover:-translate-y-0.5"
                    style={{
                      backgroundColor: "oklch(0.65 0.28 350)",
                      color: "#fff",
                      boxShadow: "0 8px 30px oklch(0.65 0.28 350 / 0.3)",
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = "oklch(0.55 0.30 350)";
                      e.currentTarget.style.boxShadow = "0 12px 40px oklch(0.65 0.28 350 / 0.4)";
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = "oklch(0.65 0.28 350)";
                      e.currentTarget.style.boxShadow = "0 8px 30px oklch(0.65 0.28 350 / 0.3)";
                    }}
                  >
                    SEE OUR 2026 RANKINGS
                    <ArrowRight className="w-4 h-4" />
                  </Link>
                  <a
                    href={HP_REFERRAL_URL}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 text-gray-mid font-medium text-sm hover:text-pink transition-colors py-4"
                  >
                    Get a free quote
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                </div>
              </ScrollReveal>

              {/* Inline social proof stats — scroll-triggered counters */}
              <ScrollReveal y={20} delay={0.4}>
                <div className="mt-10 flex flex-wrap gap-6 lg:gap-8">
                  <div className="flex items-baseline gap-1.5">
                    <CountUp end={12} className="text-2xl font-serif font-bold text-charcoal" />
                    <span className="text-xs font-sans font-medium uppercase tracking-wider text-gray-mid">Carriers Reviewed</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <CountUp end={50} className="text-2xl font-serif font-bold text-charcoal" />
                    <span className="text-xs font-sans font-medium uppercase tracking-wider text-gray-mid">Breed Guides</span>
                  </div>
                  <div className="flex items-baseline gap-1.5">
                    <CountUp end={50} className="text-2xl font-serif font-bold text-charcoal" />
                    <span className="text-xs font-sans font-medium uppercase tracking-wider text-gray-mid">State Guides</span>
                  </div>
                </div>
              </ScrollReveal>
            </div>

            {/* Right: Mini Carrier Comparison Widget */}
            <div className="order-1 lg:order-2">
              <ScrollReveal y={40} delay={0.1}>
                <HeroComparisonWidget />
              </ScrollReveal>
            </div>
          </div>
        </div>
      </section>

      {/* ===== HOW IT WORKS — Compact 4-column process strip ===== */}
      <section className="bg-charcoal text-white py-14 lg:py-16 relative overflow-hidden">
        {/* Subtle paw watermark */}
        <div className="absolute inset-0 opacity-[0.015] pointer-events-none hidden md:flex flex-wrap gap-12 p-8">
          {Array.from({ length: 8 }).map((_, i) => (
            <PawPrint key={i} size={40} />
          ))}
        </div>
        <div className="container relative z-10">
          <ScrollReveal y={20}>
            <p className="text-sm font-medium text-pink uppercase tracking-wider mb-2 font-sans text-center">Our Process</p>
            <h2 className="text-3xl md:text-4xl text-center font-serif mb-10">How we review carriers</h2>
          </ScrollReveal>
          <StaggerOnScroll className="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" stagger={0.1} y={30}>
            {[
              { step: "01", title: "Read the fine print", desc: "Every policy document, exclusion list, and waiting period — analyzed line by line.", icon: "📋" },
              { step: "02", title: "Analyze the financials", desc: "AM Best ratings, loss ratios, claims processing times, and underwriter stability.", icon: "📊" },
              { step: "03", title: "Compare apples to apples", desc: "Standardized coverage scenarios across all 12 carriers — real differences, not cherry-picked stats.", icon: "⚖️" },
              { step: "04", title: "Publish honest verdicts", desc: "No carrier pays for placement. Rankings based on coverage quality and financial strength.", icon: "✍️" },
            ].map((item) => (
              <div key={item.step} className="text-center lg:text-left">
                <span className="text-4xl mb-4 block">{item.icon}</span>
                <p className="text-indigo font-mono text-xs tracking-widest mb-2">STEP {item.step}</p>
                <h3 className="text-lg font-serif mb-2 leading-snug">{item.title}</h3>
                <p className="text-sm text-white/50 leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </StaggerOnScroll>
        </div>
      </section>

      {/* ===== SOCIAL PROOF — Testimonials from real pet owners ===== */}
      <section className="py-12 lg:py-14 bg-white">
        <div className="container">
          <ScrollReveal y={20}>
            <p className="text-sm font-medium text-pink uppercase tracking-wider mb-2 font-sans text-center">What Pet Owners Say</p>
            <h2 className="text-2xl md:text-3xl text-display text-charcoal text-center mb-10">Real feedback from our readers</h2>
          </ScrollReveal>

          <StaggerOnScroll className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto" stagger={0.1} y={30}>
            {[
              {
                quote: "I was about to sign up for Lemonade because of the low price, but VETX's comparison showed me the annual cap would have left me exposed. Switched to Healthy Paws and it paid for itself when my Lab needed a $6,000 surgery.",
                name: "Sarah M.",
                detail: "Golden Retriever owner, California",
                savings: "Saved $4,200 on surgery claim",
              },
              {
                quote: "As a first-time dog owner, I had no idea what to look for in pet insurance. The breed guide for French Bulldogs was exactly what I needed — it flagged health risks I didn't even know about and helped me pick the right coverage level.",
                name: "James T.",
                detail: "French Bulldog owner, Texas",
                savings: "Found breed-specific coverage",
              },
              {
                quote: "I've been in insurance for 20 years and I'm impressed by the depth of analysis here. Most review sites just regurgitate marketing copy. VETX actually reads the policy documents and explains the fine print.",
                name: "Linda K.",
                detail: "Insurance professional, New York",
                savings: "Industry peer endorsement",
              },
            ].map((testimonial) => (
              <div key={testimonial.name} className="bg-gray-light rounded-2xl p-6 relative">
                <svg className="w-8 h-8 text-pink/15 mb-3" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                </svg>
                <p className="text-sm text-charcoal/80 leading-relaxed mb-4">{testimonial.quote}</p>
                <div className="border-t border-gray-border/50 pt-3">
                  <p className="text-sm font-semibold text-charcoal">{testimonial.name}</p>
                  <p className="text-xs text-gray-mid">{testimonial.detail}</p>
                  <p className="text-xs text-pink font-medium mt-1">{testimonial.savings}</p>
                </div>
              </div>
            ))}
          </StaggerOnScroll>
        </div>
      </section>

      {/* ===== TOP PICK — Card with hover lift ===== */}
      <section className="container py-14 lg:py-18">
        <ScrollReveal y={30}>
          <div className="text-center mb-8">
            <p className="text-sm font-medium text-pink uppercase tracking-wider mb-2 font-sans">Our Top Pick for 2026</p>
            <TextReveal tag="h2" className="text-3xl md:text-4xl text-display" mode="word" scrub={false} stagger={0.04}>
              The best pet insurance, according to the data
            </TextReveal>
          </div>
        </ScrollReveal>

        <ScrollReveal y={40} delay={0.15}>
          <TiltCard tiltMax={4} spotlightOpacity={0.06} className="max-w-4xl mx-auto">
            <div className="bg-white border border-gray-border rounded-2xl overflow-hidden shadow-sm">
              <VerdictStrip>{topCarrier.verdict}</VerdictStrip>
              <div className="p-8 lg:p-10">
                <div className="flex flex-col md:flex-row items-start justify-between mb-8 gap-4">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <span className="inline-flex items-center gap-1 bg-indigo/10 text-indigo text-xs font-semibold px-3 py-1 rounded-full font-sans">
                        <Sparkles className="w-3 h-3" /> Best Overall
                      </span>
                    </div>
                    <h3 className="text-3xl font-serif">{topCarrier.name}</h3>
                    <p className="text-sm text-gray-mid mt-1">Underwritten by {topCarrier.underwriter}</p>
                  </div>
                  <div className="text-right">
                    <StarRating rating={topCarrier.rating} />
                    <p className="text-sm font-semibold mt-1">{topCarrier.rating}/5 — {topCarrier.ratingLabel}</p>
                  </div>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                  <DataCard label="Coverage Limit" value="Unlimited" />
                  <DataCard label="Monthly Premium" value={topCarrier.monthlyPremiumRange} />
                  <DataCard label="Reimbursement" value={topCarrier.reimbursementOptions} />
                  <DataCard label="AM Best Rating" value={topCarrier.bbRating} />
                </div>

                <div className="grid md:grid-cols-2 gap-8 mb-8">
                  <div>
                    <h4 className="text-sm font-semibold font-sans mb-3 text-success">Pros</h4>
                    <ul className="space-y-2">
                      {topCarrier.pros.slice(0, 3).map((p, i) => (
                        <li key={i} className="flex items-start gap-2 text-sm text-gray-mid">
                          <CheckCircle className="w-4 h-4 text-success shrink-0 mt-0.5" />
                          {p}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold font-sans mb-3 text-pink">Cons</h4>
                    <ul className="space-y-2">
                      {topCarrier.cons.slice(0, 3).map((c, i) => (
                        <li key={i} className="flex items-start gap-2 text-sm text-gray-mid">
                          <span className="w-4 h-4 shrink-0 mt-0.5 text-center text-pink">—</span>
                          {c}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div className="flex flex-wrap gap-4">
                  <Link
                    href={`/reviews/${topCarrier.slug}`}
                    className="inline-flex items-center gap-2 bg-foreground text-white font-medium text-sm px-6 py-3 rounded-full hover:bg-foreground/80 transition-colors"
                  >
                    Read Full Review
                    <ArrowRight className="w-3.5 h-3.5" />
                  </Link>
                  <a
                    href={HP_REFERRAL_URL}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 font-semibold text-sm px-6 py-3 rounded-full transition-colors"
                    style={{
                      backgroundColor: "oklch(0.65 0.28 350)",
                      color: "#fff",
                      boxShadow: "0 4px 16px oklch(0.65 0.28 350 / 0.25)",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = "oklch(0.55 0.30 350)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "oklch(0.65 0.28 350)"; }}
                  >
                    Get a Free Quote
                    <ExternalLink className="w-3.5 h-3.5" />
                  </a>
                </div>
              </div>
            </div>
          </TiltCard>
        </ScrollReveal>

        {/* Handwritten annotation */}
        <ScrollReveal y={10} delay={0.3}>
          <div className="flex justify-center mt-6">
            <HandDrawnAnnotation text="Backed by Chubb — A+ financial strength" direction="up" />
          </div>
        </ScrollReveal>
      </section>

      {/* ===== QUICK COMPARISONS — Grid with hover lifts ===== */}
      <section className="section-gray py-14 lg:py-18 relative overflow-hidden noise-overlay">
        <FloatRotate className="absolute top-12 right-[5%] text-charcoal/5 pointer-events-none hidden lg:block" duration={8}>
          <CatSilhouette size={100} />
        </FloatRotate>

        <div className="container relative z-10">
          <ClipReveal mode="inset-up" duration={1}>
            <div className="text-center mb-8">
              <p className="text-sm font-medium text-pink uppercase tracking-wider mb-2 font-sans">Side by Side</p>
              <TextReveal tag="h2" className="text-3xl md:text-4xl text-display text-charcoal" mode="word" scrub={false} stagger={0.04}>
                Compare carriers head-to-head
              </TextReveal>
            </div>
          </ClipReveal>

          <StaggerOnScroll className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto" stagger={0.08} y={40}>
            {comparisons.slice(0, 6).map((comp) => {
              const c1 = carriers.find(c => c.slug === comp.carrier1Slug);
              const c2 = carriers.find(c => c.slug === comp.carrier2Slug);
              return (
                <div key={comp.slug}>
                  <TiltCard tiltMax={6} spotlightOpacity={0.05}>
                    <Link href={`/compare/${comp.slug}`} className="block bg-white border border-gray-border rounded-2xl p-6 h-full group">
                      <p className="text-xs text-gray-mid font-sans mb-2">{comp.subtitle}</p>
                      <h3 className="text-lg font-serif mb-4 group-hover:text-pink transition-colors text-charcoal">{comp.title}</h3>
                      <div className="flex items-center justify-between text-sm">
                        <div className="text-center">
                          <p className="font-semibold text-lg text-charcoal">{c1?.rating}/5</p>
                          <p className="text-xs text-gray-mid">{c1?.shortName}</p>
                        </div>
                        <span className="text-pink/30 font-serif text-2xl">vs</span>
                        <div className="text-center">
                          <p className="font-semibold text-lg text-charcoal">{c2?.rating}/5</p>
                          <p className="text-xs text-gray-mid">{c2?.shortName}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-1 mt-5 text-xs text-pink font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                        Read comparison <ChevronRight className="w-3 h-3" />
                      </div>
                    </Link>
                  </TiltCard>
                </div>
              );
            })}
          </StaggerOnScroll>

          <ScrollReveal y={20} delay={0.2}>
            <div className="text-center mt-10">
              <Link href="/compare" className="inline-flex items-center gap-2 text-sm text-pink font-medium hover:underline">
                View all {comparisons.length} comparisons <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </ScrollReveal>
        </div>
      </section>


      {/* ===== BREED GUIDES — Horizontal scroll carousel like Lemonade's stories ===== */}
      <section className="py-14 lg:py-18 relative overflow-hidden bg-white">
        <FloatRotate className="absolute top-16 left-[3%] text-charcoal/5 pointer-events-none hidden lg:block" duration={6}>
          <DogSilhouette size={90} />
        </FloatRotate>

        <div className="container">
          <ScrollReveal y={30}>
            <div className="flex items-end justify-between mb-8">
              <div>
                <p className="text-sm font-medium text-pink uppercase tracking-wider mb-3 font-sans">By Breed</p>
                <TextReveal tag="h2" className="text-3xl md:text-4xl text-display text-charcoal" mode="word" scrub={false} stagger={0.04}>
                  Insurance guides for your specific breed
                </TextReveal>
              </div>
              <Link href="/breeds" className="text-sm text-pink font-medium flex items-center gap-1 hover:underline shrink-0 hidden md:flex">
                View all breeds <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </ScrollReveal>

          <ScrollReveal y={20} delay={0.1}>
            <p className="text-gray-mid mb-6 max-w-2xl text-lg">
              Every breed has unique health risks that affect insurance costs. Our breed-specific guides help you understand exactly what to look for.
            </p>
          </ScrollReveal>

          {/* Quick filter pills */}
          <ScrollReveal y={15} delay={0.12}>
            <div className="flex flex-wrap gap-2 mb-8">
              {[
                { key: "all", label: "All Breeds" },
                { key: "dog", label: "Dogs" },
                { key: "cat", label: "Cats" },
                { key: "high-risk", label: "High Risk" },
                { key: "budget", label: "Budget-Friendly" },
              ].map((filter) => (
                <button
                  key={filter.key}
                  onClick={() => setBreedFilter(filter.key)}
                  className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-300 ${
                    breedFilter === filter.key
                      ? "bg-pink text-white shadow-md shadow-pink/25"
                      : "bg-gray-100 text-gray-500 hover:bg-gray-200 hover:text-charcoal"
                  }`}
                >
                  {filter.label}
                </button>
              ))}
            </div>
          </ScrollReveal>
        </div>

        {/* Horizontal drag-to-scroll carousel */}
        <ScrollReveal y={30} delay={0.15}>
          <div className="px-4 lg:px-[max(2rem,calc((100vw-1280px)/2+2rem))]">
            <DragCarousel gap={20} key={breedFilter}>
              {filteredBreeds.map((breed) => (
                <Link key={breed.slug} href={`/breeds/${breed.slug}`} className="group shrink-0 w-[220px]">
                  <div className="bg-white border border-gray-border rounded-2xl overflow-hidden hover:shadow-lg hover:border-pink/30 transition-all duration-300">
                    <div className="aspect-[4/3] overflow-hidden">
                      <OptimizedImage
                        src={breed.image}
                        alt={breed.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        sizes="220px"
                        draggable={false}
                      />
                    </div>
                    <div className="p-4">
                      <p className="text-sm font-semibold group-hover:text-pink transition-colors text-charcoal">{breed.name}</p>
                      <div className="flex items-center justify-between mt-2">
                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
                          breed.healthRiskLevel === "Very High" ? "bg-red-50 text-red-500" :
                          breed.healthRiskLevel === "High" ? "bg-orange-50 text-orange-500" :
                          "bg-green-50 text-green-500"
                        }`}>
                          {breed.healthRiskLevel}
                        </span>
                        <span className="text-xs text-gray-mid">{breed.avgInsuranceCost}</span>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </DragCarousel>
          </div>
        </ScrollReveal>

        <div className="container mt-6 md:hidden">
          <Link href="/breeds" className="text-sm text-pink font-medium flex items-center gap-1 hover:underline">
            View all breeds <ArrowRight className="w-3.5 h-3.5" />
          </Link>
        </div>
      </section>

      {/* ===== TOOLS SECTION — Interactive tools promo ===== */}
      <section className="section-gray py-14 lg:py-18 noise-overlay">
        <div className="container">
          <ScrollReveal y={30}>
            <div className="text-center mb-10">
              <p className="text-sm font-medium text-pink uppercase tracking-wider mb-2 font-sans">Free Tools</p>
              <TextReveal tag="h2" className="text-3xl md:text-4xl text-display text-charcoal" mode="word" scrub={false} stagger={0.04}>
                Interactive tools to help you decide
              </TextReveal>
            </div>
          </ScrollReveal>

          <StaggerOnScroll className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto" stagger={0.1} y={40}>
            {/* Large featured tile — Cost Calculator */}
            <div className="md:row-span-2">
              <TiltCard tiltMax={8} spotlightOpacity={0.06} className="h-full">
                <Link href="/calculator" className="block liquid-glass-pink rounded-2xl p-8 h-full group relative overflow-hidden">
                  <div className="absolute top-4 right-4 w-20 h-20 bg-pink/5 rounded-full blur-2xl" />
                  <span className="text-5xl mb-6 block">🧮</span>
                  <h3 className="text-2xl font-serif mb-3 group-hover:text-pink transition-colors text-charcoal">Cost Calculator</h3>
                  <p className="text-sm text-gray-mid leading-relaxed mb-6">Get a personalized monthly estimate based on your pet's breed, age, and location. Our most popular tool.</p>
                  <div className="flex items-center gap-1 text-sm text-pink font-medium">
                    Try it free <ArrowRight className="w-3.5 h-3.5" />
                  </div>
                </Link>
              </TiltCard>
            </div>
            {/* Smaller tile — Claims Calculator */}
            <div>
              <TiltCard tiltMax={8} spotlightOpacity={0.06} className="h-full">
                <Link href="/claims-calculator" className="block liquid-glass rounded-2xl p-6 h-full group">
                  <div className="flex items-start gap-4">
                    <span className="text-3xl shrink-0">💰</span>
                    <div>
                      <h3 className="text-lg font-serif mb-2 group-hover:text-pink transition-colors text-charcoal">Claims Calculator</h3>
                      <p className="text-sm text-gray-mid leading-relaxed">See exactly how much insurance would reimburse for common vet bills.</p>
                      <div className="flex items-center gap-1 mt-3 text-xs text-pink font-medium">
                        Try it free <ArrowRight className="w-3 h-3" />
                      </div>
                    </div>
                  </div>
                </Link>
              </TiltCard>
            </div>
            {/* Smaller tile — Find Your Match */}
            <div>
              <TiltCard tiltMax={8} spotlightOpacity={0.06} className="h-full">
                <Link href="/quiz" className="block liquid-glass rounded-2xl p-6 h-full group">
                  <div className="flex items-start gap-4">
                    <span className="text-3xl shrink-0">🎯</span>
                    <div>
                      <h3 className="text-lg font-serif mb-2 group-hover:text-pink transition-colors text-charcoal">Find Your Match</h3>
                      <p className="text-sm text-gray-mid leading-relaxed">Answer 5 questions and we'll recommend the best carrier for your priorities.</p>
                      <div className="flex items-center gap-1 mt-3 text-xs text-pink font-medium">
                        Try it free <ArrowRight className="w-3 h-3" />
                      </div>
                    </div>
                  </div>
                </Link>
              </TiltCard>
            </div>
          </StaggerOnScroll>
        </div>
      </section>

      {/* ===== WHY TRUST US — Clean, white, with floating illustrations ===== */}
      <section className="py-14 lg:py-18 relative overflow-hidden bg-white">
        <FloatRotate className="absolute bottom-20 right-[5%] text-pink/8 pointer-events-none hidden lg:block" duration={7}>
          <PawPrint size={50} />
        </FloatRotate>

        <div className="container">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <SlideReveal direction="left">
              <div>
                <p className="text-sm font-medium text-pink uppercase tracking-wider mb-3 font-sans">Why Trust VETX</p>
                <h2 className="text-3xl md:text-4xl text-display text-charcoal mb-5">Insurance expertise,<br />not marketing copy</h2>
                <p className="text-gray-mid leading-relaxed mb-8 text-lg">
                  Most pet insurance review sites are built by content marketers. VETX is different — our reviews are written by a licensed insurance professional who holds AAI, PRC, SBCS, and CCIC designations.
                </p>
                <div className="space-y-6">
                  {[
                    { icon: Shield, title: "Licensed & Credentialed", desc: "AAI, PRC, SBCS, CCIC professional designations", color: "text-indigo" },
                    { icon: TrendingUp, title: "Data-Driven Analysis", desc: "We analyze AM Best ratings, claims ratios, and financial statements", color: "text-indigo" },
                    { icon: Heart, title: "Pet Owner First", desc: "Our recommendations prioritize your pet's coverage needs", color: "text-indigo" },
                  ].map((item) => (
                    <div key={item.title} className="flex items-start gap-4">
                      <div className="w-12 h-12 rounded-2xl bg-gray-light flex items-center justify-center shrink-0">
                        <item.icon className={`w-5 h-5 ${item.color}`} />
                      </div>
                      <div>
                        <p className="font-semibold text-charcoal">{item.title}</p>
                        <p className="text-sm text-gray-mid mt-0.5">{item.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </SlideReveal>

            <SlideReveal direction="right" delay={0.2}>
              <Parallax speed={0.3} className="relative hidden lg:block">
                <img
                  src={IMAGES.heroFamily}
                  alt="Family with their pet"
                  loading="lazy"
                  decoding="async"
                  className="rounded-3xl shadow-xl w-full h-[450px] object-cover"
                />
                {/* Floating stat cards */}
                <Float duration={4} distance={8}>
                  <div className="absolute -top-6 -right-6 liquid-glass rounded-2xl p-4">
                    <p className="text-xs text-gray-mid font-sans">Professional Designations</p>
                    <p className="text-2xl font-serif text-indigo mt-1">4</p>
                  </div>
                </Float>
                <Float duration={5} distance={10} delay={1}>
                  <div className="absolute -bottom-4 -left-4 liquid-glass rounded-2xl p-4">
                    <p className="text-xs text-gray-mid font-sans">Carriers Analyzed</p>
                    <p className="text-2xl font-serif text-indigo mt-1">9</p>
                  </div>
                </Float>
              </Parallax>
            </SlideReveal>
          </div>
        </div>
      </section>

      {/* ===== BOTTOM CTA + EMAIL SIGNUP — Combined final section ===== */}
      <section className="py-14 lg:py-18 bg-charcoal text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-[0.015] pointer-events-none hidden md:flex flex-wrap gap-12 p-8">
          {Array.from({ length: 6 }).map((_, i) => (
            <PawPrint key={i} size={40} />
          ))}
        </div>
        <div className="container relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <ScrollReveal y={30}>
              <TextReveal tag="h2" className="text-3xl md:text-4xl font-serif mb-4 text-white" mode="word" scrub={false} stagger={0.05}>
                Ready to protect your pet?
              </TextReveal>
              <p className="text-white/60 mb-8 max-w-lg mx-auto">
                Our #1 rated carrier offers unlimited coverage with no payout caps, backed by Chubb's A+ financial strength.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
                <a
                  href={HP_REFERRAL_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 font-semibold text-base px-10 py-4 rounded-full transition-all hover:-translate-y-0.5"
                  style={{
                    backgroundColor: "oklch(0.65 0.28 350)",
                    color: "#fff",
                    boxShadow: "0 8px 30px oklch(0.65 0.28 350 / 0.3)",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.backgroundColor = "oklch(0.55 0.30 350)";
                    e.currentTarget.style.boxShadow = "0 12px 40px oklch(0.65 0.28 350 / 0.4)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.backgroundColor = "oklch(0.65 0.28 350)";
                    e.currentTarget.style.boxShadow = "0 8px 30px oklch(0.65 0.28 350 / 0.3)";
                  }}
                >
                  GET YOUR FREE QUOTE
                  <ExternalLink className="w-4 h-4" />
                </a>
                <Link
                  href="/best/best-pet-insurance"
                  className="inline-flex items-center gap-2 text-white/70 font-medium text-sm hover:text-white transition-colors py-4"
                >
                  See our 2026 rankings
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>
            </ScrollReveal>

            {/* Inline email signup */}
            <ScrollReveal y={20} delay={0.2}>
              <div className="border-t border-white/10 pt-8">
                <p className="text-sm text-white/50 mb-4">Get our latest analysis delivered to your inbox</p>
                <EmailSignup />
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>
    </Layout>
  );
}