const { useState, useEffect, useRef, useCallback } = React;

const useInView = (threshold = 0.12) => {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setIsVisible(true); obs.unobserve(el); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, isVisible];
};

/* ─── DATA ─── */
const exportLocations = [
  { name: "USA", x: 18, y: 36 },
  { name: "Canada", x: 17, y: 24 },
  { name: "Singapore", x: 77.5, y: 56 },
  { name: "Germany", x: 51.5, y: 30 },
  { name: "UAE", x: 59.5, y: 42 },
];

const certifications = [
  {
    name: "APEDA",
    full: "Agricultural & Processed Food Products Export Development Authority, India",
    logo: "https://upload.wikimedia.org/wikipedia/commons/7/76/APEDA_logo.png",
  },
  {
    name: "DGFT",
    full: "Director General of Foreign Trade, India",
    logo: "https://upload.wikimedia.org/wikipedia/commons/1/15/Directorate_General_of_Foreign_Trade_Logo.png",
  },
  {
    name: "FSSAI",
    full: "Food Safety and Standards Authority of India",
    logo: "https://upload.wikimedia.org/wikipedia/en/thumb/6/62/FSSAI_logo.svg/200px-FSSAI_logo.svg.png",
  },
  {
    name: "FDA",
    full: "Food & Drug Administration, USA",
    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Logo_of_the_United_States_Food_and_Drug_Administration.svg/256px-Logo_of_the_United_States_Food_and_Drug_Administration.svg.png",
  },
  {
    name: "ISO 9001:2015",
    full: "International Organization for Standardization",
    logo: "https://upload.wikimedia.org/wikipedia/commons/5/53/Logo-iso9001.png",
  },
  {
    name: "HACCP",
    full: "Hazard Analysis & Critical Control Point System",
    logo: "https://upload.wikimedia.org/wikipedia/commons/d/de/Tieu-chuan-haccp.png",
  },
  {
    name: "GMP",
    full: "Good Manufacturing Practice",
    logo: null,
  },
  {
    name: "RCMC",
    full: "Registration Cum Membership Certificate, APEDA",
    logo: null,
  },
];

const productCategories = [
  {
    title: "Freeze Dried / Air Dried",
    subtitle: "Fruits and vegetables preserved at peak nutrition",
    accent: "#4A7C59",
    items: [
      { name: "Fruits", img: "freeze-dried-fruits.png" },
      { name: "Vegetables", img: "freeze-dried-vegetables.png" },
      { name: "Green Peas", img: "green-peas.png" },
      { name: "Sweet Corn", img: "sweet-corn.png" },
      { name: "Green Beans", img: "green-beans.png" },
      { name: "Herbs", img: "herbs.png" },
      { name: "Strawberry", img: "strawberry.png" },
      { name: "Banana", img: "banana.png" },
    ],
  },
  {
    title: "Precious Oils",
    subtitle: "Cold-pressed from rare Indian seeds and botanicals",
    accent: "#C9A96E",
    items: [
      { name: "Moringa Oil", img: "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?w=400&h=300&fit=crop" },
      { name: "Charoli Oil", img: "charoli-oil.png" },
      { name: "Mahua Oil", img: "https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=400&h=300&fit=crop" },
      { name: "Flax Oil", img: "flax-oil.png" },
      { name: "Kalonji Oil", img: "kalonji-oil.png" },
    ],
  },
  {
    title: "Ready to Eat",
    subtitle: "Authentic Indian meals, freeze-dried for convenience",
    accent: "#D4AF37",
    items: [
      { name: "Chole", img: "https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=400&h=300&fit=crop" },
      { name: "Bhaji", img: "https://images.unsplash.com/photo-1567337710282-00832b415979?w=400&h=300&fit=crop" },
      { name: "Palak Paneer", img: "https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=400&h=300&fit=crop" },
      { name: "Tahori", img: "https://images.unsplash.com/photo-1596797038530-2c107229654b?w=400&h=300&fit=crop" },
    ],
  },
  {
    title: "Pet Food Ingredients",
    subtitle: "Natural dried ingredients for premium pet nutrition",
    accent: "#8B7355",
    items: [
      { name: "Potato", img: "potato.png" },
      { name: "Carrot", img: "https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=400&h=300&fit=crop" },
      { name: "Beetroot", img: "beetroot.png" },
      { name: "Sweet Potato", img: "sweet-potato.png" },
      { name: "Tomato Pomace", img: "tomato.png" },
      { name: "Chicory", img: "https://images.unsplash.com/photo-1607305387299-a3d9611cd469?w=400&h=300&fit=crop" },
    ],
  },];


