[V0_FILE]png:file="public/hero-illustration.png" url="https://sjc.microlink.io/czBCQPnlX4joX28Zk-Bt0rODAT2J0ZZSZgfUzgFqR0qQAHeuDzjvtQYOjURnfefWJOtF0aik-g_3cgzWmy0H2Q.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/about/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/contact/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Search, Menu, X, Award, Target, Eye, Heart, Lightbulb, Shield, Facebook, Twitter, Linkedin, Instagram, Youtube, MessageCircle, Zap, Factory, Truck, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" export default function AboutPage() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { if (isDarkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [isDarkMode]) const navigationItems = [ { name: "Home", href: "/" }, { name: "About Us", href: "/about" }, { name: "Products", href: "/products" }, { name: "Contact Us", href: "/contact" }, ] const values = [ { icon: , title: "Customer Satisfaction", description: "We prioritize our customers' success and build lasting relationships through quality products and exceptional service.", }, { icon: , title: "Innovation", description: "We continuously innovate and adopt latest technologies to provide cutting-edge electrical and farming solutions.", }, { icon: , title: "Quality Assurance", description: "We maintain the highest standards of quality in all our products with rigorous testing and certification.", }, { icon: , title: "Excellence", description: "We strive for excellence in every aspect of our business, from product quality to customer service.", }, ] const team = [ { name: "Mukesh Kumar", position: "Founder & CEO", image: "/placeholder.svg?height=300&width=300", bio: "20+ years of experience in electrical hardware and agricultural equipment industry.", }, { name: "Kavita Sharma", position: "Technical Director", image: "/placeholder.svg?height=300&width=300", bio: "Expert in electrical engineering and product development with 15+ years experience.", }, { name: "Rajesh Patel", position: "Operations Head", image: "/placeholder.svg?height=300&width=300", bio: "Specializes in supply chain management and quality control operations.", }, { name: "Priya Singh", position: "Sales & Marketing Head", image: "/placeholder.svg?height=300&width=300", bio: "Drives business growth and customer relationships across India.", }, ] const milestones = [ { year: "2004", event: "Company Founded", description: "Started EMKAY INDIA with a vision to provide quality electrical hardware", }, { year: "2008", event: "First Major Contract", description: "Secured partnership with leading electrical manufacturers", }, { year: "2012", event: "Quality Certification", description: "Achieved ISO 9001:2015 certification for quality management", }, { year: "2016", event: "Farming Division Launch", description: "Expanded into agricultural equipment and farming solutions", }, { year: "2020", event: "Digital Transformation", description: "Launched online platform and digital customer services", }, { year: "2024", event: "Pan-India Expansion", description: "Extended operations to 50+ cities across India" }, ] return (

{/* Header */}

{/* Logo */}

EMKAY INDIA

Powering Progress & Growth

{/* Desktop Navigation */} {/* Search and Actions */}

{/* Mobile menu button */}

{/* Mobile Navigation */} {isMenuOpen && (

{navigationItems.map((item) => ( setIsMenuOpen(false)} > {item.name} ))}

)}

{/* Hero Section */}

About EMKAY INDIA

Your Trusted Electrical & Farming Partner

For over 20 years, we've been empowering businesses and farmers across India with premium electrical hardware and modern farming equipment.

{/* Company Overview */}

Empowering Industries & Agriculture Since 2004

EMKAY INDIA was founded with a mission to provide high-quality electrical hardware and farming equipment that meets the evolving needs of Indian industries and agriculture.

What began as a small electrical hardware business has grown into a comprehensive solutions provider, serving customers across 50+ cities in India with premium products including wire machines, MCB switches, electrical panels, and modern farming equipment.

Our commitment to quality, innovation, and customer satisfaction has made us a trusted name in both electrical and agricultural sectors, helping businesses grow and farmers increase their productivity.

10000+

Happy Customers

500+

Products Range

{/* Mission, Vision, Values */}

Our Mission, Vision & Values

The principles that drive our commitment to excellence

Our Mission

To empower Indian industries and agriculture with premium electrical hardware and farming equipment that drives productivity, efficiency, and sustainable growth.

Our Vision

To be India's leading provider of electrical and farming solutions, recognized for quality, innovation, and customer-centric approach.

Our Values

Quality, integrity, innovation, and customer satisfaction form the foundation of everything we do at EMKAY INDIA.

{/* Core Values */}

{values.map((value, index) => (

{value.icon}

{value.title}

{value.description}

))}

{/* Timeline */}

Our Journey

Milestones & Achievements

Key moments that shaped EMKAY INDIA's growth story

{milestones.map((milestone, index) => (

{milestone.year}

{milestone.event}

{milestone.description}

))}

{/* Team Section */}

Our Team

Meet Our Leadership

The dedicated professionals driving EMKAY INDIA forward

{team.map((member, index) => (

{member.name}

{member.position}

{member.bio}

))}

{/* CTA Section */}

Ready to Partner With EMKAY INDIA?

Let's discuss how our expertise can help power your business and farming operations.

{/* Footer */} {/* WhatsApp Float Button */} {/* Back to Top Button */}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { Search, Menu, X, Phone, Mail, MapPin, Clock, Send, Facebook, Twitter, Linkedin, Instagram, Youtube, MessageCircle, CheckCircle, Zap, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function ContactPage() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isDarkMode, setIsDarkMode] = useState(false) const [formSubmitted, setFormSubmitted] = useState(false) useEffect(() => { if (isDarkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [isDarkMode]) const navigationItems = [ { name: "Home", href: "/" }, { name: "About Us", href: "/about" }, { name: "Products", href: "/products" }, { name: "Contact Us", href: "/contact" }, ] const contactInfo = [ { icon: , title: "Phone", details: ["+91 98765 43210", "+91 98765 43211"], description: "Mon-Sat 9AM-7PM IST", }, { icon: , title: "Email", details: ["info@emkayindia.com", "sales@emkayindia.com"], description: "We'll respond within 24 hours", }, { icon: , title: "Address", details: ["Industrial Area, Sector 62", "New Delhi, India - 110001"], description: "Visit our showroom & warehouse", }, { icon: , title: "Business Hours", details: ["Mon-Sat: 9:00 AM - 7:00 PM", "Sunday: 10:00 AM - 5:00 PM"], description: "Emergency support available", }, ] const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setFormSubmitted(true) // Here you would typically handle the form submission setTimeout(() => setFormSubmitted(false), 3000) } return (

{/* Header */}

{/* Logo */}

EMKAY INDIA

Powering Progress & Growth

{/* Desktop Navigation */} {/* Search and Actions */}

{/* Mobile menu button */}

{/* Mobile Navigation */} {isMenuOpen && (

{navigationItems.map((item) => ( setIsMenuOpen(false)} > {item.name} ))}

)}

{/* Hero Section */}

Contact EMKAY INDIA

Get In Touch

Ready to power your business or farm? Let's discuss how EMKAY INDIA can provide the perfect electrical and farming solutions for you.

{/* Contact Information */}

Multiple Ways to Reach Us

Choose the method that works best for you

{contactInfo.map((info, index) => (

{info.icon}

{info.title}

{info.details.map((detail, idx) => (

{detail}

))}

{info.description}

))}

{/* Contact Form & Map */}

{/* Contact Form */}

Send Message

Let's Start a Conversation

Fill out the form below and we'll get back to you within 24 hours with the best solutions for your needs.

{formSubmitted ? (

Message Sent Successfully!

Thank you for contacting EMKAY INDIA. Our team will get back to you within 24 hours with the best solutions.

) : (

First Name *

Last Name *

Email *

Phone *

Company/Farm Name

Product Interest

Message *

</div>

<Button
                        type="submit"
                        size="lg"
                        className="w-full bg-gradient-to-r from-blue-600 to-orange-500 hover:from-blue-700 hover:to-orange-600 text-white font-semibold"
                      >
                        <Send className="mr-2 h-4 w-4" />
                        Send Message
                      </Button>
                    </form>
                  </CardContent>
                </Card>
              )}
            </div>

{/* Map & Additional Info */}
            <div className="space-y-8">
              {/* Map Placeholder */}
              <Card className="border-0 shadow-xl overflow-hidden bg-white/90 backdrop-blur-sm">
                <div className="h-64 bg-gradient-to-br from-blue-100 to-orange-100 dark:from-blue-900/30 dark:to-orange-900/30 flex items-center justify-center">
                  <div className="text-center">
                    <MapPin className="h-12 w-12 text-blue-600 mx-auto mb-2" />
                    <p className="text-gray-700 dark:text-gray-300 font-semibold">EMKAY INDIA Location</p>
                    <p className="text-sm text-gray-500">Industrial Area, Sector 62, New Delhi</p>
                  </div>
                </div>
              </Card>

{/* Office Hours */}
              <Card className="border-0 shadow-xl bg-white/90 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Clock className="h-5 w-5 text-blue-600 mr-2" />
                    Business Hours
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-300">Monday - Saturday</span>
                      <span className="font-medium">9:00 AM - 7:00 PM</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-300">Sunday</span>
                      <span className="font-medium">10:00 AM - 5:00 PM</span>
                    </div>
                    <div className="pt-3 border-t-2 border-gray-100">
                      <p className="text-sm text-blue-600 dark:text-blue-400 font-medium">
                        Emergency Support: Available for urgent requirements
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Quick Contact */}
              <Card className="border-0 shadow-xl bg-gradient-to-r from-blue-50 to-orange-50 dark:from-blue-900/20 dark:to-orange-900/20">
                <CardHeader>
                  <CardTitle className="text-blue-800 dark:text-blue-300">Need Immediate Help?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-blue-700 dark:text-blue-300 mb-4">
                    For urgent electrical or farming equipment requirements, contact us directly for immediate
                    assistance.
                  </p>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <Button className="bg-gradient-to-r from-blue-600 to-orange-500 hover:from-blue-700 hover:to-orange-600 text-white font-semibold">
                      <Phone className="mr-2 h-4 w-4" />
                      Call Now
                    </Button>
                    <Button
                      variant="outline"
                      className="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold"
                    >
                      <MessageCircle className="mr-2 h-4 w-4" />
                      WhatsApp
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-800 dark:to-gray-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-gradient-to-r from-blue-600 to-orange-500 text-white border-0">FAQ</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              Frequently Asked Questions
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300">
              Quick answers to common questions about our products and services
            </p>
          </div>

<div className="space-y-6">
            {[
              {
                question: "What is your typical response time for inquiries?",
                answer:
                  "We respond to all inquiries within 24 hours during business days. For urgent electrical or farming equipment requirements, we offer immediate phone support during business hours.",
              },
              {
                question: "Do you provide installation and maintenance services?",
                answer:
                  "Yes, we provide complete installation services for all our electrical hardware and farming equipment. We also offer regular maintenance contracts and 24/7 emergency support.",
              },
              {
                question: "What areas do you serve across India?",
                answer:
                  "We serve customers across 50+ cities in India including Delhi NCR, Mumbai, Bangalore, Chennai, Pune, Hyderabad, and major agricultural regions. We also provide pan-India shipping.",
              },
              {
                question: "Do you offer bulk pricing for large orders?",
                answer:
                  "Yes, we offer attractive bulk pricing for large orders and long-term contracts. Contact our sales team for customized pricing based on your specific requirements and volume.",
              },
              {
                question: "What warranty do you provide on your products?",
                answer:
                  "All our products come with manufacturer warranty ranging from 1-5 years depending on the product category. We also provide extended warranty options and comprehensive after-sales support.",
              },
            ].map((faq, index) => (
              <Card key={index} className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{faq.question}</h3>
                  <p className="text-gray-600 dark:text-gray-300">{faq.answer}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-16 border-t-4 border-gradient-to-r from-blue-600 to-orange-500">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            {/* Company Info */}
            <div className="space-y-4">
              <div className="flex items-center space-x-3">
                <div className="bg-gradient-to-r from-blue-600 to-orange-500 p-2 rounded-lg">
                  <Zap className="h-6 w-6 text-white" />
                </div>
                <div className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-orange-400 bg-clip-text text-transparent">
                  EMKAY INDIA
                </div>
              </div>
              <p className="text-gray-300">
                Powering Progress & Growth through premium electrical hardware and advanced farming equipment solutions
                across India.
              </p>
              <div className="flex space-x-4">
                {[Facebook, Twitter, Linkedin, Instagram, Youtube].map((Icon, index) => (
                  <Button
                    key={index}
                    size="sm"
                    variant="ghost"
                    className="text-gray-400 hover:text-white bg-gray-800 hover:bg-blue-600"
                  >
                    <Icon className="h-5 w-5" />
                  </Button>
                ))}
              </div>
            </div>

{/* Quick Links */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Quick Links</h3>
              <ul className="space-y-2">
                {navigationItems.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-gray-300 hover:text-white transition-colors hover:text-orange-400"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Products */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-orange-400">Our Products</h3>
              <ul className="space-y-2">
                {[
                  "Electrical Hardware",
                  "Wire Machines",
                  "MCB Switches",
                  "Farming Equipment",
                  "Industrial Solutions",
                ].map((product) => (
                  <li key={product}>
                    <Link
                      href="/products"
                      className="text-gray-300 hover:text-white transition-colors hover:text-blue-400"
                    >
                      {product}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Contact Info */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Contact Info</h3>
              <div className="space-y-3">
                <div className="flex items-center">
                  <MapPin className="h-5 w-5 text-orange-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">Industrial Area, New Delhi, India</span>
                </div>
                <div className="flex items-center">
                  <Phone className="h-5 w-5 text-orange-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">+91 98765 43210</span>
                </div>
                <div className="flex items-center">
                  <Mail className="h-5 w-5 text-orange-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">info@emkayindia.com</span>
                </div>
              </div>
            </div>
          </div>

<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
            <p>© 2024 EMKAY INDIA. All rights reserved. | Powering Progress & Growth</p>
          </div>
        </div>
      </footer>

{/* WhatsApp Float Button */}
      <Button
        className="fixed bottom-6 left-6 z-50 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 rounded-full w-14 h-14 shadow-xl border-2 border-white"
        size="lg"
      >
        <MessageCircle className="h-6 w-6" />
      </Button>

{/* Back to Top Button */}
      <Button
        className="fixed bottom-6 right-6 z-50 rounded-full w-12 h-12 shadow-xl bg-gradient-to-r from-blue-600 to-orange-500 hover:from-blue-700 hover:to-orange-600 text-white border-2 border-white"
        size="lg"
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      >
        ↑
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import {
  Search,
  Menu,
  X,
  Zap,
  Facebook,
  Twitter,
  Linkedin,
  Instagram,
  Youtube,
  MessageCircle,
  Download,
  Filter,
  User,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export default function ProductsPage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [viewMode, setViewMode] = useState("datasheet")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [selectedProduct, setSelectedProduct] = useState(null)

useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [isDarkMode])

const navigationItems = [
    { name: "Home", href: "/" },
    { name: "About Us", href: "/about" },
    { name: "Products", href: "/products" },
    { name: "Contact Us", href: "/contact" },
  ]

const categories = [
    { id: "all", name: "All Products" },
    { id: "electrical", name: "Electrical Hardware" },
    { id: "wire", name: "Wire Machines" },
    { id: "mcb", name: "MCB & Switches" },
    { id: "farming", name: "Farming Equipment" },
    { id: "industrial", name: "Industrial Solutions" },
  ]

const productDatasheets = [
    {
      category: "MCB & Switches",
      categoryId: "mcb",
      description: "Miniature Circuit Breakers with superior protection and reliability",
      hsn: "8536",
      products: [
        {
          name: "Single Pole MCB",
          variants: [
            { rating: "6A", catNo: "EM10060C", curve: "C", price: "₹185", modules: 1, availability: "In Stock" },
            { rating: "10A", catNo: "EM10100C", curve: "C", price: "₹185", modules: 1, availability: "In Stock" },
            { rating: "16A", catNo: "EM10160C", curve: "C", price: "₹185", modules: 1, availability: "In Stock" },
            { rating: "20A", catNo: "EM10200C", curve: "C", price: "₹185", modules: 1, availability: "In Stock" },
            { rating: "25A", catNo: "EM10250C", curve: "C", price: "₹185", modules: 1, availability: "In Stock" },
            { rating: "32A", catNo: "EM10320C", curve: "C", price: "₹285", modules: 1, availability: "In Stock" },
            { rating: "40A", catNo: "EM10400C", curve: "C", price: "₹285", modules: 1, availability: "In Stock" },
            { rating: "50A", catNo: "EM10500C", curve: "C", price: "₹385", modules: 1, availability: "In Stock" },
            { rating: "63A", catNo: "EM10630C", curve: "C", price: "₹385", modules: 1, availability: "In Stock" },
          ],
        },
        {
          name: "Double Pole MCB",
          variants: [
            { rating: "6A", catNo: "EM20060C", curve: "C", price: "₹365", modules: 2, availability: "In Stock" },
            { rating: "10A", catNo: "EM20100C", curve: "C", price: "₹365", modules: 2, availability: "In Stock" },
            { rating: "16A", catNo: "EM20160C", curve: "C", price: "₹365", modules: 2, availability: "In Stock" },
            { rating: "20A", catNo: "EM20200C", curve: "C", price: "₹365", modules: 2, availability: "In Stock" },
            { rating: "25A", catNo: "EM20250C", curve: "C", price: "₹365", modules: 2, availability: "In Stock" },
            { rating: "32A", catNo: "EM20320C", curve: "C", price: "₹485", modules: 2, availability: "In Stock" },
            { rating: "40A", catNo: "EM20400C", curve: "C", price: "₹485", modules: 2, availability: "In Stock" },
            { rating: "50A", catNo: "EM20500C", curve: "C", price: "₹585", modules: 2, availability: "In Stock" },
            { rating: "63A", catNo: "EM20630C", curve: "C", price: "₹585", modules: 2, availability: "In Stock" },
          ],
        },
        {
          name: "Triple Pole MCB",
          variants: [
            { rating: "6A", catNo: "EM30060C", curve: "C", price: "₹545", modules: 3, availability: "In Stock" },
            { rating: "10A", catNo: "EM30100C", curve: "C", price: "₹545", modules: 3, availability: "In Stock" },
            { rating: "16A", catNo: "EM30160C", curve: "C", price: "₹545", modules: 3, availability: "In Stock" },
            { rating: "20A", catNo: "EM30200C", curve: "C", price: "₹545", modules: 3, availability: "In Stock" },
            { rating: "25A", catNo: "EM30250C", curve: "C", price: "₹545", modules: 3, availability: "In Stock" },
            { rating: "32A", catNo: "EM30320C", curve: "C", price: "₹725", modules: 3, availability: "In Stock" },
            { rating: "40A", catNo: "EM30400C", curve: "C", price: "₹725", modules: 3, availability: "In Stock" },
            { rating: "50A", catNo: "EM30500C", curve: "C", price: "₹885", modules: 3, availability: "In Stock" },
            { rating: "63A", catNo: "EM30630C", curve: "C", price: "₹885", modules: 3, availability: "In Stock" },
          ],
        },
      ],
    },
    {
      category: "Wire Machines",
      categoryId: "wire",
      description: "Advanced wire drawing and cable making machines for industrial applications",
      hsn: "8515",
      products: [
        {
          name: "Wire Drawing Machines",
          variants: [
            {
              rating: "Single Die 0.5-2.5mm",
              catNo: "WD-SD-25",
              curve: "-",
              price: "₹2,50,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Multi Die 0.1-1.5mm",
              catNo: "WD-MD-15",
              curve: "-",
              price: "₹4,75,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Heavy Duty 1-5mm",
              catNo: "WD-HD-50",
              curve: "-",
              price: "₹8,50,000",
              modules: "-",
              availability: "Made to Order",
            },
            {
              rating: "Automatic Line 0.1-3mm",
              catNo: "WD-AL-30",
              curve: "-",
              price: "₹15,00,000",
              modules: "-",
              availability: "Made to Order",
            },
          ],
        },
        {
          name: "Cable Making Machines",
          variants: [
            {
              rating: "2 Core Cable",
              catNo: "CM-2C-100",
              curve: "-",
              price: "₹3,25,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "4 Core Cable",
              catNo: "CM-4C-100",
              curve: "-",
              price: "₹4,85,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Multi Core Cable",
              catNo: "CM-MC-100",
              curve: "-",
              price: "₹7,50,000",
              modules: "-",
              availability: "Made to Order",
            },
            {
              rating: "Armoured Cable",
              catNo: "CM-AC-100",
              curve: "-",
              price: "₹12,50,000",
              modules: "-",
              availability: "Made to Order",
            },
          ],
        },
      ],
    },
    {
      category: "Farming Equipment",
      categoryId: "farming",
      description: "Modern agricultural equipment for enhanced farming productivity",
      hsn: "8413",
      products: [
        {
          name: "Submersible Pumps",
          variants: [
            { rating: "1HP", catNo: "SP-1HP-50", curve: "-", price: "₹8,500", modules: "-", availability: "In Stock" },
            { rating: "2HP", catNo: "SP-2HP-65", curve: "-", price: "₹12,500", modules: "-", availability: "In Stock" },
            { rating: "3HP", catNo: "SP-3HP-80", curve: "-", price: "₹18,500", modules: "-", availability: "In Stock" },
            {
              rating: "5HP",
              catNo: "SP-5HP-100",
              curve: "-",
              price: "₹28,500",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "7.5HP",
              catNo: "SP-75HP-120",
              curve: "-",
              price: "₹38,500",
              modules: "-",
              availability: "Limited Stock",
            },
            {
              rating: "10HP",
              catNo: "SP-10HP-150",
              curve: "-",
              price: "₹45,000",
              modules: "-",
              availability: "Limited Stock",
            },
          ],
        },
        {
          name: "Irrigation Systems",
          variants: [
            {
              rating: "Drip Kit 1 Acre",
              catNo: "DK-1A-100",
              curve: "-",
              price: "₹15,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Drip Kit 2 Acre",
              catNo: "DK-2A-200",
              curve: "-",
              price: "₹28,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Sprinkler Kit 1 Acre",
              catNo: "SK-1A-150",
              curve: "-",
              price: "₹18,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Sprinkler Kit 2 Acre",
              catNo: "SK-2A-300",
              curve: "-",
              price: "₹32,000",
              modules: "-",
              availability: "In Stock",
            },
            {
              rating: "Micro Sprinkler Kit",
              catNo: "MSK-1A-120",
              curve: "-",
              price: "₹22,000",
              modules: "-",
              availability: "In Stock",
            },
          ],
        },
      ],
    },
    {
      category: "Electrical Hardware",
      categoryId: "electrical",
      description: "Complete electrical distribution and protection equipment",
      hsn: "8537",
      products: [
        {
          name: "Distribution Panels",
          variants: [
            {
              rating: "4 Way SPN",
              catNo: "DP-4W-SPN",
              curve: "-",
              price: "₹5,500",
              modules: "4",
              availability: "In Stock",
            },
            {
              rating: "6 Way SPN",
              catNo: "DP-6W-SPN",
              curve: "-",
              price: "₹6,800",
              modules: "6",
              availability: "In Stock",
            },
            {
              rating: "8 Way SPN",
              catNo: "DP-8W-SPN",
              curve: "-",
              price: "₹8,500",
              modules: "8",
              availability: "In Stock",
            },
            {
              rating: "12 Way SPN",
              catNo: "DP-12W-SPN",
              curve: "-",
              price: "₹12,500",
              modules: "12",
              availability: "In Stock",
            },
            {
              rating: "16 Way SPN",
              catNo: "DP-16W-SPN",
              curve: "-",
              price: "₹15,000",
              modules: "16",
              availability: "In Stock",
            },
            {
              rating: "4 Way TPN",
              catNo: "DP-4W-TPN",
              curve: "-",
              price: "₹8,500",
              modules: "12",
              availability: "In Stock",
            },
            {
              rating: "6 Way TPN",
              catNo: "DP-6W-TPN",
              curve: "-",
              price: "₹11,500",
              modules: "18",
              availability: "In Stock",
            },
            {
              rating: "8 Way TPN",
              catNo: "DP-8W-TPN",
              curve: "-",
              price: "₹14,500",
              modules: "24",
              availability: "In Stock",
            },
          ],
        },
        {
          name: "RCCB",
          variants: [
            {
              rating: "25A 30mA DP",
              catNo: "RC-25-30-2P",
              curve: "-",
              price: "₹1,850",
              modules: "2",
              availability: "In Stock",
            },
            {
              rating: "40A 30mA DP",
              catNo: "RC-40-30-2P",
              curve: "-",
              price: "₹2,150",
              modules: "2",
              availability: "In Stock",
            },
            {
              rating: "63A 30mA DP",
              catNo: "RC-63-30-2P",
              curve: "-",
              price: "₹2,650",
              modules: "2",
              availability: "In Stock",
            },
            {
              rating: "100A 30mA DP",
              catNo: "RC-100-30-2P",
              curve: "-",
              price: "₹4,850",
              modules: "2",
              availability: "In Stock",
            },
            {
              rating: "25A 30mA FP",
              catNo: "RC-25-30-4P",
              curve: "-",
              price: "₹2,850",
              modules: "4",
              availability: "In Stock",
            },
            {
              rating: "40A 30mA FP",
              catNo: "RC-40-30-4P",
              curve: "-",
              price: "₹3,250",
              modules: "4",
              availability: "In Stock",
            },
            {
              rating: "63A 30mA FP",
              catNo: "RC-63-30-4P",
              curve: "-",
              price: "₹3,850",
              modules: "4",
              availability: "In Stock",
            },
            {
              rating: "100A 30mA FP",
              catNo: "RC-100-30-4P",
              curve: "-",
              price: "₹6,250",
              modules: "4",
              availability: "In Stock",
            },
          ],
        },
      ],
    },
  ]

const filteredDatasheets =
    selectedCategory === "all"
      ? productDatasheets
      : productDatasheets.filter((sheet) => sheet.categoryId === selectedCategory)

return (
    <div className={`min-h-screen ${isDarkMode ? "dark" : ""}`}>
      {/* Header */}
      <header className="bg-white dark:bg-gray-900 shadow-lg sticky top-0 z-50 border-b-4 border-blue-600">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-18">
            {/* Logo */}
            <Link href="/" className="flex items-center py-2">
              <div className="flex items-center space-x-3">
                <div className="bg-blue-600 p-2 rounded-lg">
                  <Zap className="h-8 w-8 text-white" />
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">EMKAY INDIA</div>
                  <div className="text-xs text-gray-500 dark:text-gray-400 font-medium">Powering Progress & Growth</div>
                </div>
              </div>
            </Link>

{/* Desktop Navigation */}
            <nav className="hidden lg:flex space-x-8">
              {navigationItems.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`px-3 py-2 text-sm font-semibold transition-colors relative group ${
                    item.href === "/products"
                      ? "text-blue-600 dark:text-blue-400"
                      : "text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
                  }`}
                >
                  {item.name}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
                </Link>
              ))}
            </nav>

{/* Search and Actions */}
            <div className="flex items-center space-x-4">
              <div className="hidden md:flex items-center space-x-2">
                <Input
                  type="search"
                  placeholder="Search products..."
                  className="w-40 h-8 border-2 border-blue-200 focus:border-blue-500"
                />
                <Button size="sm" variant="ghost" className="hover:bg-blue-50">
                  <Search className="h-4 w-4" />
                </Button>
              </div>

<Button variant="ghost" size="sm" onClick={() => setIsDarkMode(!isDarkMode)} className="hover:bg-blue-50">
                {isDarkMode ? "☀️" : "🌙"}
              </Button>

<Button
                size="sm"
                className="hidden md:inline-flex bg-blue-600 hover:bg-blue-700 text-white font-semibold"
              >
                <User className="mr-2 h-4 w-4" />
                Login
              </Button>

{/* Mobile menu button */}
              <Button variant="ghost" size="sm" className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
                {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
              </Button>
            </div>
          </div>
        </div>

{/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="lg:hidden bg-white dark:bg-gray-900 border-t-2 border-blue-200">
            <div className="px-2 pt-2 pb-3 space-y-1">
              {navigationItems.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 rounded-md"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>
        )}
      </header>

{/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-900 via-blue-800 to-slate-800 text-white py-20">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <Badge className="mb-4 bg-blue-600 text-white border-0">Product Datasheets</Badge>
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              Technical <span className="text-blue-300">Specifications</span> & Variants
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Comprehensive technical datasheets with detailed specifications, catalog numbers, and pricing for all
              EMKAY INDIA products.
            </p>
          </div>
        </div>
      </section>

{/* Filters and Controls */}
      <section className="py-8 bg-blue-50 dark:bg-gray-800 border-b-2 border-blue-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            {/* Category Filters */}
            <div className="flex flex-wrap gap-2">
              {categories.map((category) => (
                <Button
                  key={category.id}
                  variant={selectedCategory === category.id ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedCategory(category.id)}
                  className={
                    selectedCategory === category.id
                      ? "bg-blue-600 hover:bg-blue-700 text-white border-0"
                      : "border-2 border-blue-200 hover:border-blue-400"
                  }
                >
                  {category.name}
                </Button>
              ))}
            </div>

{/* Actions */}
            <div className="flex items-center gap-4">
              <Button variant="outline" size="sm" className="border-2 border-blue-200 hover:border-blue-400">
                <Download className="mr-2 h-4 w-4" />
                Download PDF
              </Button>
              <Button variant="outline" size="sm" className="border-2 border-blue-200 hover:border-blue-400">
                <Filter className="mr-2 h-4 w-4" />
                Advanced Filter
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Product Datasheets */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-16">
            {filteredDatasheets.map((datasheet, index) => (
              <div key={index} className="space-y-8">
                {/* Category Header */}
                <div className="text-center">
                  <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    {datasheet.category}
                  </h2>
                  <p className="text-xl text-gray-600 dark:text-gray-300 mb-2">{datasheet.description}</p>
                  <Badge className="bg-gray-100 text-gray-700 border-0">HSN Code: {datasheet.hsn}</Badge>
                </div>

{/* Products */}
                {datasheet.products.map((product, productIndex) => (
                  <Card key={productIndex} className="border-0 shadow-xl bg-white/90 backdrop-blur-sm">
                    <CardHeader className="bg-blue-50 dark:bg-blue-900/20">
                      <CardTitle className="text-2xl text-blue-800 dark:text-blue-300">{product.name}</CardTitle>
                      <CardDescription className="text-gray-600 dark:text-gray-400">
                        Range Highlights: Premium quality, IS/IEC certified, reliable performance
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="p-0">
                      <div className="overflow-x-auto">
                        <Table>
                          <TableHeader>
                            <TableRow className="bg-gray-50 dark:bg-gray-800">
                              <TableHead className="font-semibold text-gray-900 dark:text-white">Rating</TableHead>
                              <TableHead className="font-semibold text-gray-900 dark:text-white">Cat. No.</TableHead>
                              {datasheet.categoryId === "mcb" && (
                                <TableHead className="font-semibold text-gray-900 dark:text-white">Curve</TableHead>
                              )}
                              <TableHead className="font-semibold text-gray-900 dark:text-white">
                                {datasheet.categoryId === "mcb" ? "Modules" : "Specifications"}
                              </TableHead>
                              <TableHead className="font-semibold text-gray-900 dark:text-white">M.R.P. (₹)</TableHead>
                              <TableHead className="font-semibold text-gray-900 dark:text-white">
                                Availability
                              </TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {product.variants.map((variant, variantIndex) => (
                              <TableRow
                                key={variantIndex}
                                className="hover:bg-blue-50 dark:hover:bg-blue-900/10 transition-colors"
                              >
                                <TableCell className="font-medium">{variant.rating}</TableCell>
                                <TableCell className="font-mono text-blue-600">{variant.catNo}</TableCell>
                                {datasheet.categoryId === "mcb" && <TableCell>{variant.curve}</TableCell>}
                                <TableCell>{variant.modules}</TableCell>
                                <TableCell className="font-semibold text-blue-600">{variant.price}</TableCell>
                                <TableCell>
                                  <Badge
                                    className={`${
                                      variant.availability === "In Stock"
                                        ? "bg-green-100 text-green-800"
                                        : variant.availability === "Limited Stock"
                                          ? "bg-yellow-100 text-yellow-800"
                                          : "bg-blue-100 text-blue-800"
                                    } border-0`}
                                  >
                                    {variant.availability}
                                  </Badge>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </CardContent>
                  </Card>
                ))}

{/* Technical Notes */}
                <Card className="border-l-4 border-l-blue-600 bg-blue-50 dark:bg-blue-900/20">
                  <CardContent className="p-6">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Technical Notes:</h4>
                    <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                      <li>• All products conform to relevant IS/IEC standards</li>
                      <li>• Standard pack quantities vary by product type</li>
                      <li>• Current GST 18%, subject to changes as per Govt. notification</li>
                      <li>• For bulk orders and custom specifications, please contact our technical team</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-blue-600 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-black/10"></div>
        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Need Technical Support?</h2>
          <p className="text-xl mb-8 opacity-90">
            Our technical experts are available to help you select the right products for your specific requirements.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100 font-semibold shadow-lg"
            >
              Technical Consultation
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-semibold"
            >
              Download Complete Catalog
            </Button>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-16 border-t-4 border-blue-600">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            {/* Company Info */}
            <div className="space-y-4">
              <div className="flex items-center space-x-3">
                <div className="bg-blue-600 p-2 rounded-lg">
                  <Zap className="h-6 w-6 text-white" />
                </div>
                <div className="text-2xl font-bold text-blue-400">EMKAY INDIA</div>
              </div>
              <p className="text-gray-300">
                Powering Progress & Growth through premium electrical hardware and advanced farming equipment solutions
                across India.
              </p>
              <div className="flex space-x-4">
                {[Facebook, Twitter, Linkedin, Instagram, Youtube].map((Icon, index) => (
                  <Button
                    key={index}
                    size="sm"
                    variant="ghost"
                    className="text-gray-400 hover:text-white bg-gray-800 hover:bg-blue-600"
                  >
                    <Icon className="h-5 w-5" />
                  </Button>
                ))}
              </div>
            </div>

{/* Quick Links */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Quick Links</h3>
              <ul className="space-y-2">
                {navigationItems.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-gray-300 hover:text-white transition-colors hover:text-blue-400"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Product Categories */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Product Categories</h3>
              <ul className="space-y-2">
                {[
                  "Electrical Hardware",
                  "Wire Machines",
                  "MCB & Switches",
                  "Farming Equipment",
                  "Industrial Solutions",
                ].map((category) => (
                  <li key={category}>
                    <Link
                      href="/products"
                      className="text-gray-300 hover:text-white transition-colors hover:text-blue-400"
                    >
                      {category}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Contact Info */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Contact Info</h3>
              <div className="space-y-3">
                <div className="flex items-center">
                  <div className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0">📍</div>
                  <span className="text-gray-300">Industrial Area, New Delhi, India</span>
                </div>
                <div className="flex items-center">
                  <div className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0">📞</div>
                  <span className="text-gray-300">+91 98765 43210</span>
                </div>
                <div className="flex items-center">
                  <div className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0">✉️</div>
                  <span className="text-gray-300">info@emkayindia.com</span>
                </div>
              </div>
            </div>
          </div>

{/* WhatsApp Float Button */}
      <Button
        className="fixed bottom-6 left-6 z-50 bg-green-600 hover:bg-green-700 rounded-full w-14 h-14 shadow-xl border-2 border-white"
        size="lg"
      >
        <MessageCircle className="h-6 w-6" />
      </Button>

{/* Back to Top Button */}
      <Button
        className="fixed bottom-6 right-6 z-50 rounded-full w-12 h-12 shadow-xl bg-blue-600 hover:bg-blue-700 text-white border-2 border-white"
        size="lg"
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      >
        ↑
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  Search,
  Menu,
  X,
  Star,
  ArrowRight,
  Phone,
  Mail,
  MapPin,
  Facebook,
  Twitter,
  Linkedin,
  Instagram,
  Youtube,
  MessageCircle,
  Play,
  Zap,
  Settings,
  Wrench,
  User,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function HomePage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const router = useRouter()

useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [isDarkMode])

const navigationItems = [
    { name: "Home", href: "/" },
    { name: "About Us", href: "/about" },
    { name: "Products", href: "/products" },
    { name: "Contact Us", href: "/contact" },
  ]

const certifications = [
    { name: "ISO 9001:2015", image: "/placeholder.svg?height=80&width=80" },
    { name: "CE Certified", image: "/placeholder.svg?height=80&width=80" },
    { name: "BIS Approved", image: "/placeholder.svg?height=80&width=80" },
    { name: "ISI Mark", image: "/placeholder.svg?height=80&width=80" },
    { name: "Quality Assured", image: "/placeholder.svg?height=80&width=80" },
  ]

const testimonials = [
    {
      name: "Rajesh Kumar",
      position: "Farm Owner, Punjab",
      content:
        "EMKAY INDIA's farming equipment has revolutionized our agricultural operations. Excellent quality and service!",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      name: "Priya Sharma",
      position: "Electrical Contractor, Delhi",
      content:
        "Best quality electrical hardware in the market. Their MCBs and switches are highly reliable and durable.",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
    {
      name: "Amit Patel",
      position: "Industrial Engineer, Gujarat",
      content:
        "Outstanding wire machines and electrical equipment. EMKAY INDIA is our trusted partner for all electrical needs.",
      rating: 5,
      image: "/placeholder.svg?height=60&width=60",
    },
  ]

{/* Desktop Navigation */}
            <nav className="hidden lg:flex space-x-8">
              {navigationItems.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-semibold transition-colors relative group"
                >
                  {item.name}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
                </Link>
              ))}
            </nav>

<Button variant="ghost" size="sm" onClick={() => setIsDarkMode(!isDarkMode)} className="hover:bg-blue-50">
                {isDarkMode ? "☀️" : "🌙"}
              </Button>

{/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-900 via-blue-800 to-slate-800 text-white overflow-hidden">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Hero Content */}
            <div className="space-y-8">
              <div className="space-y-6">
                <Badge className="bg-blue-600 text-white border-0 px-4 py-2">
                  🔌 Leading Electrical & Farming Solutions
                </Badge>
                <h1 className="text-4xl md:text-6xl font-bold leading-tight">
                  <span className="text-blue-300">Power</span> Your <span className="text-white">Business</span>
                  <br />
                  <span className="text-blue-200">& Farm</span>
                </h1>
                <h2 className="text-xl md:text-2xl text-gray-200 font-medium">
                  Premium Electrical Hardware & Advanced Farming Equipment!
                </h2>
                <p className="text-lg text-gray-200 leading-relaxed">
                  EMKAY INDIA is your trusted partner for high-quality electrical hardware, wire machines, MCB switches,
                  and modern farming equipment. We deliver reliable solutions that power industries and enhance
                  agricultural productivity across India.
                </p>
              </div>

<div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-lg">
                  Explore Products <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-2 border-white text-white hover:bg-white hover:text-gray-900 font-semibold"
                >
                  <Play className="mr-2 h-4 w-4" />
                  Watch Demo
                </Button>
              </div>

{/* Certifications */}
              <div className="pt-8">
                <p className="text-sm text-gray-300 mb-4 font-medium">Certified & Quality Assured</p>
                <div className="flex flex-wrap gap-4">
                  {certifications.map((cert, index) => (
                    <div key={index} className="bg-white/10 backdrop-blur-sm rounded-xl p-3 border border-white/20">
                      <Image
                        src={cert.image || "/placeholder.svg"}
                        alt={cert.name}
                        width={60}
                        height={60}
                        className="opacity-90 hover:opacity-100 transition-opacity"
                      />
                    </div>
                  ))}
                </div>
              </div>
            </div>

{/* Hero Image */}
            <div className="relative">
              <div className="relative z-10">
                <div className="bg-blue-500/20 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                  <Image
                    src="/placeholder.svg?height=400&width=600"
                    alt="Electrical Hardware & Farming Equipment"
                    width={600}
                    height={400}
                    className="w-full h-auto rounded-lg"
                  />
                </div>
              </div>
              <div className="absolute inset-0 bg-blue-400/30 blur-3xl"></div>
            </div>
          </div>
        </div>

{/* Social Media Sidebar */}
        <div className="fixed right-4 top-1/2 transform -translate-y-1/2 z-40 hidden xl:block">
          <div className="flex flex-col space-y-3">
            {[Facebook, Twitter, Linkedin, Instagram, Youtube].map((Icon, index) => (
              <Button
                key={index}
                size="sm"
                variant="ghost"
                className="text-white hover:text-blue-300 bg-white/10 backdrop-blur-sm border border-white/20"
              >
                <Icon className="h-5 w-5" />
              </Button>
            ))}
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="py-20 bg-blue-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-5 gap-8">
            <div className="text-center">
              <div className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-2">
                20<span className="text-blue-600">+</span>
              </div>
              <div className="text-lg font-semibold text-gray-700 dark:text-gray-300">Years Of</div>
              <div className="text-lg font-semibold text-gray-700 dark:text-gray-300">Excellence</div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Serving industries with premium electrical hardware and farming solutions
              </p>
            </div>

<div className="text-center">
              <div className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
                500<span className="text-blue-600">+</span>
              </div>
              <div className="text-sm font-semibold text-gray-700 dark:text-gray-300">Product Range</div>
            </div>

<div className="text-center">
              <div className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
                50<span className="text-blue-600">+</span>
              </div>
              <div className="text-sm font-semibold text-gray-700 dark:text-gray-300">Cities Served</div>
            </div>

<div className="text-center">
              <div className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
                10000<span className="text-blue-600">+</span>
              </div>
              <div className="text-sm font-semibold text-gray-700 dark:text-gray-300">Happy Customers</div>
            </div>

<div className="text-center">
              <div className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
                24<span className="text-blue-600">X7</span>
              </div>
              <div className="text-sm font-semibold text-gray-700 dark:text-gray-300">Customer Support</div>
            </div>
          </div>
        </div>
      </section>

{/* Product Categories Preview */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-blue-600 text-white border-0">Our Specialties</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              Complete Electrical & Farming Solutions
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
              From electrical hardware to modern farming equipment, we provide everything you need to power your
              business and enhance productivity.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                icon: <Zap className="h-12 w-12" />,
                title: "Electrical Hardware",
                description:
                  "MCB switches, wire machines, electrical panels, and premium quality electrical components.",
                color: "bg-blue-600",
              },
              {
                icon: <Settings className="h-12 w-12" />,
                title: "Wire Machines",
                description: "Advanced wire drawing machines, cable making equipment, and wire processing tools.",
                color: "bg-blue-500",
              },
              {
                icon: <Wrench className="h-12 w-12" />,
                title: "Farming Equipment",
                description: "Modern agricultural machinery, irrigation systems, and farming automation tools.",
                color: "bg-blue-700",
              },
              {
                icon: <Settings className="h-12 w-12" />,
                title: "Industrial Solutions",
                description: "Complete industrial electrical solutions, automation systems, and maintenance services.",
                color: "bg-blue-800",
              },
            ].map((category, index) => (
              <Card
                key={index}
                className="group hover:shadow-2xl transition-all duration-300 border-0 shadow-lg overflow-hidden"
              >
                <CardContent className="p-8 text-center">
                  <div
                    className={`p-4 ${category.color} rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center text-white group-hover:scale-110 transition-transform`}
                  >
                    {category.icon}
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 transition-colors">
                    {category.title}
                  </h3>
                  <p className="text-gray-600 dark:text-gray-300 mb-4">{category.description}</p>
                  <Button variant="ghost" className="text-blue-600 hover:text-blue-700 font-semibold">
                    Learn More <ArrowRight className="ml-1 h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials Section */}
      <section className="py-20 bg-blue-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-blue-600 text-white border-0">Customer Reviews</Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              What Our Customers Say
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300">
              Trusted by thousands of businesses and farmers across India
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card
                key={index}
                className="border-0 shadow-xl hover:shadow-2xl transition-shadow bg-white/80 backdrop-blur-sm"
              >
                <CardContent className="p-8">
                  <div className="flex items-center mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-600 dark:text-gray-300 mb-6 italic">"{testimonial.content}"</p>
                  <div className="flex items-center">
                    <Image
                      src={testimonial.image || "/placeholder.svg"}
                      alt={testimonial.name}
                      width={48}
                      height={48}
                      className="rounded-full mr-4 border-2 border-blue-200"
                    />
                    <div>
                      <div className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</div>
                      <div className="text-sm text-blue-600 dark:text-blue-400 font-medium">{testimonial.position}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-blue-600 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-black/10"></div>
        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Power Your Success?</h2>
          <p className="text-xl mb-8 opacity-90">
            Get premium electrical hardware and farming equipment solutions tailored to your needs.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100 font-semibold shadow-lg"
            >
              <Phone className="mr-2 h-4 w-4" />
              Call Now
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-semibold"
            >
              <Mail className="mr-2 h-4 w-4" />
              Contact Us
            </Button>
          </div>
        </div>
      </section>

{/* Quick Links */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Quick Links</h3>
              <ul className="space-y-2">
                {navigationItems.map((item) => (
                  <li key={item.name}>
                    <Link
                      href={item.href}
                      className="text-gray-300 hover:text-white transition-colors hover:text-blue-400"
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Products */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Our Products</h3>
              <ul className="space-y-2">
                {[
                  "Electrical Hardware",
                  "Wire Machines",
                  "MCB Switches",
                  "Farming Equipment",
                  "Industrial Solutions",
                ].map((product) => (
                  <li key={product}>
                    <Link
                      href="/products"
                      className="text-gray-300 hover:text-white transition-colors hover:text-blue-400"
                    >
                      {product}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

{/* Contact Info */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-blue-400">Contact Info</h3>
              <div className="space-y-3">
                <div className="flex items-center">
                  <MapPin className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">Industrial Area, New Delhi, India</span>
                </div>
                <div className="flex items-center">
                  <Phone className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">+91 98765 43210</span>
                </div>
                <div className="flex items-center">
                  <Mail className="h-5 w-5 text-blue-400 mr-3 flex-shrink-0" />
                  <span className="text-gray-300">info@emkayindia.com</span>
                </div>
              </div>
            </div>
          </div>