// CARRGO — Homepage
// Design: Dark Premium Industrial | All 10 sections | Live transit widget | Full SEO content

import { useEffect, useRef, useState } from "react";
import { GoogleNewsPopup } from "@/components/GoogleNewsPopup";
import { Link } from "wouter";
import { QuoteForm, TrustBar, FAQSection, CTABanner } from "@/components/Layout";
import { TransitWidget } from "@/components/TransitWidget";
import { useSEO } from "@/hooks/useSEO";
import { PageBreadcrumbs } from "@/components/PageBreadcrumbs";
import { RelatedPages } from "@/components/RelatedPages";

const HERO_IMAGE = "https://d2xsxph8kpxj0f.cloudfront.net/310519663609094431/DgHpSbfg3HvC5CV8K6pPqT/carrgo-hero-Ae6RFaGdadBGAWedSopWe7.webp";
// Preload hero image in head
if (typeof window !== "undefined" && typeof document !== "undefined") {
  const preloadLink = document.createElement("link");
  preloadLink.rel = "preload";
  preloadLink.as = "image";
  preloadLink.href = HERO_IMAGE;
  document.head.appendChild(preloadLink);
}
const WAREHOUSE_IMAGE = "https://d2xsxph8kpxj0f.cloudfront.net/310519663609094431/DgHpSbfg3HvC5CV8K6pPqT/carrgo-warehouse-8YLktk3GBAKGNm2ZQH8XCD.webp";
const CUSTOMS_IMAGE = "https://d2xsxph8kpxj0f.cloudfront.net/310519663609094431/DgHpSbfg3HvC5CV8K6pPqT/carrgo-customs-L5eWJwR8L2QWLkY5U3N2L4.webp";

function useScrollReveal() {
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
          }
        });
      },
      { threshold: 0.1 }
    );
    document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);
}

const services = [
  { icon: "🚢", title: "Sea Freight", stat: "FCL & LCL", desc: "Cost-effective global shipping solutions with 10-35 day transit times.", href: "/services/sea-freight" },
  { icon: "✈️", title: "Air Freight", stat: "1-5 Days", desc: "Door-to-door air freight from the UK to 180+ countries with full tracking.", href: "/services/air-freight" },
  { icon: "🚛", title: "Road Freight", stat: "1-3 Days", desc: "Full and groupage road freight across Europe to the UK.", href: "/services/road-freight" },
  { icon: "🚂", title: "Rail Freight", stat: "14-20 Days", desc: "China–UK rail freight via the New Silk Road with competitive pricing.", href: "/services/rail-freight" },
  { icon: "🛃", title: "Customs Clearance", stat: "100% Compliant", desc: "HMRC-authorised agents handling all UK import and export declarations.", href: "/services/customs-clearance" },
  { icon: "📦", title: "Door-to-Door", stat: "Full Coverage", desc: "Complete door-to-door logistics from factory to your warehouse.", href: "/services/door-to-door" },
  { icon: "🛒", title: "Amazon FBA", stat: "FBA Ready", desc: "FBA-compliant logistics for UK and EU Amazon sellers.", href: "/services/amazon-fba" },
  { icon: "🏭", title: "Warehousing", stat: "UK Based", desc: "UK warehousing, storage, and container devanning services.", href: "/services/warehousing" },
];

const routes = [
  { flag: "🇨🇳", country: "China", route: "China → UK", transit: "14–35 days", href: "/routes/china-to-uk" },
  { flag: "🇩🇪", country: "Germany", route: "Germany → UK", transit: "2–4 days", href: "/routes/germany-to-uk" },
  { flag: "🇳🇱", country: "Netherlands", route: "Netherlands → UK", transit: "1–3 days", href: "/routes/netherlands-to-uk" },
  { flag: "🇮🇳", country: "India", route: "India → UK", transit: "20–28 days", href: "/routes/india-to-uk" },
  { flag: "🇺🇸", country: "USA", route: "USA → UK", transit: "10–30 days", href: "/routes/usa-to-uk" },
  { flag: "🇹🇷", country: "Turkey", route: "Turkey → UK", transit: "14–20 days", href: "/routes/turkey-to-uk" },
  { flag: "🇦🇪", country: "UAE", route: "UAE → UK", transit: "18–24 days", href: "/routes/uae-to-uk" },
  { flag: "🇪🇸", country: "Spain", route: "Spain → UK", transit: "4–9 days", href: "/routes/spain-to-uk" },
];