/* ─── MAP COMPONENTS ─── */
const MapPin = ({ x, y, name, delay }) => {
  const [hovered, setHovered] = useState(false);
  return (
    <g
      style={{ cursor: "pointer", animation: `pinDrop 0.6s ease-out ${delay}s both` }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <circle cx={`${x}%`} cy={`${y}%`} r={hovered ? 14 : 10} fill="#4A7C59" opacity={hovered ? 0.12 : 0.08}
        style={{ transition: "all 0.3s ease" }} />
      <circle cx={`${x}%`} cy={`${y}%`} r={hovered ? 10 : 7} fill="#4A7C59" opacity={0.18}
        style={{ transition: "all 0.3s ease" }} />
      <circle cx={`${x}%`} cy={`${y}%`} r={hovered ? 7 : 5} fill={hovered ? "#D4AF37" : "#4A7C59"}
        style={{ transition: "all 0.3s ease", filter: "drop-shadow(0 0 6px rgba(74,124,89,0.6))" }} />
      <circle cx={`${x}%`} cy={`${y}%`} r="2" fill="#E8DFC8" />
      {hovered && (
        <g>
          <rect x={`${x - 5.5}%`} y={`${y - 8}%`} width="11%" height="4.5%" rx="0"
            fill="rgba(18,28,20,0.95)" stroke="#D4AF37" strokeWidth="0.5" />
          <text x={`${x}%`} y={`${y - 5.2}%`} textAnchor="middle" fill="#E8DFC8"
            fontSize="8" fontFamily="'DM Sans', sans-serif" fontWeight="600" letterSpacing="0.5">{name}</text>
        </g>
      )}
    </g>
  );
};

const WorldMap = () => (
  <svg viewBox="0 0 1000 500" style={{ width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid meet">
    <defs>
      <radialGradient id="mapGlow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="#4A7C59" stopOpacity="0.05" />
        <stop offset="100%" stopColor="transparent" />
      </radialGradient>
      <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stopColor="#D4AF37" stopOpacity="0.4" />
        <stop offset="100%" stopColor="#4A7C59" stopOpacity="0.15" />
      </linearGradient>
    </defs>
    <rect fill="url(#mapGlow)" width="1000" height="500" />
    <g fill="#3B6B3A" opacity="0.1" stroke="#4A7C59" strokeWidth="0.6" strokeOpacity="0.15">
      <path d="M80,80 Q120,60 200,70 Q230,80 240,110 Q250,140 230,170 Q220,190 200,200 Q180,210 160,220 Q140,230 120,210 Q100,200 90,180 Q80,160 70,140 Q60,120 70,100 Z" />
      <path d="M200,280 Q220,260 240,270 Q260,280 270,310 Q280,340 270,370 Q260,400 240,420 Q220,430 210,410 Q200,390 190,360 Q180,330 185,300 Z" />
      <path d="M460,80 Q480,70 510,75 Q540,80 550,100 Q555,120 540,140 Q530,150 510,155 Q490,158 475,150 Q460,140 455,120 Q450,100 460,80 Z" />
      <path d="M470,200 Q500,180 530,190 Q560,200 570,240 Q580,280 570,320 Q560,360 540,380 Q520,390 500,385 Q480,380 465,350 Q455,320 450,280 Q448,240 460,210 Z" />
      <path d="M560,60 Q620,50 700,55 Q760,60 800,80 Q830,100 840,130 Q845,160 830,180 Q810,200 780,210 Q740,215 700,210 Q660,200 630,180 Q600,160 580,130 Q565,100 560,80 Z" />
      <path d="M640,200 Q660,190 680,200 Q695,215 700,240 Q700,265 690,280 Q675,295 660,290 Q645,280 635,260 Q630,240 635,220 Z" />
      <path d="M740,230 Q760,220 780,225 Q795,235 790,255 Q785,270 770,275 Q755,275 745,265 Q738,250 740,230 Z" />
      <path d="M770,320 Q810,310 850,320 Q870,335 870,360 Q865,380 845,390 Q820,395 795,385 Q775,375 770,355 Q768,335 770,320 Z" />
      <path d="M830,100 Q840,90 845,100 Q848,115 842,125 Q835,130 830,120 Q828,110 830,100 Z" />
    </g>
    <g stroke="#4A7C59" strokeWidth="0.3" strokeOpacity="0.06">
      {[100,200,300,400].map(y=><line key={y} x1="0" y1={y} x2="1000" y2={y}/>)}
      {[200,400,600,800].map(x=><line key={x} x1={x} y1="0" x2={x} y2="500"/>)}
    </g>
    <circle cx="660" cy="240" r="22" fill="#D4AF37" opacity="0.08">
      <animate attributeName="r" values="18;24;18" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.08;0.15;0.08" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="660" cy="240" r="12" fill="#D4AF37" opacity="0.2" />
    <circle cx="660" cy="240" r="5" fill="#D4AF37" opacity="0.7" />
    <text x="660" y="222" textAnchor="middle" fill="#D4AF37" fontSize="10"
      fontFamily="'DM Sans', sans-serif" fontWeight="700" letterSpacing="2" opacity="0.9">INDIA HQ</text>
    {exportLocations.map((loc, i) => (
      <line key={`line-${i}`} x1="66%" y1="48%" x2={`${loc.x}%`} y2={`${loc.y}%`}
        stroke="url(#lineGrad)" strokeWidth="0.6" strokeDasharray="6,4"
        style={{ animation: `drawLine 2s ease-out ${0.5 + i * 0.08}s both` }} />
    ))}
    {exportLocations.map((loc, i) => (
      <MapPin key={loc.name} x={loc.x} y={loc.y} name={loc.name} delay={0.3 + i * 0.1} />
    ))}
  </svg>
);

/* ─── NAVBAR ─── */
const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = ["About", "Products", "Process", "Global Reach", "Certifications", "Contact"];
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? "rgba(14,22,15,0.97)" : "transparent",
      backdropFilter: scrolled ? "blur(24px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(74,124,89,0.15)" : "none",
      transition: "all 0.5s cubic-bezier(0.4,0,0.2,1)",
      padding: scrolled ? "14px 0" : "22px 0",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 48px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#home" style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 12 }}>
          <img
            src="logo.png"
            alt="Apamra logo"
            style={{ width: 44, height: 44, objectFit: "cover", borderRadius: 4 }}
          />
          <span style={{
            fontFamily: "'Playfair Display', serif", fontSize: 24, fontWeight: 700,
            color: "#E8DFC8", letterSpacing: 3,
          }}>APAMRA<sup style={{ fontSize: "0.45em", letterSpacing: 1 }}>TM</sup></span>
        </a>
        <div style={{ display: "flex", gap: 28, alignItems: "center" }} className="desktop-nav">
          {links.map(link => (
            <a key={link} href={`#${link.toLowerCase().replace(/ /g, "-")}`}
              style={{
                textDecoration: "none", color: "#8A8576", fontSize: 11,
                fontFamily: "'DM Sans', sans-serif", letterSpacing: 2, fontWeight: 500,
                textTransform: "uppercase", transition: "color 0.3s", padding: "4px 0",
              }}
              onMouseEnter={e => e.target.style.color = "#D4AF37"}
              onMouseLeave={e => e.target.style.color = "#8A8576"}
            >{link}</a>
          ))}
          <a href="#contact" style={{
            padding: "10px 24px", background: "transparent", border: "1px solid rgba(212,175,55,0.4)",
            color: "#D4AF37", textDecoration: "none", fontSize: 11,
            fontFamily: "'DM Sans', sans-serif", letterSpacing: 2, fontWeight: 600,
            textTransform: "uppercase", transition: "all 0.3s",
          }}
            onMouseEnter={e => { e.target.style.background = "rgba(212,175,55,0.1)"; }}
            onMouseLeave={e => { e.target.style.background = "transparent"; }}
          >Enquire</a>
        </div>
      </div>
    </nav>
  );
};

/* ─── HERO SLIDES ─── */
const heroSlides = [
  {
    tag: "Quality Fruits, Vegetables, Herbs, & Botanicals Since 1993",
    h1line1: "Bridging India's Finest",
    h1line2: "Produce To The World",
    sub: "Freeze dried, air dried, and solar dried fruits, vegetables, herbs and spices, processed in our state-of-the-art facility and exported to markets worldwide.",
    ctas: [
      { label: "Our Products", href: "#products", primary: true },
      { label: "Our Story", href: "#about", primary: false },
    ],
    bgImg: "hero-farmers.png",
    accent: "#D4AF37",
    showStats: true,
  },
  {
    tag: "Farm to World",
    h1line1: "From Family Farmers,",
    h1line2: "Freeze Dried",
    sub: "Dehydrated using freeze-drying technology, with raw material sourced directly from small producers across India, our freeze-dried produce locks in peak nutrition and flavour — from field to your facility.",
    ctas: [{ label: "Explore Products", href: "#products", primary: true }],
    bgImg: "https://images.unsplash.com/photo-1540420773420-3366772f4999?w=1600&h=900&fit=crop",
    accent: "#4A7C59",
    showStats: false,
  },
  {
    tag: "Ready to Eat",
    h1line1: "Authentically Indian,",
    h1line2: "Direct from Kitchen",
    sub: "Traditional Indian meals — Chole, Palak Paneer, Tahori — freeze-dried to perfection. Authentic flavour, zero compromise.",
    ctas: [{ label: "Ready to Eat Range", href: "#products", primary: true }],
    bgImg: "https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=1600&h=900&fit=crop",
    accent: "#D4AF37",
    showStats: false,
  },
  {
    tag: "Precious Oils",
    h1line1: "First Press, Cold Press,",
    h1line2: "Precious Oils",
    sub: "Moringa, Charoli, Mahua, Flax, Kalonji — rare Indian botanical oils, cold-pressed to preserve every drop of goodness.",
    ctas: [{ label: "Discover Our Oils", href: "#products", primary: true }],
    bgImg: "https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?w=1600&h=900&fit=crop",
    accent: "#C9A96E",
    showStats: false,
  },
  {
    tag: "Pet Food Ingredients",
    h1line1: "With Love, For Our",
    h1line2: "4-Legged Companions",
    sub: "Natural dried potato, carrot, beetroot, sweet potato and more — premium quality ingredients for the global pet food industry.",
    ctas: [{ label: "Pet Ingredients", href: "#products", primary: true }],
    bgImg: "https://images.unsplash.com/photo-1570402383251-9f8a173630da?w=1600&h=900&fit=crop",
    accent: "#D4AF37",
    showStats: false,
  },
];

/* ─── HERO ─── */
const HeroSection = () => {
  const [loaded, setLoaded] = useState(false);
  const [current, setCurrent] = useState(0);
  const [isAuto, setIsAuto] = useState(true);
  const [fading, setFading] = useState(false);
  const [arrowHover, setArrowHover] = useState(null);
  const fadingRef = useRef(false);
  const currentRef = useRef(0);
  const firstSlideShownRef = useRef(false);

  useEffect(() => { setTimeout(() => setLoaded(true), 100); }, []);

  const goTo = useCallback((rawIdx, manual = false) => {
    if (fadingRef.current) return;
    const next = ((rawIdx % heroSlides.length) + heroSlides.length) % heroSlides.length;
    if (manual) setIsAuto(false);
    fadingRef.current = true;
    setFading(true);
    setTimeout(() => {
      setCurrent(next);
      currentRef.current = next;
      setFading(false);
      fadingRef.current = false;
    }, 350);
  }, []);

  useEffect(() => {
    if (!isAuto) return;
    const delay = (!firstSlideShownRef.current && current === 0) ? 10000 : 5000;
    const id = setTimeout(() => {
      firstSlideShownRef.current = true;
      goTo(currentRef.current + 1);
    }, delay);
    return () => clearTimeout(id);
  }, [isAuto, goTo, current]);

  const slide = heroSlides[current];

  const arrowBase = {
    position: "absolute", top: "50%", transform: "translateY(-50%)",
    zIndex: 4, width: 52, height: 52,
    display: "flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer", border: "none", fontSize: 20,
    transition: "all 0.3s ease",
  };

  return (
    <section id="home" style={{
      minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center",
      position: "relative", overflow: "hidden", paddingTop: 80, paddingBottom: 64,
      background: "linear-gradient(165deg, #0D1A0F 0%, #1A2A1C 30%, #1E331F 60%, #152218 100%)",
    }}>

      {/* Per-slide background image */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        opacity: (!fading && slide.bgImg) ? 1 : 0,
        transition: "opacity 0.5s ease", pointerEvents: "none",
      }}>
        {slide.bgImg && (
          <img src={slide.bgImg} alt="" aria-hidden="true" style={{
            width: "100%", height: "100%", objectFit: "cover", display: "block",
            filter: "brightness(0.28) saturate(0.7)",
          }} />
        )}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(165deg, rgba(13,26,15,0.65) 0%, rgba(21,34,24,0.45) 100%)",
        }} />
      </div>

      {/* Decorative circles */}
      <div style={{
        position: "absolute", top: "10%", right: "5%", width: 400, height: 400,
        border: "1px solid rgba(212,175,55,0.06)", animation: "float 8s ease-in-out infinite", zIndex: 1,
      }} />
      <div style={{
        position: "absolute", bottom: "15%", left: "8%", width: 250, height: 250,
        border: "1px solid rgba(74,124,89,0.1)", animation: "float 10s ease-in-out infinite reverse", zIndex: 1,
      }} />
      <div style={{
        position: "absolute", inset: 0, zIndex: 1,
        backgroundImage: "radial-gradient(circle at 30% 50%, rgba(74,124,89,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(212,175,55,0.05) 0%, transparent 40%)",
      }} />
      <div style={{
        position: "absolute", inset: 0, opacity: 0.03, pointerEvents: "none", zIndex: 1,
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
      }} />

      {/* Main content */}
      <div className="hero-content" style={{
        textAlign: "center", position: "relative", zIndex: 2, maxWidth: 900, padding: "0 40px",
        opacity: (loaded && !fading) ? 1 : 0,
        transform: loaded ? "translateY(0)" : "translateY(40px)",
        transition: "opacity 0.4s ease, transform 1.2s cubic-bezier(0.4,0,0.2,1)",
      }}>
        {/* Badge */}
        <div className="hero-badge" style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          padding: "8px 24px", border: `1px solid ${slide.accent}40`,
          marginBottom: 40, background: `${slide.accent}0d`,
        }}>
          <div style={{ width: 6, height: 6, background: slide.accent, flexShrink: 0, animation: "pulse 2s infinite" }} />
          <span style={{
            fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: slide.accent,
            letterSpacing: 3, textTransform: "uppercase", fontWeight: 500,
          }}>
            {slide.tag}
          </span>
        </div>

        {/* H1 */}
        <h1 style={{
          fontFamily: "'Playfair Display', serif", fontSize: "clamp(42px, 7vw, 84px)",
          color: "#E8DFC8", fontWeight: 400, lineHeight: 1.1, marginBottom: 28,
        }}>
          <span style={{ display: "block", fontSize: "0.42em", fontWeight: 400, color: "#8A8576", letterSpacing: 2, marginBottom: "0.3em", fontStyle: "normal" }}>{slide.h1line1}</span>
          <span style={{ fontStyle: "italic", color: slide.accent }}>{slide.h1line2}</span>
        </h1>

        {/* Subtitle */}
        <p style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 18, color: "#8A8576",
          lineHeight: 1.8, maxWidth: 600, margin: "0 auto 48px",
        }}>
          {slide.sub}
        </p>

        {/* CTAs */}
        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
          {slide.ctas.map((cta, i) => (
            cta.primary ? (
              <a key={i} href={cta.href} style={{
                padding: "16px 40px", background: "linear-gradient(135deg, #4A7C59, #3B6B3A)",
                color: "#E8DFC8", textDecoration: "none",
                fontFamily: "'DM Sans', sans-serif", fontSize: 13, letterSpacing: 2,
                textTransform: "uppercase", fontWeight: 600, transition: "all 0.3s",
                boxShadow: "0 4px 20px rgba(74,124,89,0.3)",
              }}
                onMouseEnter={e => { e.target.style.transform = "translateY(-2px)"; e.target.style.boxShadow = "0 8px 30px rgba(74,124,89,0.4)"; }}
                onMouseLeave={e => { e.target.style.transform = "translateY(0)"; e.target.style.boxShadow = "0 4px 20px rgba(74,124,89,0.3)"; }}
              >{cta.label}</a>
            ) : (
              <a key={i} href={cta.href} style={{
                padding: "16px 40px", background: "transparent",
                color: "#B8B0A0", textDecoration: "none",
                border: "1px solid rgba(184,176,160,0.25)",
                fontFamily: "'DM Sans', sans-serif", fontSize: 13, letterSpacing: 2,
                textTransform: "uppercase", fontWeight: 500, transition: "all 0.3s",
              }}
                onMouseEnter={e => { e.target.style.borderColor = "#D4AF37"; e.target.style.color = "#D4AF37"; }}
                onMouseLeave={e => { e.target.style.borderColor = "rgba(184,176,160,0.25)"; e.target.style.color = "#B8B0A0"; }}
              >{cta.label}</a>
            )
          ))}
        </div>

        {/* Stats — slide 1 only */}
        {slide.showStats && (
          <div style={{ display: "flex", justifyContent: "center", gap: 60, marginTop: 80, flexWrap: "wrap" }}>
            {[
              { num: "34+", label: "Years Experience" },
              { num: "5", label: "Countries Served" },
              { num: "50+", label: "Variety of Products" },
              { num: "250", label: "Tonnes Annually" },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 36, color: "#D4AF37", fontWeight: 700 }}>{s.num}</div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#6B6558", letterSpacing: 2, textTransform: "uppercase", marginTop: 4 }}>{s.label}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Left arrow */}
      <button
        onClick={() => goTo(current - 1, true)}
        onMouseEnter={() => setArrowHover("left")}
        onMouseLeave={() => setArrowHover(null)}
        aria-label="Previous slide"
        style={{
          ...arrowBase, left: 28,
          background: arrowHover === "left" ? "rgba(212,175,55,0.12)" : "rgba(14,22,15,0.55)",
          border: `1px solid ${arrowHover === "left" ? "rgba(212,175,55,0.45)" : "rgba(212,175,55,0.15)"}`,
          color: arrowHover === "left" ? "#D4AF37" : "#8A8576",
        }}
      >←</button>

      {/* Right arrow */}
      <button
        onClick={() => goTo(current + 1, true)}
        onMouseEnter={() => setArrowHover("right")}
        onMouseLeave={() => setArrowHover(null)}
        aria-label="Next slide"
        style={{
          ...arrowBase, right: 28,
          background: arrowHover === "right" ? "rgba(212,175,55,0.12)" : "rgba(14,22,15,0.55)",
          border: `1px solid ${arrowHover === "right" ? "rgba(212,175,55,0.45)" : "rgba(212,175,55,0.15)"}`,
          color: arrowHover === "right" ? "#D4AF37" : "#8A8576",
        }}
      >→</button>

      {/* Slide indicators */}
      <div style={{
        position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)",
        display: "flex", gap: 8, zIndex: 3, alignItems: "center",
      }}>
        {heroSlides.map((_, i) => (
          <button
            key={i}
            onClick={() => goTo(i, true)}
            aria-label={`Go to slide ${i + 1}`}
            style={{
              padding: 0, border: "none", cursor: "pointer",
              width: i === current ? 40 : 20, height: 2,
              background: "rgba(255,255,255,0.15)",
              transition: "width 0.4s ease",
              position: "relative", overflow: "hidden",
            }}
          >
            {i === current && (
              <div
                key={`prog-${current}`}
                style={{
                  position: "absolute", inset: 0,
                  background: slide.accent,
                  transformOrigin: "left center",
                  animation: isAuto ? "slideProgress 3s linear forwards" : "none",
                  transform: isAuto ? undefined : "scaleX(1)",
                }}
              />
            )}
          </button>
        ))}
      </div>

    </section>
  );
};

