const { useState, useEffect, useRef } = React;
const ASSET_BASE = (typeof window !== "undefined" && window.ALHAMZA_ASSET_URL) ? window.ALHAMZA_ASSET_URL : "assets/img/";
const LOGO_WHITE = ASSET_BASE + "logo-white.png";
const LOGO_COLOR = ASSET_BASE + "logo.png";

/* ---------------- helpers ---------------- */
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { setInView(true); obs.unobserve(el); }
      });
    }, { threshold, rootMargin: "0px 0px -60px 0px" });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ as: Tag = "div", delay = "0s", className = "", children, ...rest }) {
  const [ref, inView] = useInView();
  return (
    <Tag ref={ref} className={"reveal-up" + (inView ? " in" : "") + (className ? " " + className : "")} style={{ "--d": delay }} {...rest}>
      {children}
    </Tag>
  );
}

function Icon({ html, box = "0 0 24 24", strokeWidth = "1.6", className, style }) {
  return (
    <svg viewBox={box} className={className} style={style} fill="none" stroke="currentColor" strokeWidth={strokeWidth}
      dangerouslySetInnerHTML={{ __html: html }} />
  );
}

/* ---------------- data ---------------- */
const NAV_LINKS = [
  { href: "#home", label: "Home" },
  { href: "#about", label: "About Us" },
];
const NAV_LINKS_AFTER = [
  { href: "#services", label: "Services" },
  { href: "#network", label: "Markets" },
  { href: "#industries", label: "Industries" },
  { href: "#contact", label: "Contact" },
];
const COMMODITY_DROPDOWN = ["Oilseeds", "Edible Oils", "Pulses", "Feed Ingredients", "Raw Cashew Nuts"];

const COMMODITIES = [
  { img: "https://images.unsplash.com/photo-1601993488142-d3050a16478d?auto=format&fit=crop&w=800&q=80", alt: "Soybeans, an oilseed commodity", title: "Oilseeds", desc: "Soybeans, Canola, Sunflower, Sesame & more", icon: '<path d="M12 2C8 6 6 10 6 13a6 6 0 0 0 12 0c0-3-2-7-6-11z"/>' },
  { img: "https://images.unsplash.com/photo-1552592074-ea7a91b851b3?auto=format&fit=crop&w=800&q=80", alt: "Bottle of edible vegetable oil", title: "Edible Oils", desc: "Crude & refined sunflower, soybean, canola oil & more", icon: '<path d="M12 2s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/>' },
  { img: "https://images.unsplash.com/photo-1644432757699-bb5a01e8fb0e?auto=format&fit=crop&w=800&q=80", alt: "Bowl of chickpeas, a pulse commodity", title: "Pulses", desc: "Lentils, chickpeas, dry peas, black matpe & more", icon: '<rect x="3" y="8" width="18" height="10" rx="5"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/>' },
  { img: "https://images.unsplash.com/reserve/vW7acWlWSk6m3e6HuxsQ_corn.jpg?auto=format&fit=crop&w=800&q=80", alt: "Close-up of grain used for feed ingredients", title: "Feed Ingredients", desc: "Canola meal, soybean meal, sunflower meal & more", icon: '<path d="M4 20l7-16 7 16"/><path d="M7.5 12h7"/>' },
  { img: "https://images.unsplash.com/photo-1573555657105-47a0bb37c3ea?auto=format&fit=crop&w=800&q=80", alt: "Raw cashew nuts", title: "Raw Cashew Nuts", desc: "Raw cashew nuts & other agricultural products", icon: '<path d="M12 3c3 1 6 4 6 9a6 6 0 0 1-12 0c0-5 3-8 6-9z"/>' },
];

