// ============================================================
// Yogeshwari Agro Products — shared components and catalog data
// Loaded on every page. All exports attached to window.
// ============================================================

(function () {
    const { useState, useEffect, useRef } = React;
    const Motion = window.FramerMotion || window.Motion;
    const { motion, AnimatePresence } = Motion;

    // Image base — sourced from the user's other brand site (same owner)
    const IMG = 'https://www.exlonfood.com/images/16-12/';

    // ---- Catalog ----
    const PRODUCT_CATALOG = {
        dehydrated: {
            title: "Dehydrated Foods",
            shortTitle: "Dehydrated",
            desc: "Hot-air drying of vegetables and roots to low-moisture benchmarks while preserving aroma, colour and shelf-life.",
            cover: IMG + 'onion-dehydrated.png',
            accent: '#d8a87c',
            items: [
                { name: "Onion (White & Red)", types: ["Flakes", "Powder", "Kibbled", "Chopped", "Minced", "Granules"], img: IMG + 'onion-dehydrated.png' },
                { name: "Garlic", types: ["Flakes", "Powder", "Granules", "Minced"], img: IMG + 'garlic-dehydrated.png' },
                { name: "Ginger", types: ["Slices", "Whole Dried", "Granules", "Powder"], img: IMG + 'ginger-dehydrated.png' },
                { name: "Tomato", types: ["Flakes", "Powder", "Granules"], img: IMG + 'tomato-dehydrated.png' },
                { name: "Carrot", types: ["Dices", "Flakes", "Granules"], img: IMG + 'carrot-dehydrated.png' },
                { name: "Beetroot", types: ["Dices", "Flakes", "Powder"], img: IMG + 'beetroot-dehydrated.png' },
                { name: "Cabbage", types: ["Flakes", "Powder"], img: IMG + 'cabbage-dehydrated.png' },
                { name: "French Beans", types: ["Dices", "Whole"], img: IMG + 'french-beans-dehydrated.png' },
                { name: "Mixed Vegetables", types: ["Standard Mix", "Soup Mix"], img: IMG + 'mixed-vegetables-dehydrated.png' },
                { name: "Green Chilli", types: ["Flakes", "Whole", "Powder"], img: IMG + 'green-chilli-dehydrated.png' },
                { name: "Potato", types: ["Flakes", "Granules"], img: IMG + 'potato-dehydrated.png' },
                { name: "Raw Mango Powder", types: ["Fine Powder", "Coarse"], img: IMG + 'raw-mango-powder-dehydrated.png' },
                { name: "Tamarind", types: ["Powder", "Concentrate"], img: IMG + 'tamarind-dehydrated.png' },
                { name: "Moringa", types: ["Leaf Powder", "Whole Dried"], img: IMG + 'moringa-dehydrated.png' }
            ]
        },
        driedLeaves: {
            title: "Dried Leaves & Herbs",
            shortTitle: "Herbs",
            desc: "Carefully air-dried culinary leaves and herbs that retain their natural essential oils and authentic flavour.",
            cover: IMG + 'dried-oregano.png',
            accent: '#87a878',
            items: [
                { name: "Oregano Leaves", types: ["Whole", "Crushed", "Powder"], img: IMG + 'dried-oregano.png' },
                { name: "Curry Leaves", types: ["Whole Dried", "Flakes", "Powder"], img: IMG + 'dried-curry-leaves.png' },
                { name: "Mint Leaves", types: ["Whole", "Crushed"], img: IMG + 'dried-mint-leaves.png' },
                { name: "Spinach Leaves", types: ["Flakes", "Powder"], img: IMG + 'dried-spinach.png' },
                { name: "Kasuri Methi (Fenugreek)", types: ["Whole Dried", "Crushed"], img: IMG + 'dried-kasturi-methi.png' }
            ]
        },
        sprayDried: {
            title: "Spray Dried Powders",
            shortTitle: "Spray Dried",
            desc: "Atomized fruit and natural-sweetener powders produced under low-temperature conditions for functional and instant applications.",
            cover: IMG + 'raw-mango-powder-dehydrated.png',
            accent: '#f0a868',
            items: [
                { name: "Mango Fruit Powder", types: ["Alphonso", "Totapuri", "Kesar"], img: IMG + 'mango-fruit-powder.png' },
                { name: "Banana Powder", types: ["Ripe", "Raw"], img: IMG + 'banana-fruit-powder.png' },
                { name: "Pomegranate Powder", types: ["Juice Powder", "Whole Fruit"] },
                { name: "Strawberry Powder", types: ["Pulp Powder", "Juice Powder"], img: IMG + 'strawberry-fruit-powder.png' },
                { name: "Guava Powder", types: ["Pulp Powder", "Juice Powder"], img: IMG + 'guava-fruit-powder.png' },
                { name: "Tomato Powder", types: ["Standard", "Premium"] }
            ]
        },
        frozen: {
            title: "Frozen Foods (IQF)",
            shortTitle: "Frozen",
            desc: "Individually Quick Frozen fruit, vegetables and mixes that lock-in freshness, texture and nutritional integrity.",
            cover: IMG + 'iqf-guava.png',
            accent: '#8db8d8',
            items: [
                { name: "IQF Guava", types: ["Dices", "Slices"], img: IMG + 'iqf-guava.png' },
                { name: "IQF Mango Chunks", types: ["Alphonso", "Kesar", "Totapuri"] },
                { name: "Frozen Sweet Corn", types: ["Whole Kernel", "On-the-Cob"] },
                { name: "IQF Mixed Vegetables", types: ["Standard Mix", "Stir-Fry Mix", "Soup Mix"] }
            ]
        },
        rice: {
            title: "Rice",
            shortTitle: "Rice",
            desc: "Premium and commodity rice lines sourced from established Indian growing belts for retail, industrial and ethanol use.",
            cover: IMG + 'basmati.png',
            accent: '#c8b878',
            items: [
                { name: "Ethanol-Grade Broken Rice", types: ["100% Broken", "Mixed"], img: IMG + 'ethanol.png' },
                { name: "Basmati Rice", types: ["1121 Steam", "1509", "Pusa"], img: IMG + 'basmati.png' },
                { name: "IR 64 Parboiled", types: ["5% Broken", "25% Broken"], img: IMG + 'ir-64.png' },
                { name: "Sona Masoori", types: ["Raw", "Steam"], img: IMG + 'sona-masoori.png' },
                { name: "Kolam", types: ["Raw", "Aged"], img: IMG + 'kolam.png' },
                { name: "Indrayani", types: ["Raw", "Aged"], img: IMG + 'indrayani.png' }
            ]
        },
        spices: {
            title: "Spices",
            shortTitle: "Spices",
            desc: "Whole and ground spices milled on controlled, low-temperature systems to retain colour, pungency and volatile oils.",
            cover: IMG + 'turmeric.png',
            accent: '#c85838',
            items: [
                { name: "Turmeric", types: ["Whole Finger", "Powder", "Curcumin Grade"], img: IMG + 'turmeric.png' },
                { name: "Red Chilli", types: ["Whole", "Powder", "Crushed", "Stemless"], img: IMG + 'chili.png' },
                { name: "Cumin", types: ["Whole Seed", "Powder"], img: IMG + 'cumin.png' },
                { name: "Clove", types: ["Whole", "Powder"], img: IMG + 'clove.png' },
                { name: "Cinnamon", types: ["Whole Quills", "Powder"], img: IMG + 'cinnamon.png' },
                { name: "Cardamom", types: ["Green", "Black", "Whole"], img: IMG + 'cardamom.png' }
            ]
        },
        maize: {
            title: "Maize",
            shortTitle: "Maize",
            desc: "Yellow maize sourced in bulk for feed, food processing and starch industries.",
            cover: IMG + 'maize.png',
            accent: '#e8b848',
            items: [
                { name: "Yellow Maize", types: ["Feed Grade", "Food Grade", "Hybrid Lots"], img: IMG + 'maize.png' }
            ]
        },
        makhana: {
            title: "Makhana",
            shortTitle: "Makhana",
            desc: "Fox nuts sorted to size grades for snacks, gifting and HoReCa channels.",
            cover: IMG + 'raw-makhana.png',
            accent: '#d4b896',
            items: [
                { name: "Raw Makhana", types: ["4 Suta", "5 Suta", "6 Suta"], img: IMG + 'raw-makhana.png' },
                { name: "Roasted Makhana", types: ["Plain", "Salted", "Masala"], img: IMG + 'roasted-makhana.png' }
            ]
        },
        jaggery: {
            title: "Jaggery",
            shortTitle: "Jaggery",
            desc: "Natural cane sugars in traditional and modern formats for retail and food-ingredient use.",
            cover: null,
            accent: '#a87858',
            items: [
                { name: "Jaggery Blocks", types: ["Light", "Dark", "Organic"] },
                { name: "Jaggery Powder", types: ["Fine", "Coarse", "Organic"] },
                { name: "Liquid Jaggery", types: ["Bulk", "Retail Packs"] }
            ]
        }
    };

    // ---- Facility images ----
    const FACILITY_IMG = 'https://www.exlonfood.com/images/facility/';
    const FACILITY_IMAGES = [
        { src: FACILITY_IMG + 'facility1.png', title: 'Continuous Drying Line', caption: '5-layer continuous tunnel, 6 tons/day on TFH hot air' },
        { src: FACILITY_IMG + 'facility2.png', title: 'Heat Pump Dryers', caption: '2 units · 500 kg per batch · 8–9 hours per cycle' },
        { src: FACILITY_IMG + 'facility3.png', title: 'Freezing & Freeze-Drying', caption: 'Blast freezer + freeze drying unit · 250 kg per batch' },
        { src: FACILITY_IMG + 'facility4.png', title: 'Spice Grinding Lines', caption: 'Rieco ACM mills · turmeric & chilli/seed lines · 500 kg/hr each' },
        { src: FACILITY_IMG + 'facility5.png', title: 'Automated Packaging', caption: 'Wraptech VFFS lines · 5g–1000g packs · up to 65/min' },
    ];

    // ---- Leadership ----
    const LEADERSHIP = [
        { name: 'Mr. Pranav Sudhir Kulkarni', role: 'CEO', initials: 'PK', photo: 'assets/pranav-kulkarni.png',
          bio: 'Leads strategy, sourcing, processing operations and commercial relationships.' },
        { name: 'Mrs. Deepali Sudhir Kulkarni', role: 'Proprietor', initials: 'DK', photo: 'assets/deepali-kulkarni.png',
          bio: 'Proprietor of Yogeshwari Agro Products, overseeing governance and direction of the firm.' },
    ];

    // ---- Buyer reviews ----
    const REVIEWS = [
        {
            quote: "We've been sourcing dehydrated onion flakes and garlic powder from Yogeshwari for the past several months. Moisture levels are consistent batch to batch — exactly what our blending line needs. Documentation is clean and dispatch is always on time.",
            name: "Rajesh Mehta",
            role: "Procurement Head",
            company: "Spice Blending Unit, Pune"
        },
        {
            quote: "Switched to Yogeshwari for our turmeric and red chilli supply after quality issues with our previous vendor. The colour value and pungency have been noticeably better, and Pranav responds quickly whenever we need a custom mesh size.",
            name: "Anita Sharma",
            role: "Operations Manager",
            company: "FMCG Ingredients Manufacturer, Mumbai"
        },
        {
            quote: "We needed a reliable source for IQF guava for our juice processing plant. Yogeshwari delivered a clean, well-frozen product with proper cold chain documentation. Will continue for the next season.",
            name: "Sunil Patil",
            role: "Purchase Manager",
            company: "Fruit Processing Plant, Nashik"
        },
        {
            quote: "Good quality broken rice at fair rates. We've been taking regular lots for our ethanol plant and the procurement team is easy to work with. No surprises on quantity or delivery.",
            name: "Deepak Agarwal",
            role: "Senior Buyer",
            company: "Distillery & Ethanol Plant, Aurangabad"
        },
    ];

    // ---- Small icon ----
    const ArrowUpRight = () => (
        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="7" y1="17" x2="17" y2="7"></line>
            <polyline points="7 7 17 7 17 17"></polyline>
        </svg>
    );

    // ---- Star icon for reviews ----
    const StarFilled = () => (
        <svg className="h-3.5 w-3.5 text-black" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
    );

    // ---- Looping background video ----
    const FadingVideo = ({ src, fullViewport = false }) => {
        const videoRef = useRef(null);
        useEffect(() => {
            const v = videoRef.current;
            if (!v) return;
            v.loop = true;
            v.muted = true;
            v.playsInline = true;
            v.play().catch(() => {});
        }, []);

        if (fullViewport) {
            return (
                <video ref={videoRef} src={src}
                    className="absolute inset-0 w-full h-full object-cover select-none pointer-events-none"
                    muted playsInline preload="auto" autoPlay loop />
            );
        }
        return (
            <video ref={videoRef} src={src}
                className="absolute w-full object-cover select-none pointer-events-none"
                style={{ inset: 'auto 0 0 0', top: '300px', height: 'calc(100vh - 300px)' }}
                muted playsInline preload="auto" autoPlay loop />
        );
    };

    // ---- Site-wide ambient background ----
    const SiteBackground = () => (
        <div className="fixed inset-0 z-0 select-none pointer-events-none overflow-hidden">
            <FadingVideo src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4" fullViewport />
            <div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-white/15 mix-blend-multiply pointer-events-none" />
        </div>
    );

    // ---- Shared brand mark ----
    const BrandMark = ({ size = 'md' }) => {
        const heightClass = size === 'lg' ? 'h-12 sm:h-16' : 'h-9 sm:h-12';
        return (
            <a href="index.html" className="inline-flex items-center leading-none">
                <img src="assets/logo.png" alt="Yogeshwari Agro Products"
                     className={`${heightClass} w-auto object-contain`} />
            </a>
        );
    };

    // ---- Reviews section ----
    const ReviewsSection = () => {
        const [active, setActive] = useState(0);

        useEffect(() => {
            const t = setInterval(() => setActive(v => (v + 1) % REVIEWS.length), 5000);
            return () => clearInterval(t);
        }, []);

        return (
            <section className="relative z-10 bg-white/35 backdrop-blur-md py-16 md:py-28 px-4 sm:px-6">
                <div className="max-w-7xl mx-auto">
                    <div className="text-xs font-body tracking-[0.22em] uppercase text-muted mb-3">— Buyer Feedback</div>
                    <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl text-black tracking-[-1.2px] leading-[1.02] mb-10 sm:mb-14 max-w-3xl">
                        What buyers say <span className="italic text-muted">on the ground.</span>
                    </h2>

                    {/* Large featured review */}
                    <div className="relative overflow-hidden">
                        <AnimatePresence mode="wait">
                            <motion.div
                                key={`review-${active}`}
                                initial={{ opacity: 0, y: 16 }}
                                animate={{ opacity: 1, y: 0 }}
                                exit={{ opacity: 0, y: -16 }}
                                transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                                className="p-8 sm:p-12 rounded-3xl bg-white border border-black/[0.06] shadow-sm"
                            >
                                {/* Stars */}
                                <div className="flex gap-1 mb-6">
                                    {[...Array(5)].map((_, i) => <StarFilled key={i} />)}
                                </div>
                                <blockquote className="font-heading text-2xl sm:text-3xl md:text-4xl text-black tracking-[-0.5px] leading-[1.2] max-w-4xl">
                                    "{REVIEWS[active].quote}"
                                </blockquote>
                                <div className="mt-8 flex items-center gap-4">
                                    <div className="w-10 h-10 rounded-full bg-black flex items-center justify-center flex-shrink-0">
                                        <span className="text-white font-body text-xs font-semibold">
                                            {REVIEWS[active].name.split(' ').map(w => w[0]).join('').slice(0,2)}
                                        </span>
                                    </div>
                                    <div>
                                        <div className="font-body text-sm font-semibold text-black">{REVIEWS[active].name}</div>
                                        <div className="font-body text-xs text-muted mt-0.5">{REVIEWS[active].role} · {REVIEWS[active].company}</div>
                                    </div>
                                </div>
                            </motion.div>
                        </AnimatePresence>
                    </div>

                    {/* Dot navigation + mini cards */}
                    <div className="mt-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
                        {/* Dots */}
                        <div className="flex gap-2">
                            {REVIEWS.map((_, i) => (
                                <button
                                    key={i}
                                    onClick={() => setActive(i)}
                                    className={`h-1.5 rounded-full transition-all duration-300 ${i === active ? 'w-6 bg-black' : 'w-1.5 bg-black/20 hover:bg-black/40'}`}
                                />
                            ))}
                        </div>
                        {/* Mini preview cards */}
                        <div className="hidden md:flex gap-3">
                            {REVIEWS.map((r, i) => (
                                <button
                                    key={i}
                                    onClick={() => setActive(i)}
                                    className={`px-4 py-2.5 rounded-xl border text-left transition-all duration-200 ${i === active ? 'border-black/20 bg-white shadow-sm' : 'border-black/[0.05] bg-white/40 hover:bg-white/70'}`}
                                >
                                    <div className="font-body text-xs font-semibold text-black">{r.name}</div>
                                    <div className="font-body text-[10px] text-muted mt-0.5">{r.role}</div>
                                </button>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        );
    };

    // ---- WhatsApp floating button ----
    const WhatsAppButton = () => {
        const [visible, setVisible] = useState(false);
        const [hovered, setHovered] = useState(false);

        // Show after 2s so it doesn't distract on landing
        useEffect(() => {
            const t = setTimeout(() => setVisible(true), 2000);
            return () => clearTimeout(t);
        }, []);

        const href = "https://wa.me/919307499973?text=" + encodeURIComponent("Hi, I'd like to enquire about your products.");

        return (
            <AnimatePresence>
                {visible && (
                    <motion.a
                        href={href}
                        target="_blank"
                        rel="noopener noreferrer"
                        initial={{ opacity: 0, scale: 0.7, y: 20 }}
                        animate={{ opacity: 1, scale: 1, y: 0 }}
                        exit={{ opacity: 0, scale: 0.7, y: 20 }}
                        transition={{ type: 'spring', damping: 18, stiffness: 280 }}
                        onMouseEnter={() => setHovered(true)}
                        onMouseLeave={() => setHovered(false)}
                        className="fixed bottom-6 right-6 z-[9998] flex items-center gap-3 shadow-xl"
                        aria-label="Chat on WhatsApp"
                    >
                        {/* Label pill — slides in on hover */}
                        <AnimatePresence>
                            {hovered && (
                                <motion.div
                                    key="whatsapp-tooltip"
                                    initial={{ opacity: 0, x: 10 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    exit={{ opacity: 0, x: 10 }}
                                    transition={{ duration: 0.18 }}
                                    className="bg-white border border-black/[0.06] rounded-full px-4 py-2 text-sm font-medium font-body text-black shadow-md whitespace-nowrap"
                                >
                                    Chat on WhatsApp
                                </motion.div>
                            )}
                        </AnimatePresence>
                        {/* Green button */}
                        <div className="w-14 h-14 rounded-full flex items-center justify-center flex-shrink-0 transition-transform duration-200 hover:scale-110 active:scale-95"
                             style={{ background: '#25D366' }}>
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                            </svg>
                        </div>
                    </motion.a>
                )}
            </AnimatePresence>
        );
    };

    // ---- Top Nav ----
    const Nav = ({ current = 'home', onOpenProducts }) => {
        const [openProducts, setOpenProducts] = useState(false);
        const [mobileOpen, setMobileOpen] = useState(false);
        const [mobileProducts, setMobileProducts] = useState(false);
        const [mounted, setMounted] = useState(false);

        const linkCls = (key) =>
            `text-sm font-medium transition-colors ${current === key ? 'text-black' : 'text-muted hover:text-black'}`;

        useEffect(() => {
            document.body.style.overflow = mobileOpen ? 'hidden' : '';
            return () => { document.body.style.overflow = ''; };
        }, [mobileOpen]);

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

        const MobileDrawer = mounted ? ReactDOM.createPortal(
            <AnimatePresence>
                {mobileOpen && (
                    <motion.div
                        key="mobile-drawer"
                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                        transition={{ duration: 0.2 }}
                        className="fixed inset-0 z-[9999] bg-white flex flex-col"
                        style={{ touchAction: 'none' }}
                    >
                        <div className="flex justify-between items-center px-4 py-4 border-b border-black/[0.06]">
                            <BrandMark />
                            <button
                                onClick={() => setMobileOpen(false)}
                                aria-label="Close menu"
                                className="pointer-events-auto w-10 h-10 flex items-center justify-center rounded-full border border-black/10 bg-white active:bg-neutral-100 transition-colors">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                                    <line x1="18" y1="6" x2="6" y2="18"/>
                                    <line x1="6" y1="6" x2="18" y2="18"/>
                                </svg>
                            </button>
                        </div>
                        <div className="flex-1 overflow-y-auto px-6 py-8 font-body">
                            <div className="flex flex-col">
                                <a href="index.html" className="py-4 text-2xl font-heading text-black border-b border-black/[0.06]">Home</a>
                                <a href="about.html" className="py-4 text-2xl font-heading text-black border-b border-black/[0.06]">About</a>
                                <button
                                    onClick={() => setMobileProducts((v) => !v)}
                                    className="py-4 text-2xl font-heading text-black border-b border-black/[0.06] flex items-center justify-between">
                                    Products
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                                         style={{ transform: mobileProducts ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform .2s' }}>
                                        <polyline points="6 9 12 15 18 9"/>
                                    </svg>
                                </button>
                                {mobileProducts && (
                                    <div className="py-2 grid grid-cols-1 gap-1 border-b border-black/[0.06]">
                                        {Object.keys(PRODUCT_CATALOG).map((k) => (
                                            <a key={k} href={`index.html#products`}
                                               onClick={(e) => {
                                                   if (onOpenProducts) { e.preventDefault(); onOpenProducts(k); setMobileOpen(false); }
                                               }}
                                               className="px-2 py-3 text-base text-muted hover:text-black">
                                                {PRODUCT_CATALOG[k].title}
                                            </a>
                                        ))}
                                    </div>
                                )}
                                <a href="facility.html" className="py-4 text-2xl font-heading text-black border-b border-black/[0.06]">Facility</a>
                                <a href="contact.html" className="py-4 text-2xl font-heading text-black border-b border-black/[0.06]">Contact</a>
                            </div>
                            <a href="contact.html"
                               className="mt-8 bg-black text-white rounded-full px-6 py-4 text-base font-medium flex items-center justify-center gap-2 shadow-sm">
                                Order Free Sample <ArrowUpRight />
                            </a>
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>,
            document.body
        ) : null;

        return (
            <>
                <nav className="relative z-40 w-full bg-white/60 backdrop-blur-md border-b border-black/[0.04]">
                    <div className="max-w-7xl mx-auto flex justify-between items-center px-4 sm:px-6 md:px-8 py-4 md:py-5 gap-3">
                        <BrandMark />

                        <div className="hidden md:flex items-center gap-6 lg:gap-8 font-body">
                            <a href="index.html" className={linkCls('home')}>Home</a>
                            <a href="about.html" className={linkCls('about')}>About</a>

                            <div
                                className="relative"
                                onMouseEnter={() => setOpenProducts(true)}
                                onMouseLeave={() => setOpenProducts(false)}
                            >
                                <button className={linkCls('products') + ' flex items-center gap-1'}>
                                    Products
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>
                                </button>
                                <AnimatePresence>
                                    {openProducts && (
                                        <motion.div
                                            key="products-dropdown"
                                            initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 6 }}
                                            transition={{ duration: 0.18 }}
                                            className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-[480px] bg-white rounded-2xl shadow-xl border border-black/[0.05] p-4 grid grid-cols-2 gap-1"
                                        >
                                            {Object.keys(PRODUCT_CATALOG).map((k) => (
                                                <a key={k} href={`index.html#products`}
                                                   onClick={(e) => { if (onOpenProducts) { e.preventDefault(); onOpenProducts(k); setOpenProducts(false); } }}
                                                   className="px-3 py-2.5 rounded-lg hover:bg-neutral-50 text-sm text-black font-body flex items-center justify-between group">
                                                    <span>{PRODUCT_CATALOG[k].title}</span>
                                                    <span className="opacity-0 group-hover:opacity-100 transition-opacity text-muted">→</span>
                                                </a>
                                            ))}
                                        </motion.div>
                                    )}
                                </AnimatePresence>
                            </div>

                            <a href="facility.html" className={linkCls('facility')}>Facility</a>
                            <a href="contact.html" className={linkCls('contact')}>Contact</a>
                        </div>

                        <a href="contact.html"
                           className="hidden sm:flex bg-black text-white rounded-full px-5 md:px-6 py-2.5 text-sm font-medium font-body transition-transform duration-300 hover:scale-[1.03] active:scale-[0.98] items-center gap-1.5 shadow-sm whitespace-nowrap">
                            <span className="hidden md:inline">Order Free Sample</span>
                            <span className="md:hidden">Sample</span>
                            <ArrowUpRight />
                        </a>

                        <button
                            onClick={() => setMobileOpen(true)}
                            aria-label="Open menu"
                            className="md:hidden w-10 h-10 flex items-center justify-center rounded-full border border-black/10 bg-white/70">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                                <line x1="3" y1="6" x2="21" y2="6"/>
                                <line x1="3" y1="12" x2="21" y2="12"/>
                                <line x1="3" y1="18" x2="21" y2="18"/>
                            </svg>
                        </button>
                    </div>
                </nav>
                {MobileDrawer}
            </>
        );
    };

    // ---- Page header ----
    const PageHeader = ({ breadcrumb, title, subtitle }) => (
        <header className="relative z-10 max-w-7xl mx-auto px-4 sm:px-8 pt-10 sm:pt-20 pb-10 sm:pb-16">
            <div className="bg-white/55 backdrop-blur-xl border border-black/[0.04] rounded-[2rem] sm:rounded-[2.5rem] px-6 sm:px-8 md:px-12 py-8 sm:py-12 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.15)]">
                <div className="text-xs font-body text-muted tracking-[0.2em] uppercase mb-4 sm:mb-6">
                    {breadcrumb.map((b, i) => (
                        <span key={i}>
                            {i > 0 && <span className="mx-2 text-black/30">/</span>}
                            {b.href ? <a href={b.href} className="hover:text-black">{b.label}</a> : <span className="text-black">{b.label}</span>}
                        </span>
                    ))}
                </div>
                <h1 className="font-heading text-4xl sm:text-5xl md:text-7xl text-black tracking-[-1.2px] sm:tracking-[-2px] leading-[1] sm:leading-[0.95] max-w-4xl">
                    {title}
                </h1>
                {subtitle && (
                    <p className="font-body text-muted text-base sm:text-lg mt-5 sm:mt-6 max-w-2xl font-light leading-relaxed">{subtitle}</p>
                )}
            </div>
        </header>
    );

    // ---- Product detail modal ----
    const ProductModal = ({ activeTab, onClose }) => (
        <AnimatePresence>
            {activeTab && (
                <motion.div
                    key="modal-backdrop"
                    initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                    className="fixed inset-0 z-50 bg-black/40 backdrop-blur-md flex items-center justify-center p-4"
                    onClick={onClose}
                >
                    <motion.div
                        initial={{ scale: 0.96, y: 15 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.96, y: 15 }}
                        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
                        onClick={(e) => e.stopPropagation()}
                        className="bg-white w-full max-w-4xl rounded-[2rem] p-8 max-h-[85vh] overflow-y-auto shadow-2xl border border-black/[0.05]"
                    >
                        <div className="flex items-start justify-between border-b border-black/[0.06] pb-5 mb-6">
                            <div>
                                <h3 className="font-heading italic text-4xl text-black font-normal">{PRODUCT_CATALOG[activeTab].title}</h3>
                                <p className="text-sm text-muted mt-1 font-body font-light max-w-xl">{PRODUCT_CATALOG[activeTab].desc}</p>
                            </div>
                            <button onClick={onClose}
                                    className="w-10 h-10 rounded-full bg-black/5 hover:bg-black/10 flex items-center justify-center text-black font-body transition-colors text-sm flex-shrink-0">✕</button>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {PRODUCT_CATALOG[activeTab].items.map((p, i) => (
                                <div key={i} className="p-5 rounded-2xl border border-black/[0.04] bg-neutral-50/50 flex gap-4 items-start">
                                    {p.img && (
                                        <div className="w-24 h-24 rounded-xl overflow-hidden bg-white border border-black/[0.04] flex-shrink-0">
                                            <img src={p.img} alt={p.name} loading="lazy"
                                                 onError={(e) => { e.target.style.display = 'none'; }}
                                                 className="w-full h-full object-cover" />
                                        </div>
                                    )}
                                    <div className="flex-1 min-w-0">
                                        <h4 className="font-heading italic text-2xl text-black mb-3 font-normal leading-tight">{p.name}</h4>
                                        <div className="flex flex-wrap gap-1.5">
                                            {p.types.map((t, idx) => (
                                                <span key={idx} className="bg-white border border-black/[0.06] text-black text-xs px-3 py-1 rounded-full font-body font-normal">{t}</span>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className="mt-8 pt-5 border-t border-black/[0.06] flex flex-col md:flex-row md:items-center md:justify-between gap-4 text-xs text-muted font-body">
                            <p>FSSAI Licensed · Pan-India domestic supply · Bulk and customized packs</p>
                            <a href="contact.html"
                               className="bg-black text-white px-6 py-3 rounded-full text-sm font-medium hover:bg-neutral-800 flex items-center gap-2 transition-all shadow-md self-start md:self-auto">
                                Request Pricing <ArrowUpRight />
                            </a>
                        </div>
                    </motion.div>
                </motion.div>
            )}
        </AnimatePresence>
    );

    // ---- Footer ----
    const Footer = () => (
        <footer className="relative z-10 bg-black text-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-12 sm:py-16 grid grid-cols-1 md:grid-cols-4 gap-10">
                <div className="md:col-span-2">
                    <BrandMark />
                    <p className="font-body text-white/60 mt-6 text-sm font-light leading-relaxed max-w-md">
                        A pan-India supplier of dehydrated foods, spices, herbs, spray-dried powders, frozen foods,
                        rice, maize, makhana and jaggery — built for domestic food processors, FMCG brands and HoReCa operators.
                    </p>
                    <p className="font-body text-white/40 mt-4 text-xs">
                        For export and international orders, our partner brand <a href="https://www.exlonfood.com" className="text-white/70 hover:text-white underline-offset-2 hover:underline" target="_blank" rel="noopener">Exlon Food Process &amp; Aroma Pvt. Ltd.</a> handles global supply.
                    </p>
                    {/* WhatsApp in footer too */}
                    <a href="https://wa.me/919307499973?text=Hi%2C%20I%27d%20like%20to%20enquire%20about%20your%20products."
                       target="_blank" rel="noopener noreferrer"
                       className="inline-flex items-center gap-2 mt-5 text-sm font-medium font-body text-white/70 hover:text-white transition-colors">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                        WhatsApp us
                    </a>
                </div>

                <div>
                    <h5 className="text-xs uppercase tracking-[0.2em] font-medium text-white/80 mb-4 font-body">Contact</h5>
                    <ul className="space-y-2.5 font-body text-sm text-white/60 font-light">
                        <li><a href="tel:+919307499973" className="hover:text-white">+91 93074 99973</a></li>
                        <li><a href="mailto:sales@yogeshwariagroproducts.com" className="hover:text-white">sales@yogeshwariagroproducts.com</a></li>
                        <li className="text-white/50 text-xs leading-relaxed pt-1">408, Vastu Elite Complex,<br/>Beside Kalpak Lawns, Beed Bypass Road,<br/>Chhatrapati Sambhajinagar, MH 431010</li>
                    </ul>
                </div>

                <div>
                    <h5 className="text-xs uppercase tracking-[0.2em] font-medium text-white/80 mb-4 font-body">Quick Links</h5>
                    <ul className="space-y-2.5 font-body text-sm text-white/60 font-light">
                        <li><a href="index.html" className="hover:text-white">Home</a></li>
                        <li><a href="about.html" className="hover:text-white">About</a></li>
                        <li><a href="index.html#products" className="hover:text-white">Products</a></li>
                        <li><a href="facility.html" className="hover:text-white">Facility</a></li>
                        <li><a href="contact.html" className="hover:text-white">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div className="border-t border-white/10">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-5 flex flex-col md:flex-row justify-between items-center gap-2 text-xs font-body text-white/40">
                    <p>© {new Date().getFullYear()} Yogeshwari Agro Products. All rights reserved.</p>
                    <p>FSSAI Licensed · Made in India</p>
                </div>
            </div>
        </footer>
    );

    // ---- Leadership card ----
    const LeadershipCard = ({ person }) => (
        <div className="p-8 sm:p-10 rounded-3xl border border-black/[0.05] bg-white/35 backdrop-blur-md text-center">
            <p className="font-body text-xs text-muted uppercase tracking-[0.18em]">{person.role}</p>
            <h3 className="font-heading text-2xl sm:text-3xl text-black tracking-tight mt-3">{person.name}</h3>
            {person.bio && (
                <p className="font-body text-sm text-muted font-light leading-relaxed mt-4 max-w-sm mx-auto">{person.bio}</p>
            )}
        </div>
    );

    Object.assign(window, {
        LeadershipCard,
        PRODUCT_CATALOG,
        FACILITY_IMAGES,
        LEADERSHIP,
        REVIEWS,
        ArrowUpRight,
        FadingVideo,
        SiteBackground,
        BrandMark,
        Nav,
        PageHeader,
        ProductModal,
        Footer,
        ReviewsSection,
        WhatsAppButton,
    });
})();