/* ─── ABOUT ─── */
const AboutSection = () => {
  const [ref, visible] = useInView();
  return (
    <section id="about" ref={ref} style={{
      padding: "160px 48px", position: "relative",
      background: "linear-gradient(180deg, #0E160F 0%, #121E13 50%, #0E160F 100%)",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          marginBottom: 80,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)",
          transition: "all 1s ease",
        }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>About Apamra</div>
          <h2 style={{
            fontFamily: "'Playfair Display', serif", fontSize: 52, color: "#E8DFC8",
            fontWeight: 400, lineHeight: 1.15, maxWidth: 700,
          }}>
            A Family Business Built on<br />
            <span style={{ fontStyle: "italic", color: "#D4AF37" }}>Quality & Integrity</span>
          </h2>
          <div style={{ width: 80, height: 1, background: "#D4AF37", marginTop: 32, opacity: 0.4 }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "5fr 4fr", gap: 100, alignItems: "start" }}>
          <div style={{
            opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(-40px)",
            transition: "all 1s ease 0.2s",
          }}>
            <p style={{
              fontFamily: "'DM Sans', sans-serif", fontSize: 17, color: "#B8B0A0",
              lineHeight: 2, marginBottom: 28, fontWeight: 400,
            }}>
              Kuber Corporation is a family-owned business, focused on sustainable resource production and the sale
              of quality agricultural products for the global market.
            </p>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#8A8576", lineHeight: 1.95, marginBottom: 28 }}>
              With a strong background of over 34 years in international business, Kuber Corporation was built on
              the idea of creating an efficient bridge between small producers in India and buyers across the world
              seeking quality ingredients for Food, Pharmaceuticals, and Pet Food Industries.
            </p>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#8A8576", lineHeight: 1.95, marginBottom: 28 }}>
              We adopt an integrated approach to sourcing, monitoring, processing, manufacturing, and selling
              these products, which ensures the quality that our customers expect.
            </p>
            <div style={{ height: 1, background: "rgba(74,124,89,0.12)", margin: "40px 0" }} />
            <div style={{ display: "flex", gap: 40 }}>
              {[
                { label: "Industries", value: "Food · Pharma · Pet Food" },
                { label: "Location", value: "Indore, MP, India" },
                { label: "Methods", value: "Freeze · Air · Solar Dried" },
              ].map((f, i) => (
                <div key={i}>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "#D4AF37", letterSpacing: 3, textTransform: "uppercase", marginBottom: 6, fontWeight: 600 }}>{f.label}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#6B6558", lineHeight: 1.6 }}>{f.value}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            position: "relative",
            opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(40px)",
            transition: "all 1s ease 0.4s",
          }}>
            <div style={{ width: "100%", aspectRatio: "3/4", overflow: "hidden", border: "1px solid rgba(74,124,89,0.12)" }}>
              <img src="https://images.unsplash.com/photo-1532336414038-cf19250c5757?w=600&h=800&fit=crop" alt="Spice processing"
                style={{ width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0.75) saturate(0.9)" }} />
            </div>
            <div style={{
              position: "absolute", bottom: -40, left: -40, width: "55%", aspectRatio: "4/3",
              overflow: "hidden", border: "3px solid #0E160F", boxShadow: "0 20px 60px rgba(0,0,0,0.4)",
            }}>
              <img src="https://images.unsplash.com/photo-1599940824399-b87987ceb72a?w=400&h=300&fit=crop" alt="Agricultural production"
                style={{ width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0.8)" }} />
            </div>
            <div style={{
              position: "absolute", top: 24, right: 24, padding: "20px 28px",
              background: "rgba(14,22,15,0.92)", border: "1px solid rgba(212,175,55,0.15)",
            }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 36, color: "#D4AF37", fontWeight: 700, lineHeight: 1 }}>30+</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "#6B6558", letterSpacing: 2, textTransform: "uppercase", marginTop: 4 }}>Years of Excellence</div>
            </div>
          </div>
        </div>
        <div style={{
          marginTop: 120, padding: "56px 64px", border: "1px solid rgba(74,124,89,0.1)",
          background: "rgba(26,36,28,0.2)", display: "flex", alignItems: "center", gap: 64,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)",
          transition: "all 1s ease 0.6s",
        }}>
          <div style={{ flex: "0 0 auto" }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "#D4AF37", letterSpacing: 3, textTransform: "uppercase", marginBottom: 8, fontWeight: 600 }}>Our Facility</div>
            <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 28, color: "#E8DFC8", fontWeight: 400 }}>State-of-the-Art<br /><span style={{ fontStyle: "italic", color: "#D4AF37" }}>Processing House</span></div>
          </div>
          <div style={{ width: 1, height: 80, background: "rgba(74,124,89,0.15)", flexShrink: 0 }} />
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#8A8576", lineHeight: 1.9 }}>
            Our processing house is located in Indore, Madhya Pradesh. We specialise in Freeze Dried, Air Dried, and Solar Dried
            Fruits, Vegetables, Spices, Herbs, Leaf Vegetables, and Milk Products. For processes where we do not have our own
            facilities, we source through certified external processing facilities.
          </p>
        </div>
      </div>
    </section>
  );
};