const industries = [
  { icon: "🪑", title: "Furniture Import", href: "/industries/furniture" },
  { icon: "🛒", title: "Ecommerce & Retail", href: "/industries/ecommerce" },
  { icon: "🚗", title: "Automotive", href: "/industries/automotive" },
  { icon: "🏗️", title: "Construction Materials", href: "/industries/construction" },
  { icon: "📦", title: "Wholesale Distribution", href: "/industries/wholesale" },
  { icon: "🗞️", title: "Packaging & Paper", href: "/industries/packaging" },
];

const stats = [
  { value: "500+", label: "UK Importers Served" },
  { value: "50+", label: "Global Trade Routes" },
  { value: "98%", label: "On-Time Delivery Rate" },
  { value: "2hr", label: "Average Quote Response" },
];

const testimonials = [
  {
    quote: "Carrgo reduced our China shipment delays by 40%. Their customs team is exceptional — no more surprise holds at Felixstowe.",
    name: "James Whitfield",
    role: "Procurement Director",
    company: "Meridian Wholesale Ltd",
  },
  {
    quote: "We switched from our previous forwarder after one call with Carrgo. The transparency, the speed, the communication — it's a different level.",
    name: "Sarah Okonkwo",
    role: "Supply Chain Manager",
    company: "Brightline Retail Group",
  },
  {
    quote: "Our FBA shipments from Guangzhou now arrive on schedule every time. Carrgo handles everything — booking, customs, delivery to Amazon.",
    name: "Marcus Chen",
    role: "Operations Manager",
    company: "TechSource UK",
  },
];

const homeFaqs = [
  {
    q: "How much does sea freight from China to the UK cost?",
    a: "Sea freight costs from China to the UK vary depending on container size, route, and current market rates. A 20ft FCL container typically ranges from £1,200–£2,800 depending on origin port and destination. LCL (groupage) is priced per CBM. Contact Carrgo for a precise quote based on your specific cargo.",
  },
  {
    q: "How long does sea freight from China to the UK take?",
    a: "Standard sea freight from China to the UK takes 28–35 days depending on the origin port (Shanghai, Shenzhen, Ningbo, etc.) and UK destination port (Felixstowe, Southampton, London Gateway). Rail freight via the New Silk Road takes 14–20 days. Air freight takes 3–5 days.",
  },
  {
    q: "Do you handle UK customs clearance?",
    a: "Yes. Carrgo provides full UK customs clearance as part of our door-to-door service. Our customs team handles all documentation, duty calculations, HMRC submissions, and port release. We ensure your goods clear UK customs without delays or unexpected charges.",
  },
  {
    q: "What is the difference between FCL and LCL shipping?",
    a: "FCL (Full Container Load) means you fill an entire container — typically a 20ft or 40ft box. It's more cost-effective for larger volumes and offers faster transit. LCL (Less than Container Load) means your cargo shares a container with other shippers — ideal for smaller shipments. Carrgo offers both options with competitive rates.",
  },
  {
    q: "Can you ship to Amazon FBA warehouses in the UK?",
    a: "Yes. Carrgo specialises in Amazon FBA logistics, handling everything from factory collection in China or Europe to delivery at Amazon's UK fulfilment centres. We ensure FBA compliance including labelling, pallet requirements, and booking slots.",
  },
  {
    q: "How do I get a freight quote from Carrgo?",
    a: "You can request a quote via our online form (response within 2 hours), WhatsApp us directly for an instant conversation, or call our UK team. We'll need your origin, destination, cargo type, dimensions/weight, and preferred shipping mode.",
  },
  {
    q: "What happens if my goods are delayed at customs?",
    a: "Carrgo's customs team monitors every shipment proactively. If a delay occurs, we contact HMRC on your behalf, resolve documentation issues, and keep you updated in real time. Our customs clearance success rate is over 99% on first submission.",
  },
  {
    q: "Do you offer warehousing in the UK?",
    a: "Yes. Carrgo offers UK warehousing and storage services including container devanning, palletising, labelling, and onward distribution. Our UK warehouse facilities are strategically located near major ports for fast turnaround.",
  },
];

