<?php if (session_status() === PHP_SESSION_NONE) session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kateel Impex | Premium Indian Spices & Herbs Exporter</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100..900&display=swap" rel="stylesheet">
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Tailwind CSS 4 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style type="text/tailwindcss">
        @theme {
            --color-gold: #D4AF37;
            --color-gold-dark: #B89634;
            --color-sage: #5A634D;
            --color-olive: #4B533F;
            --color-olive-dark: #3D4434;
            --color-cream: #FAF9F6;
            --color-cream-dark: #F1EFE9;
            --color-border: #E5E2D9;
            --color-text-main: #2C2C2C;
            --color-text-muted: #6B6B6B;
            
            --font-serif: 'Cormorant Garamond', serif;
            --font-sans: 'Inter', sans-serif;
            
            --shadow-warm: 0 4px 20px -2px rgba(75, 83, 63, 0.05);
        }

        @layer base {
            body {
                @apply font-sans bg-cream text-text-main antialiased selection:bg-gold/30;
                scroll-behavior: smooth;
            }
            h1, h2, h3, h4, h5, h6 {
                @apply font-serif;
            }
        }

        .animate-spin-slow {
            animation: rotate_anim 30s linear infinite;
        }

        @keyframes rotate_anim {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Reveal Animation Utility */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        input, select, textarea {
            @apply border-b border-border focus:border-gold outline-none transition-colors;
        }
    </style>
</head>
<body>

    <!-- Header Navigation -->
    <nav id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-4">
        <!-- Top Bar -->
        <div id="top-bar" class="hidden lg:block border-b border-border/40 pb-2 mb-2 transition-all duration-300">
            <div class="container mx-auto px-10 flex justify-between items-center text-[11px] font-medium tracking-widest uppercase text-text-muted">
                <div class="flex gap-8">
                    <span class="flex items-center gap-2"><span class="text-gold">T:</span> +91 9819468486</span>
                    <span class="flex items-center gap-2"><span class="text-gold">E:</span> kateelimpex@gmail.com</span>
                </div>
                <div class="flex gap-6 italic">
                    <span>Global Shipping Established 1994</span>
                    <span class="text-gold">|</span>
                    <a href="https://wa.me/919819468486" target="_blank" class="hover:text-gold transition-colors">WhatsApp Inquiry</a>
                </div>
            </div>
        </div>

        <div class="container mx-auto px-10 flex justify-between items-center">
            <div class="flex items-center gap-4">
                <a href="#" class="flex items-center gap-4 group">
                    <img src="logo.svg" alt="Kateel Impex Logo" class="h-14 w-auto drop-shadow-sm group-hover:scale-105 transition-transform">
                    <div class="flex flex-col">
                        <h1 class="text-2xl font-serif tracking-tighter text-olive leading-none">KATEEL <span class="font-light">IMPEX</span></h1>
                        <span class="text-[8px] uppercase tracking-[0.2em] mt-1 text-gold font-semibold">Excellence in Export</span>
                    </div>
                </a>
            </div>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center gap-10">
                <a href="#home" class="text-[11px] font-bold uppercase tracking-widest text-olive hover:text-gold transition-colors">Home</a>
                <a href="#about" class="text-[11px] font-bold uppercase tracking-widest text-olive hover:text-gold transition-colors">About</a>
                <a href="#products" class="text-[11px] font-bold uppercase tracking-widest text-olive hover:text-gold transition-colors">Products</a>
                <a href="#quality" class="text-[11px] font-bold uppercase tracking-widest text-olive hover:text-gold transition-colors">Quality</a>
                <a href="#contact" class="text-[11px] font-bold uppercase tracking-widest text-olive hover:text-gold transition-colors">Contact</a>
                <a href="#contact" class="bg-olive text-white px-8 py-3 rounded-full text-[11px] font-bold uppercase tracking-widest hover:bg-olive-dark transition-all shadow-lg">Get Quote</a>
            </div>

            <!-- Mobile Toggle -->
            <button class="md:hidden text-olive" id="menu-toggle">
                <i data-lucide="menu"></i>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-cream border-t border-border absolute w-full top-full left-0 p-8 shadow-xl">
            <div class="flex flex-col gap-6 text-center text-sm font-bold uppercase tracking-widest">
                <a href="#home" class="menu-link">Home</a>
                <a href="#about" class="menu-link">About</a>
                <a href="#products" class="menu-link">Products</a>
                <a href="#quality" class="menu-link">Quality</a>
                <a href="#contact" class="menu-link">Contact</a>
                <a href="#contact" class="bg-olive text-white py-4 rounded-xl">Get Quote</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="relative min-h-screen flex items-center pt-32 lg:pt-20 overflow-hidden bg-cream">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-px h-32 bg-gold/30"></div>
        
        <div class="container mx-auto px-10 grid md:grid-cols-12 gap-12 items-center relative z-10">
            <div class="md:col-span-6 reveal">
                <div class="absolute -left-10 top-0 w-1 h-20 bg-gold"></div>
                <h1 class="text-6xl lg:text-8xl font-serif text-text-main leading-[1] mb-8">
                    Premium Indian <br />
                    <span class="italic font-light text-olive">Harvest</span> For The <br />
                    Global Market.
                </h1>
                <p class="text-sm uppercase tracking-[0.2em] font-medium text-text-muted mb-10 max-w-md leading-relaxed">
                    Kateel Impex bridges the gap between India's fertile plains and international wholesalers with integrity and excellence.
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#products" class="bg-sage text-white px-10 py-4 uppercase tracking-[0.2em] text-[11px] font-bold rounded-sm hover:bg-olive transition-all shadow-xl shadow-olive/10">View Products</a>
                    <a href="#about" class="border border-olive text-olive px-10 py-4 uppercase tracking-[0.2em] text-[11px] font-bold rounded-sm hover:bg-olive/5 transition-all">Our Story</a>
                </div>
                <div class="mt-16 flex gap-12 border-t border-border pt-8">
                    <div class="flex flex-col">
                        <span class="text-[10px] text-gold font-bold uppercase tracking-widest mb-1">Established</span>
                        <span class="text-2xl font-serif font-bold text-olive">1994</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-[10px] text-gold font-bold uppercase tracking-widest mb-1">Orders Delivered</span>
                        <span class="text-2xl font-serif font-bold text-olive">800+</span>
                    </div>
                </div>
            </div>

            <div class="md:col-span-6 md:flex justify-end reveal">
                <div class="relative w-full max-w-lg aspect-[4/5] rounded-[60px] overflow-hidden border-[12px] border-white shadow-2xl">
                    <img src="images/hero.jpg" alt="Premium Spices" class="w-full h-full object-cover" loading="lazy">
                    <div class="absolute -bottom-10 -right-10 bg-white p-8 rounded-full shadow-2xl z-30 border border-border flex flex-col items-center justify-center text-center w-40 h-40">
                        <div class="absolute inset-2 border border-dashed border-gold rounded-full"></div>
                        <span class="text-[9px] font-bold uppercase tracking-[0.2em] text-gold mb-1">Export Grade</span>
                        <span class="text-sm font-serif font-bold text-olive leading-tight uppercase">ISO / HACCP<br/>CERTIFIED</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-24 bg-white overflow-hidden">
        <div class="container mx-auto px-10">
            <div class="grid md:grid-cols-2 gap-20 items-center">
                <div class="relative reveal">
                    <div class="grid grid-cols-2 gap-6 relative z-10">
                        <div class="space-y-6 pt-16">
                            <img src="images/about-1.jpg" class="w-full h-72 object-cover rounded-[3rem] shadow-warm" alt="" loading="lazy">
                            <img src="images/about-2.jpg" class="w-full h-56 object-cover rounded-[3rem] shadow-warm" alt="" loading="lazy">
                        </div>
                        <div class="space-y-6">
                            <img src="images/about-3.jpg" class="w-full h-56 object-cover rounded-[3rem] shadow-warm" alt="" loading="lazy">
                            <img src="images/about-4.jpg" class="w-full h-72 object-cover rounded-[3rem] shadow-warm" alt="" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="reveal">
                    <span class="text-gold font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block">Our Heritage</span>
                    <h2 class="text-5xl font-serif text-text-main mb-8 leading-tight">An Artisan Approach <br/><span class="italic font-light text-olive">To Indian Export</span>.</h2>
                    <p class="text-text-muted text-sm leading-relaxed mb-8 italic uppercase tracking-widest">Established in 1994, Kateel Impex has been a trusted partner for global importers seeking the purest agricultural produce from India.</p>
                    <p class="text-text-main text-base leading-relaxed mb-10 italic">We operate out of Mumbai, strategically positioned to source from the finest spice gardens and rice fields across India. Our commitment to quality is rooted in our traditional values, combined with modern hygienic processing.</p>
                    <ul class="space-y-5 mb-12">
                        <li class="flex items-center gap-4 text-olive text-sm font-bold uppercase tracking-widest"><div class="w-6 h-px bg-gold"></div>Direct farm-to-table sourcing</li>
                        <li class="flex items-center gap-4 text-olive text-sm font-bold uppercase tracking-widest"><div class="w-6 h-px bg-gold"></div>Triple-stage grading checks</li>
                        <li class="flex items-center gap-4 text-olive text-sm font-bold uppercase tracking-widest"><div class="w-6 h-px bg-gold"></div>Sustainable trade practices</li>
                    </ul>
                    <a href="#contact" class="inline-flex items-center gap-4 group">
                        <span class="text-xs font-bold uppercase tracking-[0.3em] text-text-main group-hover:text-gold">Start a Partnership</span>
                        <div class="w-12 h-12 bg-olive rounded-full flex items-center justify-center text-white"><i data-lucide="arrow-right"></i></div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="py-24 bg-cream">
        <div class="container mx-auto px-10">
            <div class="text-center max-w-2xl mx-auto mb-16 reveal">
                <span class="text-gold font-bold tracking-widest text-xs uppercase mb-4 block">Our Catalogue</span>
                <h2 class="text-4xl lg:text-5xl font-serif text-olive mb-6">Exceptional Harvest</h2>
                <div class="flex flex-wrap justify-center gap-4 mt-8" id="category-filters">
                    <button class="filter-btn active" data-category="All">All Items</button>
                    <button class="filter-btn" data-category="Spices">Spices</button>
                    <button class="filter-btn" data-category="Herbs">Herbs</button>
                    <button class="filter-btn" data-category="Rice">Rice</button>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-20" id="products-grid">
                <!-- Products will be injected here via JavaScript -->
            </div>

            <!-- Bespoke Section -->
            <div class="reveal bg-white rounded-[40px] p-10 md:p-16 border border-border shadow-warm text-center relative overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-1 bg-gold"></div>
                <div class="relative z-10 max-w-3xl mx-auto">
                    <span class="text-gold font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block">Tailored Sourcing</span>
                    <h2 class="text-4xl md:text-5xl font-serif text-olive mb-8 italic">Bespoke Export Solutions</h2>
                    <p class="text-text-muted text-sm md:text-base leading-relaxed mb-10 max-w-2xl mx-auto italic">
                        Looking for products not listed? We also supply Indian Onions, Icumsa 45 Sugar, and G4 Chilli. 
                        We offer comprehensive private labeling and custom batch sizes for international requirements.
                    </p>
                    <a href="#contact" class="inline-flex items-center gap-6 group">
                        <span class="text-xs font-bold uppercase tracking-[0.3em] text-text-main group-hover:text-gold transition-colors">Send Direct Request</span>
                        <div class="w-14 h-14 bg-olive rounded-full flex items-center justify-center text-white group-hover:bg-gold transition-all duration-500 shadow-xl">
                            <i data-lucide="arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Quality Section -->
    <section id="quality" class="py-24 bg-cream-dark overflow-hidden">
        <div class="container mx-auto px-10">
            <div class="flex flex-col lg:flex-row gap-16 items-center">
                <div class="lg:w-1/2 reveal">
                    <span class="text-gold font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block">Our Standards</span>
                    <h2 class="text-5xl font-serif text-text-main mb-12">Export Readiness & <br/><span class="italic font-light text-olive">Pure Integrity</span>.</h2>
                    <div class="grid sm:grid-cols-2 gap-6">
                        <div class="p-8 bg-white rounded-[2rem] border border-border shadow-warm hover:shadow-xl transition-all duration-500 group">
                            <div class="text-gold mb-6 group-hover:scale-110 transition-transform duration-500"><i data-lucide="map-pin" size="32"></i></div>
                            <h3 class="font-serif text-2xl text-text-main mb-3">Sourcing</h3>
                            <p class="text-[11px] text-text-muted italic uppercase tracking-wide">Strategically located sourcing office in Dadar, Mumbai.</p>
                        </div>
                        <div class="p-8 bg-white rounded-[2rem] border border-border shadow-warm hover:shadow-xl transition-all duration-500 group">
                            <div class="text-gold mb-6 group-hover:scale-110 transition-transform duration-500"><i data-lucide="award" size="32"></i></div>
                            <h3 class="font-serif text-2xl text-text-main mb-3">Grading</h3>
                            <p class="text-[11px] text-text-muted italic uppercase tracking-wide">Triple-stage cleaning and grading for uniform quality.</p>
                        </div>
                        <div class="p-8 bg-white rounded-[2rem] border border-border shadow-warm hover:shadow-xl transition-all duration-500 group">
                            <div class="text-gold mb-6 group-hover:scale-110 transition-transform duration-500"><i data-lucide="flask-conical" size="32"></i></div>
                            <h3 class="font-serif text-2xl text-text-main mb-3">Testing</h3>
                            <p class="text-[11px] text-text-muted italic uppercase tracking-wide">Moisture and volatile oil content testing per batch.</p>
                        </div>
                        <div class="p-8 bg-white rounded-[2rem] border border-border shadow-warm hover:shadow-xl transition-all duration-500 group">
                            <div class="text-gold mb-6 group-hover:scale-110 transition-transform duration-500"><i data-lucide="package" size="32"></i></div>
                            <h3 class="font-serif text-2xl text-text-main mb-3">Packaging</h3>
                            <p class="text-[11px] text-text-muted italic uppercase tracking-wide">Premium multi-layer moisture-proof export packaging.</p>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 reveal">
                    <div class="relative rounded-[60px] overflow-hidden border-[16px] border-white shadow-2xl">
                        <img src="images/quality.jpg" class="w-full h-full object-cover" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="py-24 bg-olive text-cream overflow-hidden">
        <div class="container mx-auto px-10 reveal">
            <div class="grid lg:grid-cols-2 gap-20 items-center">
                <div>
                    <span class="text-gold font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block">Experience across borders</span>
                    <h2 class="text-5xl lg:text-7xl font-serif mb-12">Why Global <br/><span class="italic font-light">Buyers Trust Us</span>.</h2>
                    <div class="grid sm:grid-cols-2 gap-12">
                        <div class="flex gap-6">
                            <div class="w-px h-12 bg-gold"></div>
                            <div>
                                <h3 class="font-serif text-2xl mb-3">Transparency</h3>
                                <p class="text-[11px] text-cream/40 uppercase italic tracking-widest leading-relaxed">Real-time crop updates and market intelligence.</p>
                            </div>
                        </div>
                        <div class="flex gap-6">
                            <div class="w-px h-12 bg-gold"></div>
                            <div>
                                <h3 class="font-serif text-2xl mb-3">Quality</h3>
                                <p class="text-[11px] text-cream/40 uppercase italic tracking-widest leading-relaxed">Unyielding commitment to purity and aroma.</p>
                            </div>
                        </div>
                        <div class="flex gap-6">
                            <div class="w-px h-12 bg-gold"></div>
                            <div>
                                <h3 class="font-serif text-2xl mb-3">Logistics</h3>
                                <p class="text-[11px] text-cream/40 uppercase italic tracking-widest leading-relaxed">Seamless door-to-door global shipping expertise.</p>
                            </div>
                        </div>
                        <div class="flex gap-6">
                            <div class="w-px h-12 bg-gold"></div>
                            <div>
                                <h3 class="font-serif text-2xl mb-3">Heritage</h3>
                                <p class="text-[11px] text-cream/40 uppercase italic tracking-widest leading-relaxed">Established legacy of merchant export excellence.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden lg:flex justify-center items-center h-[400px]">
                    <div class="relative w-64 h-64">
                        <div class="absolute inset-0 border border-gold/30 rounded-full animate-spin-slow"></div>
                        <div class="absolute inset-4 border border-dashed border-gold/20 rounded-full"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="p-12 bg-white rounded-[4rem] shadow-2xl text-text-main text-center min-w-[280px]">
                                <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold mb-2">Established</p>
                                <p class="text-6xl font-serif font-bold text-olive">1994</p>
                                <div class="w-12 h-px bg-gold mx-auto mt-4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-24 bg-cream">
        <div class="container mx-auto px-10 reveal">
            <div class="bg-white rounded-[48px] shadow-warm overflow-hidden border border-border">
                <div class="grid lg:grid-cols-5">
                    <div class="lg:col-span-2 bg-olive p-12 text-cream flex flex-col justify-between">
                        <div>
                            <h2 class="text-4xl font-serif mb-8 leading-tight">Global Trade <br/><span class="italic text-gold">Inquiry Desk</span></h2>
                            <p class="text-cream/60 text-sm italic mb-12 uppercase tracking-widest leading-relaxed">Your bridge to the finest Indian agriculture. Reach out for bulk quotes and logistics support.</p>
                            <div class="space-y-8">
                                <div class="flex items-start gap-4 group">
                                    <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-olive transition-all"><i data-lucide="phone" size="18"></i></div>
                                    <div><p class="text-[10px] uppercase font-bold text-cream/40 tracking-widest">Call Us</p><p class="font-medium tracking-wide">+91 9819468486</p></div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-olive transition-all"><i data-lucide="mail" size="18"></i></div>
                                    <div><p class="text-[10px] uppercase font-bold text-cream/40 tracking-widest">Email</p><p class="font-medium tracking-wide">kateelimpex@gmail.com</p></div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-olive transition-all"><i data-lucide="map-pin" size="18"></i></div>
                                    <div><p class="text-[10px] uppercase font-bold text-cream/40 tracking-widest">Office</p><p class="font-medium tracking-wide text-sm">1- Vaidya Wadi, Shankar Ghanekar Marg, Gokhale Rd, Dadar, Mumbai, Maharashtra 400028</p></div>
                                </div>
                            </div>
                        </div>
                        <div class="pt-12 border-t border-white/10 flex gap-6">
                            <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-gold hover:text-olive transition-all"><i data-lucide="linkedin" size="18"></i></a>
                            <a href="https://wa.me/919819468486" target="_blank" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-gold hover:text-olive transition-all"><i data-lucide="message-circle" size="18"></i></a>
                        </div>
                    </div>
                    <div class="lg:col-span-3 p-12 bg-[#FAF9F6]">
                        <form id="inquiry-form" class="space-y-6">
                            <div class="grid md:grid-cols-2 gap-6">
                                <div class="flex flex-col gap-1">
                                    <label class="text-[9px] uppercase font-bold text-olive">Full Name</label>
                                    <input type="text" name="fullName" required placeholder="John Doe">
                                </div>
                                <div class="flex flex-col gap-1">
                                    <label class="text-[9px] uppercase font-bold text-olive">Email Address</label>
                                    <input type="email" name="email" required placeholder="buyer@trade.com">
                                </div>
                            </div>
                            <div class="grid md:grid-cols-2 gap-6">
                                <div class="flex flex-col gap-1">
                                    <label class="text-[9px] uppercase font-bold text-olive">Company Name</label>
                                    <input type="text" name="companyName" required placeholder="Export Co.">
                                </div>
                                <div class="flex flex-col gap-1">
                                    <label class="text-[9px] uppercase font-bold text-olive">Phone Number</label>
                                    <input type="text" name="phone" required placeholder="+1 234 567 890">
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <label class="text-[9px] uppercase font-bold text-olive">Product of Interest</label>
                                <select name="productInterest" class="bg-transparent border-b border-border py-2 text-sm outline-none">
                                    <option value="Spices">Spices (Pepper, Star Anise, etc)</option>
                                    <option value="Herbs">Herbs (Bay Leaf, Oregano, etc)</option>
                                    <option value="Rice">Indian Basmati Rice</option>
                                    <option value="Other">Other Commodities</option>
                                </select>
                            </div>
                            <div class="flex flex-col gap-1">
                                <label class="text-[9px] uppercase font-bold text-olive">Your Message</label>
                                <textarea name="message" rows="4" placeholder="Detail your bulk requirements or private labeling needs..."></textarea>
                            </div>
                            <div class="grid md:grid-cols-2 gap-6">
                                <div class="flex flex-col gap-1">
                                    <label class="text-[9px] uppercase font-bold text-olive">Security Check</label>
                                    <?php 
                                        $num1 = rand(1, 9);
                                        $num2 = rand(1, 9);
                                        $sum = $num1 + $num2;
                                        // Store sum in session for verification (requires session_start at top of file)
                                        if (session_status() === PHP_SESSION_NONE) session_start();
                                        $_SESSION['captcha_sum'] = $sum;
                                    ?>
                                    <div class="flex items-center gap-3">
                                        <span class="text-sm font-bold text-olive"><?php echo $num1; ?> + <?php echo $num2; ?> = </span>
                                        <input type="number" name="captcha" required placeholder="?" class="w-16">
                                    </div>
                                </div>
                                <button type="submit" class="w-full py-4 bg-gold text-white uppercase font-bold tracking-widest text-xs rounded-sm hover:bg-gold-dark transition-all shadow-lg hover:shadow-gold/20 self-end">Send Inquiry</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-white pt-24 pb-12 border-t border-border">
        <div class="container mx-auto px-10">
            <div class="grid lg:grid-cols-4 gap-16 mb-20">
                <div class="lg:col-span-2">
                    <div class="flex items-center gap-4 mb-8">
                        <img src="logo.svg" alt="Kateel Impex Logo" class="h-16 w-auto opacity-90">
                        <div class="flex flex-col">
                            <h1 class="text-3xl font-serif tracking-tighter text-olive leading-none">KATEEL <span class="font-light">IMPEX</span></h1>
                            <span class="text-[9px] uppercase tracking-[0.3em] mt-1 text-gold font-semibold">Excellence in Export</span>
                        </div>
                    </div>
                    <p class="text-text-muted text-sm leading-relaxed max-w-sm italic uppercase tracking-wider">
                        Empowering international culinary excellence through pure, ethically-sourced Indian agricultural exports. From farm to global fusion.
                    </p>
                    <div class="flex gap-4 mt-10">
                        <a href="tel:+919819468486" class="w-10 h-10 rounded-full border border-border flex items-center justify-center text-olive hover:bg-olive hover:text-white transition-all"><i data-lucide="phone" size="16"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full border border-border flex items-center justify-center text-olive hover:bg-olive hover:text-white transition-all"><i data-lucide="linkedin" size="16"></i></a>
                        <a href="mailto:kateelimpex@gmail.com" class="w-10 h-10 rounded-full border border-border flex items-center justify-center text-olive hover:bg-olive hover:text-white transition-all"><i data-lucide="mail" size="16"></i></a>
                    </div>
                </div>

                <div>
                    <h3 class="font-serif text-xl text-olive mb-8">Quick Links</h3>
                    <ul class="space-y-4 text-[10px] font-bold uppercase tracking-[0.2em] text-text-muted">
                        <li><a href="#home" class="hover:text-gold transition-colors">Home</a></li>
                        <li><a href="#about" class="hover:text-gold transition-colors">Our Heritage</a></li>
                        <li><a href="#products" class="hover:text-gold transition-colors">Export Catalogue</a></li>
                        <li><a href="#quality" class="hover:text-gold transition-colors">Quality Control</a></li>
                        <li><a href="#contact" class="hover:text-gold transition-colors">Contact</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-serif text-xl text-olive mb-8">Direct Contact</h3>
                    <div class="space-y-6">
                        <div class="flex gap-4 items-start">
                            <i data-lucide="map-pin" class="text-gold" size="16"></i>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-text-muted leading-relaxed">
							1- Vaidya Wadi,<br/>
                                Shankar Ghanekar Marg, <br/>
                                Gokhale Rd, Dadar (E),<br/>
                                Mumbai - 400028, MH, INDIA
                            </span>
                        </div>
                        <div class="flex gap-4 items-center">
                            <i data-lucide="phone" class="text-gold" size="16"></i>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-text-muted">+91 9819468486</span>
                        </div>
                        <div class="flex gap-4 items-center">
                            <i data-lucide="mail" class="text-gold" size="16"></i>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-text-muted">kateelimpex@gmail.com</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row justify-between items-center gap-6 pt-12 border-t border-border">
                <div class="text-[9px] text-text-muted font-bold uppercase tracking-[0.3em]">© 2026 KATEEL IMPEX. PROUDLY EXPORTING FROM INDIA.</div>
                <div class="flex gap-8 text-[9px] font-bold uppercase tracking-widest">
                    <a href="#" class="hover:text-gold transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-gold transition-colors">Terms of Trade</a>
                    <a href="#" class="text-gold">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Product Modal -->
    <div id="product-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-6">
        <div class="absolute inset-0 bg-olive-dark/80 backdrop-blur-sm" id="modal-overlay"></div>
        <div class="relative w-full max-w-4xl bg-cream rounded-[48px] overflow-hidden shadow-2xl flex flex-col md:flex-row">
            <button class="absolute top-8 right-8 z-20 w-12 h-12 bg-white/20 hover:bg-white/40 rounded-full flex items-center justify-center" id="close-modal"><i data-lucide="x"></i></button>
            <div class="md:w-1/2 aspect-square md:aspect-auto">
                <img id="modal-img" src="" class="w-full h-full object-cover">
            </div>
            <div class="md:w-1/2 p-10 md:p-14 overflow-y-auto max-h-[60vh] md:max-h-[80vh]">
                <span id="modal-cat" class="text-gold font-bold tracking-widest text-[10px] uppercase mb-4 block"></span>
                <h2 id="modal-title" class="text-4xl lg:text-5xl font-serif text-olive mb-6"></h2>
                <div class="w-12 h-1 bg-gold mb-8"></div>
                <p id="modal-desc" class="text-text-main italic leading-relaxed"></p>
                <div class="flex gap-4 pt-8 mt-8 border-t border-border">
                    <a href="#contact" class="flex-1 bg-olive text-white text-center py-4 rounded-xl font-bold uppercase tracking-widest text-[10px]" id="modal-cta">Inquire</a>
                    <a href="https://wa.me/919819468486" id="modal-whatsapp" target="_blank" class="flex-1 border border-olive text-center py-4 rounded-xl font-bold uppercase tracking-widest text-[10px]">WhatsApp</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Data
        const products = [
            { id: 'black-pepper', name: 'Black Pepper', category: 'Spices', description: 'The "king of spices", representing the most precious form of spice world.', image: 'images/black-pepper.jpg', details: 'Known as the ‘king of spices’, black pepper has remained the most precious and valuable form of spices in the world.' },
            { id: 'star-anise', name: 'Star Anise', category: 'Spices', description: 'Star-shaped pods with a flavor reminiscent of licorice and medicinal benefits.', image: 'images/star-anise.jpg', details: 'Star anise is famed not only for its distinct flavor and medicinal benefits.' },
            { id: 'cloves', name: 'Cloves', category: 'Spices', description: 'One of the oldest spices in the world, the dried unopened flower bud.', image: 'images/cloves.jpg', details: 'Clove is indigenous to the Moluccas Islands of Indonesia.' },
            { id: 'bay-leaf', name: 'Bay Leaf', category: 'Herbs', description: 'Aromatic and fragrant leaves used for flavoring soups, stews, and sauces.', image: 'images/bay-leaf.jpg', details: 'Bay leaves are used as flavouring in soups, stews, meat, fish, and sauces.' },
            { id: 'mace-flower', name: 'Mace Flower', category: 'Spices', description: 'The dried reticulated aril of the fruit, a standard seasoning in Dutch dishes.', image: 'images/mace-flower.jpg', details: 'Mace is the dried reticulated ‘aril’ of the fruit and nutmeg is the dried seed kernel.' },
            { id: 'oregano', name: 'Dry Oregano', category: 'Herbs', description: 'Perennial herb with aromatic foliage, most common spice for pizza.', image: 'images/oregano.jpg', details: 'Oregano is a perennial herb with creeping roots, 30-90 cm high.' },
            { id: 'ginger', name: 'Dry Ginger', category: 'Spices', description: 'Knobby, fibrous root known for its effectiveness as a digestive aid.', image: 'images/ginger.jpg', details: 'Ginger is most commonly known for its effectiveness as a digestive aid.' },
            { id: 'red-chilli', name: 'Red Chilli', category: 'Spices', description: 'Dried ripe fruit used extensively as a spice in curried dishes.', image: 'images/red-chilli.jpg', details: 'Dry chilly is extensively used as spice in curried dishes.' },
            { id: 'turmeric', name: 'Turmeric (Salem)', category: 'Spices', description: 'Boiled, dried, and polished rhizomes of Curcuma longa.', image: 'images/turmeric.jpg', details: 'The plant is a herbaceous perennial, 60-90 cm high.' },
            { id: 'white-pepper', name: 'White Pepper', category: 'Spices', description: 'Ideal for white sauces and seafood, retaining full pungency.', image: 'images/white-pepper.jpg', details: 'Ideal for use in white sauces, pasta salads and seafood dishes.' },
            { id: 'cardamom-green', name: 'Cardamom Green', category: 'Spices', description: 'The "Queen of Spices" with a very pleasant aroma and taste.', image: 'images/cardamom.jpg', details: 'Cardamom is often referred as the “Queen of Spices”.' },
            { id: 'cumin', name: 'Cumin (Super)', category: 'Spices', description: 'Dried white fruit used as a condiment and curry powder ingredient.', image: 'images/cumin.jpg', details: 'Cumin is the dried, white fruit with greyish brown colour.' },
            { id: 'cinnamon', name: 'Cinnamon (Split)', category: 'Spices', description: 'Scraped peel of inner bark with a delicate fragrance and warm taste.', image: 'images/cinnamon.jpg', details: 'Cinnamon bark is a popular spice with a delicate fragrance.' },
            { id: 'black-cumin', name: 'Black Cumin', category: 'Spices', description: 'Nigella seeds used in Indian cuisines and health medicine.', image: 'images/black-cumin.jpg', details: 'Black cumin or Nigella is widely used in Indian cuisines.' },
            { id: 'asafoetida', name: 'Asafoetida (Powder)', category: 'Spices', description: 'Dried latex exuded from rhizomes, used for flavoring and medicine.', image: 'images/asafoetida.jpg', details: 'Asafoetida is the dried latex exuded from the rhizome.' },
            { id: 'carom-seeds', name: 'Carom Seeds (Ajwain)', category: 'Spices', description: 'Greyish brown aromatic fruits used as a digestive aid.', image: 'images/carom-seeds.jpg', details: 'Ajwain is traditionally used as a digestive aid.' },
            { id: 'sesame-seeds', name: 'Sesame Seeds (Til)', category: 'Other', description: 'Nutritious seeds rich in proteins and valuable minerals.', image: 'images/sesame-seeds.jpg', details: 'Sesame seeds are source of most nutritious seeds.' },
            { id: 'chia-seeds', name: 'Chia Seeds', category: 'Other', description: 'Super-food rich in fiber, protein, and omega-3 fatty acids.', image: 'images/chia-seeds.jpg', details: 'Chia seeds are a rich source of fiber and omega-3.' },
            { id: 'nutmeg', name: 'Nutmeg', category: 'Spices', description: 'Delicious aroma used in sweet recipes and meat dishes.', image: 'images/nutmeg.jpg', details: 'The aroma of nutmeg is as delicious as its taste.' },
            { id: 'coriander', name: 'Coriander Seeds', category: 'Spices', description: 'Important spice crop with a pleasant aroma and many health benefits.', image: 'images/coriander.jpg', details: 'Coriander is an important spice crop for flavouring food.' },
            { id: 'fenugreek', name: 'Fenugreek Seeds', category: 'Spices', description: 'Hard yellowish brown seeds used as food and medicine.', image: 'images/fenugreek.jpg', details: 'Fenugreek is used both as a food and in medicines.' },
            { id: 'mustard', name: 'Mustard Seeds', category: 'Spices', description: 'Annual herb cultivated for its condiment value and oil.', image: 'images/mustard.jpg', details: 'Mustard is a flavoring agent in Indian cooking.' },
            { id: 'fennel', name: 'Fennel Seeds', category: 'Spices', description: 'Aromatic seeds used for garnishing and flavoring.', image: 'images/fennel.jpg', details: 'Fennel seeds have fragrant odour and pleasant taste.' },
            { id: 'saffron', name: 'Saffron', category: 'Spices', description: 'The most expensive spice in the world derived from Crocus Sativus.', image: 'images/saffron.jpg', details: 'Saffron is used as a culinary seasoning and colorant.' },
            { id: 'basmati-rice', name: 'Basmati Rice', category: 'Rice', description: 'Long-grain aromatic rice, aged and polished to perfection.', image: 'images/basmati-rice.jpg', details: 'Known for its extra long grains and distinct aroma.' }
        ];

        // Init Lucide
        lucide.createIcons();

        // Navbar Logic
        window.addEventListener('scroll', () => {
            const nav = document.getElementById('navbar');
            const topBar = document.getElementById('top-bar');
            if (window.scrollY > 50) {
                nav.classList.add('bg-cream/95', 'backdrop-blur-md', 'shadow-warm', 'py-2');
                nav.classList.remove('py-4');
                topBar.classList.add('opacity-0', 'scale-y-0', 'h-0');
            } else {
                nav.classList.remove('bg-cream/95', 'backdrop-blur-md', 'shadow-warm', 'py-2');
                nav.classList.add('py-4');
                topBar.classList.remove('opacity-0', 'scale-y-0', 'h-0');
            }
        });

        // Mobile Menu
        const menuBtn = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        menuBtn.onclick = () => mobileMenu.classList.toggle('hidden');
        document.querySelectorAll('.menu-link').forEach(link => {
            link.onclick = () => mobileMenu.classList.add('hidden');
        });

        // Modal Logic
        const modal = document.getElementById('product-modal');
        const openModal = (p) => {
            document.getElementById('modal-img').src = p.image;
            document.getElementById('modal-title').innerText = p.name;
            document.getElementById('modal-cat').innerText = p.category;
            document.getElementById('modal-desc').innerText = p.details;
            document.getElementById('modal-whatsapp').href = `https://wa.me/919819468486?text=Interested in ${p.name}`;
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        };
        const closeModal = () => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        };
        document.getElementById('close-modal').onclick = closeModal;
        document.getElementById('modal-overlay').onclick = closeModal;
        document.getElementById('modal-cta').onclick = closeModal;

        // Products Grid Render
        const renderProducts = (cat = 'All') => {
            const grid = document.getElementById('products-grid');
            grid.innerHTML = '';
            const filtered = cat === 'All' ? products : products.filter(p => p.category === cat);
            
            filtered.forEach(p => {
                const card = document.createElement('div');
                card.className = 'group cursor-pointer bg-white rounded-[32px] border border-border p-3 hover:shadow-warm transition-all reveal active';
                card.innerHTML = `
                    <div class="relative overflow-hidden rounded-[28px] aspect-square mb-6">
                        <img src="${p.image}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-olive/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </div>
                    <div class="px-4 pb-4">
                        <span class="text-[9px] font-bold uppercase tracking-widest text-gold mb-1 block">${p.category}</span>
                        <h3 class="text-xl font-serif text-olive group-hover:text-gold transition-colors">${p.name}</h3>
                        <p class="text-text-muted text-xs leading-relaxed mt-2 line-clamp-2 italic">${p.description}</p>
                    </div>
                `;
                card.onclick = () => openModal(p);
                grid.appendChild(card);
            });
        };

        // Filter Logic
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.onclick = () => {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active', 'bg-gold', 'text-white'));
                btn.classList.add('active', 'bg-gold', 'text-white');
                renderProducts(btn.dataset.category);
            };
        });

        // Reveal Logic
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) entry.target.classList.add('active');
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

        // Form Logic
        document.getElementById('inquiry-form').onsubmit = async (e) => {
            e.preventDefault();
            const btn = e.target.querySelector('button');
            const originalText = btn.innerText;
            btn.innerText = 'SENDING...';
            btn.disabled = true;
            
            const formData = new FormData(e.target);
            try {
                const res = await fetch('sendmail.php', { method: 'POST', body: formData });
                const text = await res.text();
                if (res.ok) {
                    alert(text || 'Thank you! Your inquiry has been received.');
                    e.target.reset();
                    // Refresh captcha by reloading page or just updating the display
                    location.reload(); 
                } else {
                    alert(text || 'Submission failed. Please try again or use WhatsApp.');
                    btn.disabled = false;
                    btn.innerText = originalText;
                }
            } catch (err) {
                alert('An error occurred. Please try WhatsApp.');
                btn.disabled = false;
                btn.innerText = originalText;
            }
        };

        // UI Helpers
        const setInitialFilter = () => {
            const firstBtn = document.querySelector('.filter-btn.active');
            firstBtn.classList.add('bg-gold', 'text-white');
        };

        renderProducts();
        setInitialFilter();
    </script>

    <style>
        .filter-btn {
            @apply px-8 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-widest border border-border text-olive hover:border-gold transition-all;
        }
    </style>
</body>
</html>