/* ─── PRODUCTS ─── */
const ProductCard = ({ item, accent }) => {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        overflow: "hidden", cursor: "default",
        border: `1px solid ${hovered ? `${accent}30` : "rgba(74,124,89,0.08)"}`,
        transition: "all 0.35s ease",
        background: hovered ? "rgba(18,28,19,0.95)" : "#0A140B",
      }}
    >
      <div style={{ position: "relative", height: 200, overflow: "hidden" }}>
        <img
          src={item.img}
          alt={item.name}
          style={{
            width: "100%", height: "100%", objectFit: "cover",
            filter: hovered ? "brightness(0.85) saturate(1.1)" : "brightness(0.6) saturate(0.8)",
            transform: hovered ? "scale(1.06)" : "scale(1)",
            transition: "all 0.5s ease",
          }}
        />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(to top, rgba(10,20,11,0.75) 0%, transparent 55%)",
        }} />
      </div>
      <div style={{ padding: "16px 20px 20px", borderTop: `1px solid ${hovered ? `${accent}25` : "rgba(74,124,89,0.06)"}`, transition: "border-color 0.3s" }}>
        <span style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600,
          color: hovered ? "#E8DFC8" : "#8A8576",
          letterSpacing: 0.5, transition: "color 0.3s",
        }}>{item.name}</span>
      </div>
    </div>
  );
};