export default function Home() {
  const [showGNewsPopup, setShowGNewsPopup] = useState(false);
  useSEO({
    title: "UK Freight Forwarding | Sea, Air & Road Shipping - Carrgo",
    description: "UK freight forwarding for imports, exports & customs. Sea, air & road shipping from China, Germany & USA. Get a quote today.",
    keywords: "freight forwarding uk, sea freight uk, customs clearance uk, freight forwarder uk, import freight uk, door to door freight uk, air freight uk, road freight uk, premium freight forwarding, UK logistics",
    schema: {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Carrgo",
      "description": "Premium UK freight forwarding company specialising in sea freight, air freight, customs clearance, and door-to-door logistics for UK importers.",
      "url": "https://www.carrgo.co.uk",
      "address": { "@type": "PostalAddress", "addressCountry": "GB" },
      "priceRange": "££",
      "openingHours": "Mo-Fr 08:00-18:00"
    }
  });

  // FAQ Schema
  const faqSchema = "<script type=\"application/ld+json\">\n{\n  \"@context\":\"https://schema.org\",\n  \"@type\":\"FAQPage\",\n  \"mainEntity\":[\n    {\"@type\":\"Question\",\"name\":\"How quickly can Carrgo provide a freight quote?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Carrgo reviews most freight quote requests within the same business day.\"}},\n    {\"@type\":\"Question\",\"name\":\"Can Carrgo arrange customs clearance?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Carrgo supports import and export customs processes, documentation checks, and release coordination.\"}},\n    {\"@type\":\"Question\",\"name\":\"Does Carrgo support China to UK shipping?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Carrgo supports sea freight, air freight, and customs coordination for China to UK shipments.\"}}\n  ]\n}\n</script>";
  useScrollReveal();

  return (
    <div className="min-h-screen bg-white">
      <PageBreadcrumbs items={[
    { label: 'Home', href: '/' }
  ]} />

      
      

      {/* ── HERO ──────────────────────────────────────────────────────────── */}
      <section
        className="relative flex items-center py-16 lg:py-20"
        style={{
          backgroundImage: `linear-gradient(to right, rgba(11,31,58,0.97) 0%, rgba(11,31,58,0.75) 55%, rgba(11,31,58,0.4) 100%), url(${HERO_IMAGE})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundAttachment: "fixed",
          willChange: "background-position",
        }}
      >
        {/* Preload hero image for LCP optimization */}
        <link rel="preload" as="image" href={HERO_IMAGE} />
        <div className="container mx-auto px-4 lg:px-8 py-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left: Headline */}
            <div>
              <p className="section-label mb-4">Premium UK Freight Forwarding</p>
              <div className="gold-accent-line" />
              <h1
                className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"
                style={{ color: "#FFFFFF", fontFamily: "Space Grotesk, sans-serif", lineHeight: 1.1 }}
              >
                UK Freight Forwarding Company
                <br />
                <span style={{ color: "#60A5FA" }}>for Imports, Exports</span>
                <br />
                & Customs Clearance
              </h1>
              <p className="text-xl font-semibold mb-4" style={{ color: "#E2E8F0", fontFamily: "Space Grotesk, sans-serif" }}>
                Move Goods. Remove Risk. Grow Faster.
              </p>
              <p
                className="text-lg leading-relaxed mb-8 max-w-lg"
                style={{ color: "#CBD5E1" }}
              >
                Carrgo is the UK's premium freight forwarding partner for importers, wholesalers, and logistics managers who demand reliability, transparency, and results. Sea, air, road, rail — we handle it all, door to door.
              </p>
              <div className="flex flex-wrap gap-3 mb-10">
                {["✔ UK-Based Team", "✔ 2-Hour Quote Response", "✔ Customs Experts", "✔ Door-to-Door Solutions"].map((t) => (
                  <span
                    key={t}
                    className="text-sm font-medium"
                    style={{ color: "#94A3B8" }}
                  >
                    {t}
                  </span>
                ))}
              </div>
              {/* ── SEO/GEO Frictionless Enquiry Optimization ──────────────── */}
              <div className="flex flex-col sm:flex-row items-center justify-start gap-4">
                <Link href="/get-a-quote" className="w-full sm:w-auto px-8 py-4 bg-blue-600 text-white font-bold rounded-lg shadow-lg hover:bg-blue-700 transition-all transform hover:scale-105 text-center">
                  Get a 2-Hour Quote Response
                </Link>
                <Link href="/services/customs-clearance" className="w-full sm:w-auto px-8 py-4 bg-white text-blue-600 font-semibold border-2 border-blue-600 rounded-lg hover:bg-blue-50 transition-all text-center">
                  Free Customs Consultation
                </Link>
              </div>
              <p className="mt-4 text-sm text-gray-400 italic">
                *Average response time: 1 hour 42 minutes during UK business hours.
              </p>
              {/* ── END Frictionless Enquiry Optimization ──────────────── */}
            </div>

            {/* Right: Quote Form */}
            <div className="lg:pl-8">
              <QuoteForm />
            </div>
          </div>
        </div>
      </section>

      {/* ── ACCREDITATIONS & TRUST SIGNALS (GEO Optimization) ──────────────── */}
      <section className="bg-gradient-to-r from-slate-900 to-slate-800 py-12 border-y border-slate-700">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-8">
            <h2 className="text-lg font-semibold tracking-wide uppercase" style={{ color: "#94A3B8" }}>
              Fully Accredited & Trusted UK Freight Forwarder
            </h2>
            <p className="text-sm mt-2" style={{ color: "#64748B" }}>
              Industry-recognized certifications ensuring compliance, reliability, and expertise
            </p>
          </div>
          <div className="flex flex-wrap justify-center gap-8 md:gap-16 items-center">
            {/* BIFA Badge */}
            <div className="flex flex-col items-center">
              <div className="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mb-3 border-2 border-blue-500">
                <span className="text-2xl">✓</span>
              </div>
              <p className="text-sm font-semibold" style={{ color: "#E0E7FF" }}>BIFA Registered</p>
              <p className="text-xs" style={{ color: "#94A3B8" }}>British Freight Association</p>
            </div>
            {/* IATA Badge */}
            <div className="flex flex-col items-center">
              <div className="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mb-3 border-2 border-blue-500">
                <span className="text-2xl">✈️</span>
              </div>
              <p className="text-sm font-semibold" style={{ color: "#E0E7FF" }}>IATA Accredited</p>
              <p className="text-xs" style={{ color: "#94A3B8" }}>Air Freight Agent</p>
            </div>
            {/* HMRC Badge */}
            <div className="flex flex-col items-center">
              <div className="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mb-3 border-2 border-blue-500">
                <span className="text-2xl">🛃</span>
              </div>
              <p className="text-sm font-semibold" style={{ color: "#E0E7FF" }}>HMRC Authorised</p>
              <p className="text-xs" style={{ color: "#94A3B8" }}>Customs Clearance</p>
            </div>
            {/* Google News Source Badge — opens Tribe v2 winning popup */}
            <button
              onClick={() => setShowGNewsPopup(true)}
              className="flex flex-col items-center group cursor-pointer"
              title="Add Carrgo as your Google News preferred source"
              type="button"
            >
              <div className="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mb-3 border-2 border-blue-500 group-hover:border-blue-300 transition-all duration-200 group-hover:scale-110 group-hover:shadow-lg" style={{ boxShadow: "0 0 0 0 rgba(96,165,250,0)" }}>
                {/* Google News 'G' icon */}
                <svg viewBox="0 0 24 24" className="w-8 h-8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
              </div>
              <p className="text-sm font-semibold group-hover:text-blue-300 transition-colors" style={{ color: "#E0E7FF" }}>Google News Source</p>
              <p className="text-xs group-hover:text-blue-400 transition-colors" style={{ color: "#94A3B8" }}>Click to Follow ↗</p>
            </button>
          </div>
        </div>
      </section>

      {/* ── TRUST BAR ─────────────────────────────────────────────────────── */}
      <TrustBar />

      {/* ── STATS ─────────────────────────────────────────────────────────── */}
      <section className="section-mid py-16">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((s, i) => (
              <div key={i} className="stat-block fade-up" style={{ transitionDelay: `${i * 0.1}s` }}>
                <div
                  className="text-3xl lg:text-4xl font-bold mb-1"
                  style={{ color: "#2563EB", fontFamily: "Space Grotesk, sans-serif" }}
                >
                  {s.value}
                </div>
                <div className="text-sm" style={{ color: "#64748B" }}>
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SERVICES ──────────────────────────────────────────────────────── */}
      <section className="section-light py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-12">
            <p className="section-label mb-3" style={{ color: "#2563EB" }}>Our Services</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold mb-4"
              style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
            >
              Complete Freight Solutions for UK Importers
            </h2>
            <p className="text-base max-w-2xl mx-auto" style={{ color: "#4A5568" }}>
              From a single pallet to a full container, from factory floor to your warehouse — Carrgo manages every stage of your supply chain with precision and care.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {services.map((s, i) => (
              <Link
                key={s.href}
                href={s.href}
                className="block p-6 rounded-lg border transition-all duration-250 hover:-translate-y-1 fade-up"
                style={{
                  background: "white",
                  border: "1px solid #E2E8F0",
                  transitionDelay: `${i * 0.05}s`,
                  boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
                }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLElement).style.borderColor = "#2563EB";
                  (e.currentTarget as HTMLElement).style.boxShadow = "0 4px 20px rgba(26,107,255,0.12)";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLElement).style.borderColor = "#E2E8F0";
                  (e.currentTarget as HTMLElement).style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
                }}
              >
                <div className="text-3xl mb-3">{s.icon}</div>
                <h3
                  className="font-bold text-base mb-2"
                  style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
                >
                  {s.title}
                </h3>
                {s.stat && (
                  <div className="text-sm font-semibold mb-3" style={{ color: "#2563EB" }}>
                    {s.stat}
                  </div>
                )}
                <p className="text-sm leading-relaxed" style={{ color: "#4A5568" }}>
                  {s.desc}
                </p>
                <div
                  className="mt-4 text-xs font-semibold flex items-center gap-1"
                  style={{ color: "#2563EB" }}
                >
                  Learn more →
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── WHY CARRGO ────────────────────────────────────────────────────── */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <p className="section-label mb-3">Why Carrgo</p>
              <div className="gold-accent-line" />
              <h2
                className="text-3xl lg:text-4xl font-bold mb-6"
                style={{ color: "#F8FAFC", fontFamily: "Space Grotesk, sans-serif" }}
              >
                We Remove Risk From Your Supply Chain
              </h2>
              <p className="text-base leading-relaxed mb-8" style={{ color: "#CBD5E1" }}>
                Most freight problems don't happen at sea — they happen before and after. Hidden costs, customs holds, poor communication, and missed deadlines cost UK importers millions every year. Carrgo was built specifically to eliminate these problems.
              </p>
              <div className="space-y-5">
                {[
                  { problem: "Unexpected delays at UK ports", solution: "Proactive customs clearance with 99%+ first-submission success rate" },
                  { problem: "Hidden costs and surprise charges", solution: "Transparent, all-inclusive quotes with no hidden fees" },
                  { problem: "Poor communication from forwarders", solution: "Dedicated account manager and real-time shipment updates" },
                  { problem: "Customs documentation errors", solution: "Expert customs team handles all HMRC submissions and compliance" },
                ].map((item, i) => (
                  <div key={i} className="flex gap-4 fade-up" style={{ transitionDelay: `${i * 0.1}s` }}>
                    <div
                      className="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold mt-0.5"
                      style={{ background: "#2563EB", color: "white" }}
                    >
                      ✓
                    </div>
                    <div>
                      <p className="text-sm font-semibold mb-1" style={{ color: "#F8FAFC", fontFamily: "Space Grotesk, sans-serif" }}>
                        {item.solution}
                      </p>
                      <p className="text-xs" style={{ color: "#94A3B8" }}>
                        Solves: {item.problem}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <img
                src={CUSTOMS_IMAGE}
                alt="UK port customs clearance"
                className="rounded-lg w-full object-cover"
                style={{ height: "420px", filter: "brightness(0.85)" }}
              />
              <div
                className="absolute bottom-6 left-6 right-6 p-5 rounded-lg"
                style={{ background: "rgba(11,31,58,0.92)", border: "1px solid rgba(212,168,67,0.3)" }}
              >
                <p className="text-sm font-bold mb-1" style={{ color: "#D4A843", fontFamily: "Space Grotesk, sans-serif" }}>
                  "Reduced delays by 40%"
                </p>
                <p className="text-xs" style={{ color: "#CBD5E1" }}>
                  UK furniture importer shipping from China — saved £18,000 in demurrage costs in year one with Carrgo.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ──────────────────────────────────────────────────── */}
      <section className="section-light py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-12">
            <p className="section-label mb-3" style={{ color: "#2563EB" }}>How It Works</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold"
              style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
            >
              Your Shipment, Handled End to End
            </h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { step: "01", title: "Request a Quote", desc: "Send us your cargo details via form or WhatsApp. We respond within 2 hours with a transparent, all-inclusive quote." },
              { step: "02", title: "Plan Your Shipment", desc: "Our team selects the optimal route, mode, and carrier for your cargo. We handle all booking and documentation." },
              { step: "03", title: "We Manage Customs", desc: "Our customs experts prepare all HMRC documentation, calculate duties, and ensure smooth clearance at UK ports." },
              { step: "04", title: "Delivered to Your Door", desc: "From port to your warehouse or Amazon FBA centre — we manage the final mile and confirm delivery." },
            ].map((s, i) => (
              <div
                key={i}
                className="p-6 rounded-lg fade-up"
                style={{
                  background: "white",
                  border: "1px solid #E2E8F0",
                  transitionDelay: `${i * 0.1}s`,
                  boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
                }}
              >
                <div
                  className="text-4xl font-bold mb-4"
                  style={{ color: "#2563EB", fontFamily: "Space Grotesk, sans-serif", opacity: 0.3 }}
                >
                  {s.step}
                </div>
                <h3
                  className="font-bold text-base mb-2"
                  style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
                >
                  {s.title}
                </h3>
                <p className="text-sm leading-relaxed" style={{ color: "#4A5568" }}>
                  {s.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── LIVE TRANSIT TIMES ────────────────────────────────────────────── */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-10">
            <p className="section-label mb-3">Live Transit Data</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold mb-4"
              style={{ color: "#F8FAFC", fontFamily: "Space Grotesk, sans-serif" }}
            >
              Real-Time Global Shipping Status
            </h2>
            <p className="text-base max-w-2xl mx-auto" style={{ color: "#CBD5E1" }}>
              Live transit times and shipment status across our key trade routes. Data refreshes every 5 seconds.
            </p>
          </div>
          <TransitWidget />
          <div className="mt-10 text-center">
            <Link href="/get-a-quote" className="btn-gold px-8 py-4 rounded font-bold text-sm">
              Get a Quote for Your Route
            </Link>
          </div>
        </div>
      </section>

      {/* ── ROUTES ────────────────────────────────────────────────────────── */}
      <section className="section-light py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-12">
            <p className="section-label mb-3" style={{ color: "#2563EB" }}>Trade Routes</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold"
              style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
            >
              Specialist Routes to the UK
            </h2>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {routes.map((r, i) => (
              <Link
                key={r.href}
                href={r.href}
                className="block p-5 rounded-lg text-center transition-all duration-200 hover:-translate-y-1 fade-up"
                style={{
                  background: "white",
                  border: "1px solid #E2E8F0",
                  transitionDelay: `${i * 0.05}s`,
                  boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
                }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLElement).style.borderColor = "#2563EB";
                  (e.currentTarget as HTMLElement).style.boxShadow = "0 4px 20px rgba(26,107,255,0.12)";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLElement).style.borderColor = "#E2E8F0";
                  (e.currentTarget as HTMLElement).style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
                }}
              >
                <div className="text-3xl mb-2">{r.flag}</div>
                <div
                  className="font-bold text-sm mb-1"
                  style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}
                >
                  {r.route}
                </div>
                <div
                  className="text-xs"
                  style={{ color: "#2563EB", fontFamily: "JetBrains Mono, monospace" }}
                >
                  {r.transit}
                </div>
              </Link>
            ))}
          </div>
          <div className="text-center mt-8">
            <Link href="/routes" className="btn-blue px-8 py-3 rounded font-bold text-sm">
              View All Routes
            </Link>
          </div>
        </div>
      </section>

      {/* ── INDUSTRIES ────────────────────────────────────────────────────── */}
      <section className="section-mid py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-12">
            <p className="section-label mb-3">Industries We Serve</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold"
              style={{ color: "#1E293B", fontFamily: "Space Grotesk, sans-serif" }}
            >
              Sector-Specific Freight Expertise
            </h2>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            {industries.map((ind, i) => (
              <Link
                key={ind.href}
                href={ind.href}
                className="card-dark p-5 text-center block fade-up"
                style={{ transitionDelay: `${i * 0.05}s` }}
              >
                <div className="text-3xl mb-3">{ind.icon}</div>
                <div
                  className="text-xs font-semibold"
                  style={{ color: "#1E293B", fontFamily: "Space Grotesk, sans-serif" }}
                >
                  {ind.title}
                </div>
              </Link>
            ))}
          </div>
          <div className="text-center mt-8">
            <Link href="/industries" className="btn-blue px-8 py-3 rounded font-bold text-sm">
              View All Industries
            </Link>
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ──────────────────────────────────────────────────── */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center mb-12">
            <p className="section-label mb-3">Client Results</p>
            <div className="gold-accent-line mx-auto" />
            <h2
              className="text-3xl lg:text-4xl font-bold"
              style={{ color: "#F8FAFC", fontFamily: "Space Grotesk, sans-serif" }}
            >
              What UK Importers Say About Carrgo
            </h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <div
                key={i}
                className="p-7 rounded-lg fade-up"
                style={{
                  background: "#334155",
                  border: "1px solid rgba(26,107,255,0.2)",
                  transitionDelay: `${i * 0.1}s`,
                }}
              >
                <div
                  className="text-3xl mb-4"
                  style={{ color: "#D4A843" }}
                >
                  "
                </div>
                <p
                  className="text-sm leading-relaxed mb-6"
                  style={{ color: "#CBD5E1" }}
                >
                  {t.quote}
                </p>
                <div>
                  <p
                    className="font-bold text-sm"
                    style={{ color: "#F8FAFC", fontFamily: "Space Grotesk, sans-serif" }}
                  >
                    {t.name}
                  </p>
                  <p className="text-xs" style={{ color: "#94A3B8" }}>
                    {t.role}, {t.company}
                  </p>
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-8">
            <Link href="/testimonials" className="btn-blue px-8 py-3 rounded font-bold text-sm">
              Read More Case Studies
            </Link>
          </div>
        </div>
      </section>

      {/* ── FAQ ───────────────────────────────────────────────────────────── */}
      <FAQSection faqs={homeFaqs} title="Freight Forwarding FAQs" />

      {/* ── FINAL CTA ─────────────────────────────────────────────────────── */}
      <section className="section-mid py-12">
        <div className="container mx-auto px-4 lg:px-8">
          <p className="text-sm font-bold mb-4 tracking-wider uppercase" style={{ color: "#2563EB", fontFamily: "Space Grotesk, sans-serif" }}>Related Services & Routes</p>
          <div className="flex flex-wrap gap-3">
              <a href="/services/sea-freight" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>Sea Freight</a>
              <a href="/services/air-freight" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>Air Freight</a>
              <a href="/services/customs-clearance" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>Customs Clearance</a>
              <a href="/routes/china-to-uk" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>China to UK</a>
              <a href="/get-a-quote" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>Get a Quote</a>
              <a href="/about" className="text-sm px-4 py-2 rounded transition-colors hover:bg-blue-50" style={{ background: "white", border: "1px solid #E2E8F0", color: "#2563EB" }}>About Carrgo</a>
          </div>
        </div>
      </section>

{/* What happens next? */}
      <section className="py-16" style={{ background: "#F8FAFC" }}>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12 text-center" style={{ color: "#0F172A", fontFamily: "Space Grotesk, sans-serif" }}>What happens next?</h2>
          <div className="grid md:grid-cols-5 gap-4">
            {[
              { step: "1", title: "Send us your shipment details." },
              { step: "2", title: "Carrgo reviews route and freight mode options." },
              { step: "3", title: "We check customs and documentation requirements." },
              { step: "4", title: "You receive a clear freight quote." },
              { step: "5", title: "We monitor the shipment and keep you updated throughout." },
            ].map((item, i) => (
              <div key={i} className="text-center">
                <div className="w-12 h-12 rounded-full mx-auto mb-4 flex items-center justify-center font-bold text-white" style={{ background: "#2563EB" }}>
                  {item.step}
                </div>
                <p className="text-sm" style={{ color: "#0F172A" }}>{item.title}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABanner
        title="Ready to Move Your Freight with Confidence?"
        subtitle="Join 500+ UK importers who trust Carrgo for reliable, transparent freight forwarding. Get your quote in 2 hours."
      />

      {/* Google News popup — rendered at root level so it overlays everything */}
      {showGNewsPopup && (
        <GoogleNewsPopup onClose={() => setShowGNewsPopup(false)} />
      )}
    </div>
  );
}