const SERVICES = [
  { title: "Commodity Brokerage", icon: '<path d="M3 3v18h18"/><path d="M7 15l4-5 3 3 5-7"/>' },
  { title: "International Trading", icon: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>' },
  { title: "Strategic Sourcing", icon: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>' },
  { title: "Market Intelligence", icon: '<path d="M3 17l5-6 4 4 8-9"/><path d="M15 6h5v5"/>' },
  { title: "Logistics Coordination", icon: '<rect x="1" y="8" width="14" height="8" rx="1"/><path d="M15 11h4l3 3v2h-7z"/><circle cx="5.5" cy="18.5" r="1.6"/><circle cx="17.5" cy="18.5" r="1.6"/>' },
  { title: "Inspection Coordination", icon: '<path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/>' },
  { title: "Supplier Development", icon: '<circle cx="9" cy="7" r="4"/><path d="M2 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/><path d="M17 4a4 4 0 0 1 0 7.75"/>' },
  { title: "Trade Consultation", icon: '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>' },
  { title: "Documentation Support", icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>' },
  { title: "Risk Management", icon: '<path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z"/>' },
];

const INDUSTRIES = [
  { label: "Edible Oil Refineries", icon: '<path d="M3 3v18h18"/><rect x="7" y="12" width="3" height="6"/><rect x="12" y="8" width="3" height="10"/><rect x="17" y="5" width="3" height="13"/>' },
  { label: "Feed Manufacturers", icon: '<path d="M4 20V10l8-6 8 6v10"/><path d="M4 12h16M4 16h16"/>' },
  { label: "Food Processing Companies", icon: '<path d="M21 16V8l-9-5-9 5v8l9 5 9-5z"/><path d="M3.3 8.7L12 13l8.7-4.3M12 13v8"/>' },
  { label: "Importers", icon: '<path d="M5 12h14M13 6l6 6-6 6"/>' },
  { label: "Exporters", icon: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>' },
  { label: "Commodity Traders", icon: '<path d="M3 17l5-6 4 4 8-9"/><path d="M15 6h5v5"/>' },
  { label: "Crushing Plants", icon: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>' },
  { label: "Government Buyers", icon: '<path d="M12 2l9 4.5V12c0 5-3.8 8.7-9 10-5.2-1.3-9-5-9-10V6.5L12 2z"/>' },
];

const WHY_CARDS = [
  { title: "Global Network", desc: "Strong presence across key producing and consuming regions", icon: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>' },
  { title: "Quality Assurance", desc: "International standards with independent quality inspections", icon: '<circle cx="12" cy="8" r="6"/><path d="M9 14l-2 8 5-3 5 3-2-8"/>' },
  { title: "Market Intelligence", desc: "Real-time insights and analysis to help you make informed decisions", icon: '<path d="M3 3v18h18"/><path d="M7 15l4-5 3 3 5-7"/>' },
  { title: "Timely Execution", desc: "Efficient logistics and execution ensuring on-time shipments", icon: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>' },
  { title: "Trusted Partnerships", desc: "Long-term relationships built on trust, transparency and integrity", icon: '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>' },
  { title: "Competitive Pricing", desc: "Access to global markets to ensure the best commercial opportunities", icon: '<path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/>' },
];

const MAP_ROUTES = [
  { region: "na", d: "M170 155 C330 120 420 180 505 250" },
  { region: "sa", d: "M140 330 C260 300 400 260 505 250" },
  { region: "eu", d: "M505 250 C520 190 530 140 555 110" },
  { region: "af", d: "M505 250 C500 280 480 310 460 340" },
  { region: "as", d: "M505 250 C540 245 565 248 585 258" },
  { region: "as", d: "M505 250 C555 265 590 280 615 300" },
  { region: "as", d: "M505 250 C640 190 760 160 850 155" },
  { region: "as", d: "M505 250 C650 280 760 320 820 340" },
  { region: "au", d: "M505 250 C650 340 780 380 855 390" },
];
const MAP_NODES = [
  { region: "na", x: 170, y: 155, label: "Canada", lx: 182, ly: 152 },
  { region: "sa", x: 140, y: 330, label: "Brazil", lx: 152, ly: 327 },
  { region: "sa", x: 120, y: 385, label: "Argentina", lx: 132, ly: 400 },
  { region: "eu", x: 555, y: 110, label: "Black Sea", lx: 567, ly: 107 },
  { region: "af", x: 460, y: 340, label: "Africa", lx: 472, ly: 337 },
  { region: "as", x: 585, y: 258, label: "Pakistan", lx: 597, ly: 255 },
  { region: "as", x: 615, y: 300, label: "India", lx: 627, ly: 297 },
  { region: "as", x: 850, y: 155, label: "China", lx: 862, ly: 152 },
  { region: "as", x: 820, y: 340, label: "Vietnam", lx: 832, ly: 337 },
  { region: "au", x: 855, y: 390, label: "Australia", lx: 867, ly: 387 },
];
const REGION_CHIPS = [
  { key: "all", label: "All Regions" },
  { key: "na", label: "North America" },
  { key: "sa", label: "South America" },
  { key: "eu", label: "Europe" },
  { key: "af", label: "Africa" },
  { key: "as", label: "Asia" },
  { key: "au", label: "Australia" },
];

/* ---------------- Preloader ---------------- */
function Preloader() {
  const [done, setDone] = useState(false);
  useEffect(() => {
    const t1 = setTimeout(() => setDone(true), 1500);
    const onLoad = () => setTimeout(() => setDone(true), 350);
    window.addEventListener("load", onLoad);
    return () => { clearTimeout(t1); window.removeEventListener("load", onLoad); };
  }, []);
  return (
    <div className={"preloader" + (done ? " done" : "")}>
      <img src={LOGO_WHITE} alt="Al Hamza Meridian Trading FZCO" className="preloader-mark" />
    </div>
  );
}

/* ---------------- Header ---------------- */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [navOpen, setNavOpen] = useState(false);
  const [dropOpen, setDropOpen] = useState(false);
  const headerRef = useRef(null);

  useEffect(() => {
    function setHVar() {
      if (headerRef.current) document.documentElement.style.setProperty("--header-h", headerRef.current.offsetHeight + "px");
    }
    function onScroll() { setScrolled(window.scrollY > 40); setHVar(); }
    setHVar();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", setHVar);
    window.addEventListener("load", setHVar);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(setHVar);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", setHVar); };
  }, []);

  function closeMobile() { setNavOpen(false); setDropOpen(false); }

  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")} ref={headerRef}>
      <div className="container header-mainrow">
        <a href="#home" className="brand" onClick={closeMobile}>
          <img src={LOGO_WHITE} alt="Al Hamza Meridian Trading FZCO" className="brand-mark" />
          <span className="brand-text">
            <span className="brand-name">AL HAMZA</span>
            <span className="brand-sub">MERIDIAN TRADING &middot; FZCO</span>
          </span>
        </a>

        <nav className={"main-nav" + (navOpen ? " open" : "")}>
          <ul>
            {NAV_LINKS.map((l) => <li key={l.href}><a href={l.href} onClick={closeMobile}>{l.label}</a></li>)}
            <li className={"has-dropdown" + (dropOpen ? " open" : "")}>
              <a href="#commodities" onClick={(e) => { if (window.innerWidth <= 940) { e.preventDefault(); setDropOpen(!dropOpen); } else { closeMobile(); } }}>
                Commodities <svg width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" /></svg>
              </a>
              <ul className="dropdown">
                {COMMODITY_DROPDOWN.map((c) => <li key={c}><a href="#commodities" onClick={closeMobile}>{c}</a></li>)}
              </ul>
            </li>
            {NAV_LINKS_AFTER.map((l) => <li key={l.href}><a href={l.href} onClick={closeMobile}>{l.label}</a></li>)}
          </ul>
          <a href="#contact" className="btn btn-gold header-cta-mobile" onClick={closeMobile}>Request a Quote</a>
        </nav>

        <a href="#contact" className="btn btn-gold btn-sm header-cta">Request a Quote</a>

        <button className={"nav-toggle" + (navOpen ? " open" : "")} aria-label="Toggle menu" onClick={() => setNavOpen(!navOpen)}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero() {
  const [ref] = useInView();
  return (
    <section className="hero" id="home">
      <div className="hero-bg">
        <img className="hero-photo" src="https://images.unsplash.com/photo-1634638022845-1ab614a94128?auto=format&fit=crop&w=2400&q=80" alt="Cargo ship loaded with containers at sea" />
        <div className="hero-photo-overlay"></div>
        <div className="hero-grid"></div>
        <div className="hero-noise"></div>
      </div>
      <div className="container hero-inner" ref={ref}>
        <p className="eyebrow reveal-up in">Dubai, UAE &mdash; Global Commodity Brokerage</p>
        <h1 className="hero-title reveal-up in" style={{ "--d": "0.08s" }}>Trading Hub.<br />Connecting Markets.<br /><em>Creating Value.</em></h1>
        <p className="hero-sub reveal-up in" style={{ "--d": "0.16s" }}>Al&nbsp;Hamza Meridian Trading FZCO is your trusted global partner in agricultural commodity brokerage, sourcing, and international trade &mdash; connecting buyers and suppliers worldwide with transparency, integrity, and market expertise.</p>
        <div className="hero-cta reveal-up in" style={{ "--d": "0.24s" }}>
          <a href="#contact" className="btn btn-gold">Request a Quote</a>
          <a href="#commodities" className="btn btn-outline-light">Explore Commodities</a>
        </div>
      </div>
      <div className="scroll-cue" aria-hidden="true"><span></span></div>
    </section>
  );
}

/* ---------------- Stats ---------------- */
function Stat({ icon, box, count, suffix, staticVal, label }) {
  const [ref, inView] = useInView(0.6);
  const [val, setVal] = useState(staticVal ? staticVal : "0");
  useEffect(() => {
    if (!inView) return;
    if (staticVal) { setVal(staticVal); return; }
    let start = null;
    const duration = 1400;
    function step(ts) {
      if (!start) start = ts;
      const progress = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setVal(Math.round(eased * count) + suffix);
      if (progress < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }, [inView]);
  return (
    <div className="stat" ref={ref}>
      <Icon html={icon} box={box || "0 0 24 24"} strokeWidth="1.5" />
      <span className="stat-num">{val}</span>
      <span className="stat-label">{label}</span>
    </div>
  );
}

function StatsStrip() {
  return (
    <section className="stats-strip">
      <div className="container stats-grid">
        <Stat icon='<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>' count={20} suffix="+" label="Countries" />
        <Stat icon='<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>' count={100} suffix="+" label="Global Clients" />
        <Stat icon='<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>' count={50} suffix="+" label="Trusted Suppliers" />
        <Stat icon='<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>' staticVal="24/7" label="Market Intelligence" />
      </div>
    </section>
  );
}

/* ---------------- About ---------------- */
function About() {
  return (
    <section className="about" id="about">
      <div className="container about-grid">
        <Reveal className="about-visual">
          <img className="port-photo" src="https://images.unsplash.com/photo-1749849934727-bc57c0bd9dd2?auto=format&fit=crop&w=1400&q=80" alt="Dubai skyline at night" />
          <div className="badge-card">
            <span className="badge-num">15+</span>
            <span className="badge-label">Years of Excellence</span>
          </div>
        </Reveal>
        <Reveal className="about-content" delay="0.1s">
          <p className="eyebrow eyebrow-dark">Who We Are</p>
          <h2>Dubai-Based Global<br />Commodity Partner</h2>
          <p>Al Hamza Meridian Trading FZCO is a premier commodity brokerage and international trading company headquartered in Dubai, UAE. Operating at the crossroads of global trade, we specialise in the sourcing, brokerage, and distribution of agricultural commodities across international markets.</p>
          <p>With a trusted network spanning Australia, Canada, Brazil, the Black Sea, South Asia, and Southeast Asia, we connect buyers and suppliers with unmatched expertise, transparency, and integrity &mdash; building long-term partnerships that create lasting value.</p>
          <ul className="feature-list">
            <li><span className="feature-icon"><Icon html='<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>' /></span>Global Sourcing</li>
            <li><span className="feature-icon"><Icon html='<path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z"/>' /></span>Transparency</li>
            <li><span className="feature-icon"><Icon html='<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>' /></span>Reliable Partnerships</li>
            <li><span className="feature-icon"><Icon html='<circle cx="12" cy="8" r="6"/><path d="M9 14l-2 8 5-3 5 3-2-8"/>' /></span>Commodity Expertise</li>
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Commodities ---------------- */
function Commodities() {
  return (
    <section className="commodities" id="commodities">
      <div className="container">
        <Reveal as="div" className="section-head">
          <p className="eyebrow eyebrow-dark center">What We Trade</p>
          <h2 className="center">Our Commodities</h2>
          <p className="section-sub center">We deal in a wide range of agricultural commodities, sourced responsibly from trusted origins around the world.</p>
          <div className="divider"><span></span><i></i><span></span></div>
        </Reveal>
        <div className="commodity-grid">
          {COMMODITIES.map((c, i) => (
            <Reveal as="div" className="commodity-card" delay={(i * 0.06).toFixed(2) + "s"} key={c.title}>
              <div className="commodity-photo">
                <img src={c.img} alt={c.alt} />
                <span className="commodity-badge"><Icon html={c.icon} /></span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
function Services() {
  return (
    <section className="services" id="services">
      <div className="container">
        <Reveal as="div" className="section-head">
          <p className="eyebrow eyebrow-dark center">What We Do</p>
          <h2 className="center">Our Services</h2>
          <p className="section-sub center">End-to-end solutions tailored to your business needs &mdash; from sourcing and brokerage to logistics and documentation.</p>
          <div className="divider"><span></span><i></i><span></span></div>
        </Reveal>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <Reveal as="div" className="service-card" delay={((i % 5) * 0.04).toFixed(2) + "s"} key={s.title}>
              <span className="svc-icon"><Icon html={s.icon} /></span>
              <h4>{s.title}</h4>
            </Reveal>
          ))}
        </div>
        <div className="center" style={{ marginTop: "2.75rem" }}>
          <a href="#contact" className="btn btn-gold">Request a Quote <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Industries ---------------- */
function Industries() {
  return (
    <section className="industries" id="industries">
      <div className="container">
        <Reveal as="div" className="section-head">
          <p className="eyebrow eyebrow-dark center">Who We Serve</p>
          <h2 className="center">Industries We Serve</h2>
          <p className="section-sub center">Tailored commodity solutions for every sector across the agricultural supply chain.</p>
          <div className="divider"><span></span><i></i><span></span></div>
        </Reveal>
        <div className="industries-grid">
          {INDUSTRIES.map((ind, i) => (
            <Reveal as="div" className="industry-card" delay={((i % 4) * 0.04).toFixed(2) + "s"} key={ind.label}>
              <span className="ind-icon"><Icon html={ind.icon} /></span>
              <span>{ind.label}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Why Choose ---------------- */
function WhyChoose() {
  return (
    <section className="why-choose">
      <div className="container why-grid">
        <Reveal className="why-content">
          <p className="eyebrow eyebrow-dark">Our Advantage</p>
          <h2>Why Choose<br />Al Hamza<br />Meridian?</h2>
          <hr />
          <p>We deliver value through expertise, global reach, and an unwavering commitment to our partners. With over a decade in commodity markets, we bring unparalleled sourcing capability, transparent business practices, and reliable execution to every trade.</p>
          <a href="#contact" className="btn btn-navy">Partner With Us <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </Reveal>
        <div className="why-cards">
          {WHY_CARDS.map((w, i) => (
            <Reveal as="div" className="why-card" delay={((i % 3) * 0.06).toFixed(2) + "s"} key={w.title}>
              <span className="why-icon"><Icon html={w.icon} /></span>
              <h4>{w.title}</h4><p>{w.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Trading network map ---------------- */
function Network() {
  const [mapRef, mapInView] = useInView(0.3);
  const [region, setRegion] = useState("all");
  return (
    <section className="network" id="network">
      <div className="container">
        <Reveal as="div" className="section-head">
          <p className="eyebrow center">Our Reach</p>
          <h2 className="center light">Our Trading Network</h2>
          <p className="section-sub light center">Headquartered in Dubai, we connect commodity producers and buyers across four continents through trusted trade routes.</p>
          <div className="divider"><span></span><i></i><span></span></div>
        </Reveal>

        <Reveal as="div" className="network-legend">
          <span><i className="dot dot-gold"></i>Dubai HQ</span>
          <span><i className="dot dot-green"></i>Trading Partner</span>
          <span><i className="dot dot-line"></i>Trade Route</span>
        </Reveal>

        <Reveal as="div" className="region-chips">
          {REGION_CHIPS.map((c) => (
            <button key={c.key} className={"chip" + (region === c.key ? " active" : "")} onClick={() => setRegion(c.key)}>{c.label}</button>
          ))}
        </Reveal>

        <Reveal as="div" className="map-wrap">
          <svg viewBox="0 0 1000 500" className="world-map" ref={mapRef} aria-label="Al Hamza Meridian trade route map">
            <g className="landmass" fill="#173a63">
              <path d="M60 90 C120 40 210 55 250 100 C300 150 230 210 170 220 C90 230 20 160 60 90Z" />
              <path d="M120 260 C180 250 210 300 190 360 C170 430 90 460 70 400 C50 340 70 270 120 260Z" />
              <path d="M430 40 C520 10 620 40 650 90 C690 150 640 190 560 190 C500 190 420 130 430 40Z" />
              <path d="M430 200 C520 190 560 260 540 330 C520 410 440 440 410 370 C390 310 400 220 430 200Z" />
              <path d="M560 200 C650 190 720 250 700 330 C680 410 590 420 560 350 C540 290 520 220 560 200Z" />
              <path d="M700 90 C800 60 920 100 930 160 C940 220 830 230 760 200 C700 175 660 110 700 90Z" />
              <path d="M790 300 C860 280 930 320 920 380 C910 440 830 450 800 400 C780 360 770 315 790 300Z" />
            </g>
            <g className="routes" fill="none" stroke="#c9a44c" strokeWidth="1.4" strokeDasharray="5 6" opacity="0.85">
              {MAP_ROUTES.map((r, i) => {
                const hidden = region !== "all" && region !== r.region;
                return (
                  <path key={i} d={r.d} className={hidden ? "hidden-route" : ""}
                    style={{ strokeDasharray: 400, strokeDashoffset: mapInView ? 0 : 400, transition: `stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) ${i * 0.14}s` }} />
                );
              })}
            </g>
            <g className="nodes" fontFamily="Inter, sans-serif" fontSize="13" fill="#eef2f8">
              <g className="node hq">
                <circle cx="505" cy="250" r="7" fill="#e8c873" />
                <circle cx="505" cy="250" r="14" fill="none" stroke="#e8c873" strokeWidth="1.5" opacity="0.5" />
                <text x="518" y="246" fontWeight="600" fill="#e8c873">Dubai HQ</text>
              </g>
              {MAP_NODES.map((n, i) => {
                const hidden = region !== "all" && region !== n.region;
                return (
                  <g key={i} className={"node" + (hidden ? " hidden-node" : "")}>
                    <circle cx={n.x} cy={n.y} r="5" fill="#3f9d6c" />
                    <text x={n.lx} y={n.ly}>{n.label}</text>
                  </g>
                );
              })}
            </g>
          </svg>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- CTA banner ---------------- */
function CtaBanner() {
  return (
    <section className="cta-banner">
      <img className="cta-photo" src="https://images.unsplash.com/photo-1634638022845-1ab614a94128?auto=format&fit=crop&w=2400&q=80" alt="Cargo ship loaded with containers" />
      <div className="cta-overlay"></div>
      <Reveal as="div" className="container cta-content">
        <p className="eyebrow">Start Trading Today</p>
        <h2>Ready to Trade Globally?</h2>
        <p>Partner with Al Hamza Meridian Trading FZCO for reliable supply, competitive pricing, and global market expertise.</p>
        <div className="hero-cta">
          <a href="#contact" className="btn btn-gold">Request a Quote</a>
          <a href="#contact" className="btn btn-outline-light">Contact Us</a>
        </div>
      </Reveal>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function Contact() {
  const [note, setNote] = useState("");
  const formRef = useRef(null);
  function onSubmit(e) {
    e.preventDefault();
    setNote("Thank you — your enquiry has been received. Our team will contact you shortly.");
    if (formRef.current) formRef.current.reset();
  }
  return (
    <section className="contact" id="contact">
      <div className="container">
        <Reveal as="div" className="section-head">
          <p className="eyebrow eyebrow-dark center">Get In Touch</p>
          <h2 className="center">Contact Us</h2>
          <p className="section-sub center">Our trading specialists are ready to assist you.</p>
          <div className="divider"><span></span><i></i><span></span></div>
        </Reveal>

        <div className="contact-grid">
          <Reveal as="div" className="contact-info">
            <div className="office-card">
              <p className="eyebrow" style={{ color: "#e8c873" }}>Dubai Head Office</p>
              <ul>
                <li><Icon html='<path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>' /><span>Al Hamza Meridian Trading FZCO<br />IFZA, DSA, Dubai, United Arab Emirates</span></li>
                <li><Icon html='<path d="M22 6l-10 7L2 6"/><path d="M2 6h20v12H2z"/>' /><span><a href="mailto:info@alhamzameridian.com">info@alhamzameridian.com</a></span></li>
                <li><Icon html='<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.34 1.78.65 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.22a2 2 0 0 1 2.11-.45c.84.31 1.72.53 2.62.65A2 2 0 0 1 22 16.92z"/>' /><span><a href="tel:+971551531788">+971 55 153 1788</a></span></li>
                <li><Icon html='<path d="M21 11.5a8.5 8.5 0 0 1-12.4 7.55L3 20l1.05-5.4A8.5 8.5 0 1 1 21 11.5z"/>' /><span><a href="https://wa.me/971551531788" target="_blank" rel="noopener">+971 55 153 1788 (WhatsApp)</a></span></li>
              </ul>
            </div>
            <div className="skyline-wrap">
              <img className="skyline" src="https://images.unsplash.com/photo-1749849934727-bc57c0bd9dd2?auto=format&fit=crop&w=1200&q=80" alt="Dubai skyline at night" />
              <span className="pin"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>DUBAI, UAE</span>
            </div>
          </Reveal>

          <Reveal as="form" className="contact-form" delay="0.1s" onSubmit={onSubmit} ref={formRef}>
            <div className="form-row">
              <div className="form-group"><label>Full Name</label><input type="text" name="name" placeholder="John Smith" required /></div>
              <div className="form-group"><label>Email Address</label><input type="email" name="email" placeholder="john@company.com" required /></div>
            </div>
            <div className="form-row">
              <div className="form-group"><label>Phone / WhatsApp</label><input type="tel" name="phone" placeholder="+1 234 567 8900" /></div>
              <div className="form-group">
                <label>Commodity Interest</label>
                <select name="commodity" defaultValue="">
                  <option value="">Select commodity...</option>
                  <option>Oilseeds</option><option>Edible Oils</option><option>Pulses</option><option>Feed Ingredients</option><option>Raw Cashew Nuts</option><option>Other</option>
                </select>
              </div>
            </div>
            <div className="form-group"><label>Message</label><textarea name="message" rows="5" placeholder="Describe your requirements — commodity type, quantity, origin, and delivery destination..." required></textarea></div>
            <button type="submit" className="btn btn-navy btn-full">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2L11 13" /><path d="M22 2l-7 20-4-9-9-4 20-7z" /></svg>
              Send Enquiry
            </button>
            <p className="form-note">{note}</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const [subMsg, setSubMsg] = useState("Your email address");
  function onSubscribe(e) {
    e.preventDefault();
    e.target.reset();
    setSubMsg("Subscribed! Thank you.");
  }
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <img src={LOGO_WHITE} alt="Al Hamza Meridian Trading FZCO" className="footer-logo" />
          <div className="footer-brand-text">
            <span className="brand-name">AL HAMZA</span>
            <span className="brand-sub">MERIDIAN TRADING &middot; FZCO</span>
          </div>
          <p>Dubai-based global commodity brokerage connecting markets across 20+ countries with transparency, integrity, and expertise.</p>
          <div className="social-row">
            <a href="#" aria-label="LinkedIn">in</a>
            <a href="#" aria-label="Twitter">tw</a>
            <a href="#" aria-label="Facebook">fb</a>
            <a href="https://wa.me/971551531788" target="_blank" rel="noopener" aria-label="WhatsApp">wa</a>
          </div>
        </div>
        <div className="footer-col">
          <h5>Quick Links</h5>
          <ul>
            <li><a href="#home">Home</a></li><li><a href="#about">About Us</a></li><li><a href="#commodities">Commodities</a></li>
            <li><a href="#services">Services</a></li><li><a href="#network">Global Markets</a></li><li><a href="#industries">Industries</a></li><li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Products</h5>
          <ul>
            <li><a href="#commodities">Oilseeds</a></li><li><a href="#commodities">Edible Oils</a></li><li><a href="#commodities">Pulses</a></li>
            <li><a href="#commodities">Feed Ingredients</a></li><li><a href="#commodities">Raw Cashew Nuts</a></li><li><a href="#commodities">Agricultural Commodities</a></li>
          </ul>
        </div>
        <div className="footer-col footer-news">
          <h5>Market Insights</h5>
          <p>Subscribe for weekly commodity market updates and trade intelligence.</p>
          <form className="news-form" onSubmit={onSubscribe}>
            <input type="email" placeholder={subMsg} required />
            <button type="submit" aria-label="Subscribe"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2L11 13" /><path d="M22 2l-7 20-4-9-9-4 20-7z" /></svg></button>
          </form>
          <p className="reg-note">Registered in IFZA, Dubai, UAE</p>
        </div>
      </div>
      <div className="footer-bottom">
        <div className="container footer-bottom-inner">
          <p>&copy; {new Date().getFullYear()} Al Hamza Meridian Trading FZCO. All rights reserved.</p>
          <div className="footer-legal"><a href="#">Privacy Policy</a><a href="#">Terms of Trade</a><a href="#">Disclaimer</a></div>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Back to top ---------------- */
function BackToTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    function onScroll() { setShow(window.scrollY > 700); }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button className={"back-to-top" + (show ? " show" : "")} aria-label="Back to top" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
    </button>
  );
}

/* ---------------- App ---------------- */
function App() {
  return (
    <React.Fragment>
      <Preloader />
      <Header />
      <Hero />
      <StatsStrip />
      <About />
      <Commodities />
      <Services />
      <Industries />
      <WhyChoose />
      <Network />
      <CtaBanner />
      <Contact />
      <Footer />
      <BackToTop />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);