const ProductsSection = () => {
  const [ref, visible] = useInView();
  const [activeCategory, setActiveCategory] = useState(0);
  const cat = productCategories[activeCategory];
  return (
    <section id="products" ref={ref} style={{ padding: "160px 48px", position: "relative", background: "#0A140B" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        {/* Header */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64, flexWrap: "wrap", gap: 24,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease",
        }}>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>Product Range</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 52, color: "#E8DFC8", fontWeight: 400, lineHeight: 1.15 }}>
              What We <span style={{ fontStyle: "italic", color: "#D4AF37" }}>Offer</span>
            </h2>
          </div>
          {/* Category tabs */}
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
            {productCategories.map((c, i) => (
              <button key={i} onClick={() => setActiveCategory(i)} style={{
                padding: "12px 22px", border: "1px solid",
                borderColor: activeCategory === i ? "#D4AF37" : "rgba(74,124,89,0.15)",
                background: activeCategory === i ? "rgba(212,175,55,0.08)" : "transparent",
                color: activeCategory === i ? "#D4AF37" : "#6B6558",
                fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: 1.5,
                textTransform: "uppercase", cursor: "pointer", transition: "all 0.3s", fontWeight: 600,
              }}>{c.title}</button>
            ))}
          </div>
        </div>

        {/* Category subtitle */}
        <div style={{
          marginBottom: 40,
          opacity: visible ? 1 : 0, transition: "all 0.6s ease 0.2s",
        }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#4A4639", letterSpacing: 0.5, lineHeight: 1.6 }}>{cat.subtitle}</p>
        </div>

        {/* Product card grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "rgba(74,124,89,0.06)",
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)",
          transition: "all 1s ease 0.3s",
        }}>
          {cat.items.map((item, i) => (
            <ProductCard key={`${activeCategory}-${i}`} item={item} accent={cat.accent} />
          ))}
        </div>

        {/* Footer note */}
        <div style={{
          marginTop: 40, padding: "20px 28px",
          background: "rgba(74,124,89,0.04)", border: "1px solid rgba(74,124,89,0.08)",
          opacity: visible ? 1 : 0, transition: "all 1s ease 0.5s",
        }}>
        
        </div>
      </div>
    </section>
  );
};

