'use client'

import { motion } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Badge } from '@/components/ui/badge'
import { MapPin, Phone, Mail, Clock, Send, ChevronRight } from 'lucide-react'
import PageHero from '@/components/sections/PageHero'
import ContactForm from '@/components/forms/ContactForm'

export default function ContactPage() {
  const contactInfo = [
    {
      icon: MapPin,
      title: 'Manufacturing Unit',
      details: 'Morabba No. 03, Firozpur Road',
      subtitle: 'Kaithal Siwan, Haryana',
      highlight: 'Production Facility'
    },
    {
      icon: MapPin,
      title: 'Corporate Office',
      details: '11B/79 Vrindavan Yojna',
      subtitle: 'Raibareli Road, Lucknow, India',
      highlight: 'Business Operations'
    }
  ]

  const businessInfo = [
    {
      icon: Phone,
      title: 'Business Phone',
      details: '+91 94757 58817',
      subtitle: 'Direct line to our sales team',
      highlight: 'Mon-Sat 9AM-6PM IST'
    },
    {
      icon: Mail,
      title: 'Business Email',
      details: 'info@padmajarice.com',
      subtitle: 'For inquiries and partnerships',
      highlight: 'Quick Response'
    },
    {
      icon: Clock,
      title: 'Business Hours',
      details: 'Always Open',
      subtitle: '24 x 7 x 375',
      highlight: 'Always Welcome'
    }
  ]

   return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <PageHero
        title=""
        subtitle="Contact Us"
        description="Partner with India's premium Basmati rice manufacturer. Connect with us for wholesale opportunities, bulk orders, and business partnerships."
        badge={{
          text: "Professional • Reliable • Trusted"
        }}
        backgroundGradient="from-blue-600/10 to-emerald-600/10"
        titleGradient="from-blue-600 to-emerald-600"
      />

      {/* Main Content */}
      <div className="bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">

        {/* Professional Contact Info Cards */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="mb-20"
        >
          {/* Addresses Section */}
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Locations</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Visit our manufacturing facility and corporate office for business partnerships and quality assurance.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            {contactInfo.map((info, index) => (
              <motion.div
                key={info.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
                whileHover={{ y: -8 }}
                className="group"
              >
                <Card className="h-full hover:shadow-2xl transition-all duration-300 border-0 shadow-lg bg-gradient-to-br from-white to-gray-50 group-hover:from-blue-50 group-hover:to-white">
                  <CardContent className="p-8 text-center">
                    <div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:from-blue-500 group-hover:to-blue-600 transition-all duration-300">
                      <info.icon className="h-10 w-10 text-blue-600 group-hover:text-white transition-colors duration-300" />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">
                      {info.title}
                    </h3>
                    <p className="text-gray-900 font-semibold mb-2 text-lg">
                      {info.details}
                    </p>
                    <p className="text-sm text-gray-600 mb-2">
                      {info.subtitle}
                    </p>
                    <div className="mt-3 pt-3 border-t border-gray-200">
                      <Badge variant="outline" className="text-xs font-medium bg-blue-50 text-blue-700 border-blue-200">
                        {info.highlight}
                      </Badge>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

          {/* Business Contact Section */}
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Business Contact</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Get in touch with our professional team for business inquiries and partnerships.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {businessInfo.map((info, index) => (
              <motion.div
                key={info.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
                whileHover={{ y: -8 }}
                className="group"
              >
                <Card className="h-full hover:shadow-2xl transition-all duration-300 border-0 shadow-lg bg-gradient-to-br from-white to-gray-50 group-hover:from-emerald-50 group-hover:to-white">
                  <CardContent className="p-8 text-center">
                    <div className="w-20 h-20 bg-gradient-to-br from-emerald-100 to-emerald-200 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:from-emerald-500 group-hover:to-emerald-600 transition-all duration-300">
                      <info.icon className="h-10 w-10 text-emerald-600 group-hover:text-white transition-colors duration-300" />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">
                      {info.title}
                    </h3>
                    <p className="text-gray-900 font-semibold mb-2 text-lg">
                      {info.details}
                    </p>
                    <p className="text-sm text-gray-600 mb-2">
                      {info.subtitle}
                    </p>
                    <div className="mt-3 pt-3 border-t border-gray-200">
                      <Badge variant="outline" className="text-xs font-medium bg-emerald-50 text-emerald-700 border-emerald-200">
                        {info.highlight}
                      </Badge>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Business Partnership CTA */}
        {/* <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="mb-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-8 md:p-12 text-white"
        >
          <div className="text-center">
            <h3 className="text-2xl md:text-3xl font-bold mb-4">Ready to Partner with Us?</h3>
            <p className="text-blue-100 text-lg mb-6 max-w-3xl mx-auto">
              Join India's leading Basmati rice manufacturer. We offer competitive wholesale pricing, 
              premium quality assurance, and reliable supply chain solutions for your business.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
              <div className="text-center">
                <div className="text-3xl font-bold text-blue-100">200+ CR</div>
                <div className="text-blue-200 text-sm">Annual Revenue</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-blue-100">FSSAI</div>
                <div className="text-blue-200 text-sm">Certified Quality</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-blue-100">24/7</div>
                <div className="text-blue-200 text-sm">Quality Focus</div>
              </div>
            </div>
          </div>
        </motion.div> */}

        {/* Professional Contact Form & Information */}
        <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Contact Us</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Ready to partner with us? Get in touch with our team for business inquiries and partnerships.
            </p>
          </div>
          
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Modern Minimal Contact Form */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="order-2 lg:order-1"
          >
            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
              <div className="p-8">
                <div className="mb-8">
                  <h2 className="text-2xl font-bold text-gray-900 mb-2">Get in touch</h2>
                  <p className="text-gray-600">
                    Connect with our team for business partnerships and bulk orders.
                  </p>
                </div>
                
                <ContactForm />
              </div>
            </div>
          </motion.div>

          {/* Business Information - Clean Masonry Layout */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="order-1 lg:order-2"
          >
            {/* Masonry Grid Layout */}
            <div className="grid grid-cols-1 gap-6 auto-rows-max">
              
              {/* Google Maps - Simplified */}
              <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <div className="p-4 border-b border-gray-100">
                  <div className="flex items-center text-gray-900 font-medium">
                    <MapPin className="h-4 w-4 text-orange-600 mr-2" />
                    Office Location
                  </div>
                </div>
                <div className="relative h-48 w-full">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3559.6756662889756!2d80.94482677549088!3d26.780273676736253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399bfb07d4460727%3A0xdd3f66282f88d3ce!2s11-B%2F79%2C%20Brij%20Vihar%2C%20Sector%2011%2C%20Vrindavan%20Colony%2C%20Lucknow%2C%20Uttar%20Pradesh%20226029!5e0!3m2!1sen!2sin!4v1697000000000!5m2!1sen!2sin"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen={true}
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                  ></iframe>
                </div>
                <div className="p-4 bg-gray-50">
                  <p className="text-sm font-medium text-gray-900">11B/79</p>
                  <p className="text-sm text-gray-600">Vrindavan Yojna, Lucknow - 226029</p>
                </div>
              </div>

              {/* Quick Stats - Minimal Grid */}
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-orange-50 rounded-xl border border-orange-100 p-4 text-center">
                  <div className="text-2xl font-bold text-orange-600 mb-1">200+ CR</div>
                  <div className="text-xs text-gray-600">Annual Revenue</div>
                </div>
                <div className="bg-green-50 rounded-xl border border-green-100 p-4 text-center">
                  <div className="text-2xl font-bold text-green-600 mb-1">FSSAI</div>
                  <div className="text-xs text-gray-600">Certified</div>
                </div>
              </div>


              {/* FAQ - Minimal Accordion */}
              <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Quick FAQ</h3>
                <Accordion type="single" collapsible className="w-full space-y-2">
                  <AccordionItem value="item-1" className="border-b border-gray-100 pb-2">
                    <AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
                      Minimum order quantity?
                    </AccordionTrigger>
                    <AccordionContent className="text-sm text-gray-600 pb-2">
                      1000 kg minimum for premium Basmati rice.
                    </AccordionContent>
                  </AccordionItem>
                  
                  <AccordionItem value="item-2" className="border-b border-gray-100 pb-2">
                    <AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
                      Do you provide samples?
                    </AccordionTrigger>
                    <AccordionContent className="text-sm text-gray-600 pb-2">
                      Yes, free samples up to 1 kg for evaluation.
                    </AccordionContent>
                  </AccordionItem>
                  
                  <AccordionItem value="item-3" className="border-none">
                    <AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
                      Payment terms?
                    </AccordionTrigger>
                    <AccordionContent className="text-sm text-gray-600">
                      Flexible terms with advance discounts available.
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </div>

            </div>
          </motion.div>
        </div>
        </div>
        </section>
        </div>
      </div>
    </div>
  )
}