/* ─── PROCESS ─── */

/* ─── MAP ─── */
const MapSection = () => {
  const [ref, visible] = useInView(0.05);
  return (
    <section id="global-reach" ref={ref} style={{
      padding: "160px 48px", position: "relative",
      background: "linear-gradient(180deg, #0A140B 0%, #121E13 50%, #0E160F 100%)",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 60, flexWrap: "wrap", gap: 24,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease",
        }}>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>Export Network</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 52, color: "#E8DFC8", fontWeight: 400, lineHeight: 1.15 }}>
              Our Global<br /><span style={{ fontStyle: "italic", color: "#D4AF37" }}>Footprint</span>
            </h2>
          </div>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#6B6558", maxWidth: 380, lineHeight: 1.8, textAlign: "right" }}>
            Delivering premium quality fruits, vegetables, herbs, spices, and dried agricultural products to buyers across 3 continents.
          </p>
        </div>
        <div style={{
          opacity: visible ? 1 : 0, transform: visible ? "scale(1)" : "scale(0.97)",
          transition: "all 1.2s cubic-bezier(0.4,0,0.2,1) 0.3s",
          background: "rgba(18,30,19,0.5)", padding: "48px 56px",
          border: "1px solid rgba(74,124,89,0.08)",
        }}>
          <WorldMap />
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 1, marginTop: 40,
          background: "rgba(74,124,89,0.06)",
          opacity: visible ? 1 : 0, transition: "all 0.8s ease 0.6s",
        }}>
          {exportLocations.map((loc, i) => (
            <div key={i} style={{
              padding: "18px 20px", background: "#0A140B", textAlign: "center",
              fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#6B6558",
              letterSpacing: 1, transition: "all 0.3s", cursor: "default",
            }}
              onMouseEnter={e => { e.target.style.color = "#D4AF37"; e.target.style.background = "rgba(212,175,55,0.03)"; }}
              onMouseLeave={e => { e.target.style.color = "#6B6558"; e.target.style.background = "#0A140B"; }}
            >{loc.name}</div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─── CERTIFICATIONS ─── */
const CertificationsSection = () => {
  const [ref, visible] = useInView();
  return (
    <section id="certifications" ref={ref} style={{ padding: "160px 48px", position: "relative", background: "#0A140B" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100, marginBottom: 120,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease",
        }}>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>Quality & Safety</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 48, color: "#E8DFC8", fontWeight: 400, lineHeight: 1.15 }}>
              Uncompromising<br /><span style={{ fontStyle: "italic", color: "#D4AF37" }}>Standards</span>
            </h2>
          </div>
          <div style={{ display: "flex", alignItems: "center" }}>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#8A8576", lineHeight: 2 }}>
              We have always been fully aware that food safety is extremely important. At all stages of purchasing
              and production, we take large samples of each batch and carefully have them examined by experts
              according to stringent specifications, all respecting internationally recognised food safety
              standards and regulations.
            </p>
          </div>
        </div>
        <div style={{ opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease 0.3s" }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 40, fontWeight: 600, textAlign: "center" }}>Certifications & Accreditations</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "rgba(74,124,89,0.06)" }}>
            {certifications.map((cert, i) => (
              <div key={i} style={{
                background: "#0A140B",
                opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(20px)",
                transition: `all 0.8s ease ${0.1 * i}s`, cursor: "default",
                display: "flex", flexDirection: "column",
              }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(18,28,19,0.95)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "#0A140B"; }}
              >
                {/* Logo area */}
                <div style={{
                  height: 96, display: "flex", alignItems: "center", justifyContent: "center",
                  background: "rgba(255,255,255,0.92)", padding: "12px 20px",
                  borderBottom: "1px solid rgba(74,124,89,0.08)",
                }}>
                  {cert.logo ? (
                    <>
                      <img
                        src={cert.logo}
                        alt={cert.name}
                        style={{ maxHeight: 60, maxWidth: "100%", objectFit: "contain" }}
                        onError={e => { e.target.style.display = "none"; e.target.nextSibling.style.display = "flex"; }}
                      />
                      <div style={{
                        display: "none", alignItems: "center", justifyContent: "center",
                        width: "100%", height: "100%",
                      }}>
                        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, fontWeight: 800, color: "#1A2A1C", letterSpacing: 1 }}>{cert.name}</span>
                      </div>
                    </>
                  ) : (
                    <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, fontWeight: 800, color: "#1A2A1C", letterSpacing: 1 }}>{cert.name}</span>
                  )}
                </div>
                {/* Text area */}
                <div style={{ padding: "24px 24px 28px" }}>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#E8DFC8", fontWeight: 700, letterSpacing: 0.5, marginBottom: 8 }}>{cert.name}</div>
                  <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#4A4639", lineHeight: 1.7, margin: 0 }}>{cert.full}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─── CONTACT ─── */
const contactItems = [
  { label: "Head Office", value: '"Shanti Villa", 52 Shakti Nagar\nKanadia Road, Indore – 452 018\nMadhya Pradesh, India', icon: "◈" },
  { label: "Factory", value: "79, Khasra No. Semilya Chau\nIndore (M.P.) 452016", icon: "◈" },
  { label: "Phone & Fax", value: "Ph: +91-731-3594055\nCell: +91 98261-61134\n+91 80856 33022 (India)\n+1 (813) 406-7022 (USA)", icon: "◎" },
  { label: "Email", value: "kubercorp71@gmail.com", icon: "◇" },
];

const ContactSection = () => {
  const [ref, visible] = useInView();
  const [hovered, setHovered] = useState(null);
  return (
    <section id="contact" ref={ref} style={{
      padding: "160px 48px", position: "relative",
      background: "linear-gradient(180deg, #0E160F 0%, #0A140B 100%)",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        {/* Header */}
        <div style={{
          textAlign: "center", marginBottom: 80,
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease",
        }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#D4AF37", letterSpacing: 4, textTransform: "uppercase", marginBottom: 16, fontWeight: 600 }}>Get In Touch</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 56, color: "#E8DFC8", fontWeight: 400, lineHeight: 1.15, marginBottom: 20 }}>
            Let's Build <span style={{ fontStyle: "italic", color: "#D4AF37" }}>Together</span>
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#6B6558", maxWidth: 480, margin: "0 auto", lineHeight: 1.8 }}>
            Reach out to discuss your requirements. Our team is ready to help you source the finest quality products.
          </p>
        </div>

        {/* Contact Cards */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1,
          background: "rgba(74,124,89,0.08)",
          border: "1px solid rgba(74,124,89,0.1)",
          opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "all 1s ease 0.2s",
        }}>
          {contactItems.map((c, i) => (
            <div key={i}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                padding: "48px 36px",
                background: hovered === i ? "rgba(212,175,55,0.04)" : "#0A140B",
                borderBottom: hovered === i ? "2px solid rgba(212,175,55,0.4)" : "2px solid transparent",
                transition: "all 0.3s ease",
                cursor: "default",
              }}
            >
              <div style={{
                width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center",
                border: `1px solid ${hovered === i ? "rgba(212,175,55,0.3)" : "rgba(74,124,89,0.15)"}`,
                background: hovered === i ? "rgba(212,175,55,0.06)" : "rgba(74,124,89,0.04)",
                color: hovered === i ? "#D4AF37" : "#4A7C59",
                fontSize: 16, marginBottom: 24, transition: "all 0.3s",
                fontFamily: "'DM Sans', sans-serif",
              }}>{c.icon}</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: "#D4AF37", letterSpacing: 3, textTransform: "uppercase", marginBottom: 10, fontWeight: 600 }}>{c.label}</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: hovered === i ? "#B8B0A0" : "#6B6558", lineHeight: 1.8, whiteSpace: "pre-line", transition: "color 0.3s" }}>{c.value}</div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{
          marginTop: 56, display: "flex", flexDirection: "column", alignItems: "center", gap: 20,
          opacity: visible ? 1 : 0, transition: "all 1s ease 0.4s",
        }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#4A4639", letterSpacing: 2, textTransform: "uppercase" }}>Prefer to write directly?</p>
          <a href="mailto:exports@apamra.com" style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            padding: "18px 48px",
            border: "1px solid rgba(212,175,55,0.25)",
            background: "rgba(212,175,55,0.04)",
            color: "#D4AF37",
            fontFamily: "'DM Sans', sans-serif", fontSize: 12, letterSpacing: 2.5,
            textTransform: "uppercase", fontWeight: 700,
            textDecoration: "none", transition: "all 0.3s",
          }}
            onMouseEnter={e => { e.currentTarget.style.background = "rgba(212,175,55,0.1)"; e.currentTarget.style.borderColor = "rgba(212,175,55,0.5)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "rgba(212,175,55,0.04)"; e.currentTarget.style.borderColor = "rgba(212,175,55,0.25)"; }}
          >
            <span>◇</span>
            <span>exports@apamra.com</span>
          </a>
        </div>
      </div>
    </section>
  );
};

/* ─── FOOTER ─── */
const Footer = () => (
  <footer style={{ padding: "48px 48px 36px", background: "#070E08", borderTop: "1px solid rgba(74,124,89,0.08)" }}>
    <div style={{ maxWidth: 1240, margin: "0 auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="logo.png" alt="Apamra logo" style={{ width: 36, height: 36, objectFit: "cover", borderRadius: 4 }} />
          <span style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: "#E8DFC8", letterSpacing: 3, fontWeight: 700 }}>APAMRA</span>
        </div>
        <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}>
          {["About", "Products", "Global Reach", "Certifications", "Contact"].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/ /g, "-")}`} style={{
              textDecoration: "none", color: "#4A4639", fontSize: 11,
              fontFamily: "'DM Sans', sans-serif", letterSpacing: 2, textTransform: "uppercase", transition: "color 0.3s",
            }}
              onMouseEnter={e => e.target.style.color = "#D4AF37"}
              onMouseLeave={e => e.target.style.color = "#4A4639"}
            >{l}</a>
          ))}
        </div>
      </div>
      <div style={{ height: 1, background: "rgba(74,124,89,0.06)", marginBottom: 24 }} />
      <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#3A3630" }}>© 2026 Apamra, A Kuber Corporation Enterprise. All rights reserved.</p>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#3A3630" }}>"Shanti Villa", 52 Shakti Nagar, Kanadia Road, Indore – 452 018, M.P., India &nbsp;·&nbsp; kubercorp71@gmail.com</p>
      </div>
    </div>
  </footer>
);

/* ─── GLOBAL STYLES ─── */
const GlobalStyles = () => (
  <style>{`
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:wght@300;400;500;600;700&display=swap');
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { background: #0A140B; overflow-x: hidden; }
    ::selection { background: rgba(212,175,55,0.3); color: #E8DFC8; }
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: #0A140B; }
    ::-webkit-scrollbar-thumb { background: #2A4A2C; }
    ::-webkit-scrollbar-thumb:hover { background: #4A7C59; }
    input::placeholder, textarea::placeholder { color: #3A3630; }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(2deg); }
    }
    @keyframes scrollLine {
      0% { transform: scaleY(0); transform-origin: top; }
      50% { transform: scaleY(1); transform-origin: top; }
      51% { transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; }
    }
    @keyframes pinDrop {
      0% { opacity: 0; transform: translateY(-20px) scale(0); }
      60% { transform: translateY(3px) scale(1.1); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes drawLine {
      from { stroke-dashoffset: 1000; opacity: 0; }
      to { stroke-dashoffset: 0; opacity: 1; }
    }
    @keyframes slideProgress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
    @media (max-width: 1024px) {
      .desktop-nav { display: none !important; }
    }
    @media (max-width: 768px) {
      section { padding-left: 24px !important; padding-right: 24px !important; }
      .hero-content { padding: 0 24px !important; }
    }
    @media (max-width: 600px) {
      .hero-badge {
        padding: 6px 16px !important;
        gap: 8px !important;
        max-width: 100%;
        box-sizing: border-box;
      }
      .hero-badge span {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
      }
    }
    @media (max-width: 380px) {
      .hero-badge {
        padding: 6px 12px !important;
        gap: 6px !important;
      }
      .hero-badge span {
        font-size: 9px !important;
        letter-spacing: 1px !important;
      }
    }
  `}</style>
);

/* ─── APP ─── */
function ApamraWebsite() {
  return (
    <div>
      <GlobalStyles />
      <Navbar />
      <HeroSection />
      <AboutSection />
      <ProductsSection />
      <MapSection />
      <CertificationsSection />
      <ContactSection />
      <Footer />
    </div>
  );
}