import { useState, useEffect } from "react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import heroVideo from "@/assets/contact us.mp4";
import Chatbot from "@/components/Chatbot";
import Request from "@/components/request";
import SEO from "@/components/SEO";
import { useLanguage } from "@/contexts/LanguageContext";

/* ------------ INDIA BRANCH IMAGES ------------- */
import branchCoimbatoreSTPL from "@/assets/susin-logo.jpg";
import branchMumbai from "@/assets/mumbai susin.jpg";
import branchKTCIndia from "@/assets/ktc india.jpg";
import branchITorkIndia from "@/assets/susin india.jpg";

/* ------------ OTHER COUNTRY IMAGES ------------ */
import uaeImg from "@/assets/locations/uae.jpg";
import qatarImg from "@/assets/locations/qatar.jpg";
import omanImg from "@/assets/locations/oman.jpg";
import malaysiaImg from "@/assets/locations/malaysia.jpg";
import ktcControlsImg from "@/assets/locations/ktc-controls.jpg";

/* ----------------------------------------------------
                ALL LOCATION DATA (CORRECTED)
----------------------------------------------------*/
const locations = [
  /* -------------------------------- INDIA -------------------------------- */
  {
    id: "india",
    country: "India",
    region: "South Asia",
    branches: [
      {
        id: "coimbatore-stpl",
        title: "Susin Technologies (P) Ltd – Coimbatore",
        image: branchCoimbatoreSTPL,
        address: "No. 45-A 12, Vadakku Thottam Pakuthi Idigarai (Near Gas Company), Coimbatore - 641 022 INDIA",
        email: "info@susin.in",
        phone1: "+91 77080 97242 (Mr. Yuvaraj)",
        phone2: "+91-422- 7140448",
        website: "http://www.susingroup.com",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.924438880121!2d76.9155943153347!3d10.979870658721945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba85c6c9c6c6c6d%3A0x6c6c6c6c6c6c6c6c!2sSusin%20Technologies%20Idigarai%20Coimbatore!5e0!3m2!1sen!2sin!4v1686741234567!5m2!1sen!2sin"></iframe>'
      },
      {
        id: "mumbai",
        title: "Susin I-Tork India Pvt Ltd (MUMBAI)",
        image: branchMumbai,
        address: "Regus Business Centre, Level-I, Tiffany Building, Hiranandani Estate, Thane West— 400607, Maharashtra, India",
        email: "sruley@regulusss.com",
        phone1: "+91 74003 55579 (Mr. Sanjey Ruley)",
        website: "https://www.regulusss.com/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.656986188316!2d72.9763243153847!3d19.202988987060958!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b9d6a9a9a9a9%3A0x9a9a9a9a9a9a9a9a!2sHiranandani%20Estate%20Thane%20West!5e0!3m2!1sen!2sin!4v1686741234567!5m2!1sen!2sin"></iframe>'
      },
      {
        id: "coimbatore-ktc",
        title: "KTC Systemtechnik India Pvt Ltd",
        image: branchKTCIndia,
        address: "No. 43A, Vadakku Thottam Pakuthi Idigarai (Near Gas Company) Coimbatore - 641022 INDIA.",
        email: "sales@ktcsystem.in",
        phone1: "+91 82203 93006",
        website: "https://ktcsystem.in/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.924438880121!2d76.9155943153347!3d10.979870658721945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba85c6c9c6c6c6d%3A0x6c6c6c6c6c6c6c6c!2sIdigarai%20Coimbatore!5e0!3m2!1sen!2sin!4v1686741234567!5m2!1sen!2sin"></iframe>'
      },
      {
        id: "coimbatore-itork",
        title: "Susin I-Tork India Pvt Ltd",
        image: branchITorkIndia,
        address: "No. 43-A 9, Vadakku Thottam Pakuthi, Idigarai (Near Gas Company) Coimbatore - 641 022 INDIA.",
        email: "info@susinitork.in",
        phone1: "+91 63840 63034 (Mr. Dooshan - Sales)",
        phone2: "+91-422- 7140448 (landline)",
        website: "http://www.susinitork.in",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.924438880121!2d76.9155943153347!3d10.979870658721945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba85c6c9c6c6c6d%3A0x6c6c6c6c6c6c6c6c!2sSusin%20I-Tork%20India%20Pvt%20Ltd%20Coimbatore!5e0!3m2!1sen!2sin!4v1686741234567!5m2!1sen!2sin"></iframe>'
      }
    ]
  },

  /* -------------------------------- UAE -------------------------------- */
  {
    id: "uae",
    country: "UAE",
    region: "Middle East",
    branches: [
      {
        title: "Susin I-Tork - ME (Sharjah)",
        image: uaeImg,
        address: "SUSIN I-TORK ME FZC Y-61, SAIF SUIT, SAIF ZONE SHARJAH, UAE PO Box No: 122643",
        email: "info@susinitorkme.com",
        phone1: "+971-56810 3434 (Mr. Nivin)",
        phone2: "+971-50206 5541 (Mr. Vijay shankar)",
        website: "https://www.susinitorkme.com/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3608.892654678848!2d55.4272153153889!3d25.2048629838795!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f5f5f5f5f5f5f%3A0x5f5f5f5f5f5f5f5f!2sSAIF%20Zone%20Sharjah%20UAE!5e0!3m2!1sen!2sae!4v1686741234567!5m2!1sen!2sae"></iframe>'
      }
    ]
  },

  /* -------------------------------- QATAR -------------------------------- */
  {
    id: "qatar",
    country: "Qatar",
    region: "Middle East",
    branches: [
      {
        title: "Sosin Qatar Trading & Contracting W.L.L Arkan - Doha",
        image: qatarImg,
        address: "Building No.6, 2nd Floor, Office 46 Barwa Commercial Avenue, Abu Hamour P.O. Box - 220, Doha - Qatar",
        email: "sales@susingatar.com",
        phone1: "+974-3164 8923 (Mr. Raga)",
        phone2: "+974-3370 8598",
        website: "https://www.susingatar.com/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.456789012345!2d51.45678901234567!3d25.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c123456789ab%3A0x123456789abcdef!2sBarwa%20Commercial%20Avenue%20Doha%20Qatar!5e0!3m2!1sen!2sqa!4v1686741234567!5m2!1sen!2sqa"></iframe>'
      }
    ]
  },

  /* -------------------------------- OMAN -------------------------------- */
  {
    id: "oman",
    country: "Oman",
    region: "Middle East",
    branches: [
      {
        title: "Heavy Equipment Maintenance and Trading LLC - Muscat",
        image: omanImg,
        address: "Gulf Energy Building, Building No: 1/21,Road No: 5001, Near Al Nadha Tower, Ghala North, Muscat, Sultanate of Oman",
        email: "sales@susinitorkme.com",
        phone1: "+968 78489305 (Mr. Vaitheeswaran)",
        phone2: "+968 99836012 (H.E.M.T: Mr. Muhammad Siraj)",
        website: "https://susinitorkme.com/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.123456789012!2d58.12345678901234!3d23.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e8df123456789ab%3A0x123456789abcdef!2sGhala%20North%20Muscat%20Oman!5e0!3m2!1sen!2som!4v1686741234567!5m2!1sen!2som"></iframe>'
      }
    ]
  },

  /* -------------------------------- EUROPE -------------------------------- */
  {
    id: "europe",
    country: "Germany",
    region: "Europe",
    branches: [
      {
        title: "KTC CONTROLS – Hamburg",
        image: ktcControlsImg,
        address: "KTC CONTROLS Krähenweg 11 2459 Hamburg",
        email: "info@ktc-systemtechnik.de",
        phone1: "+49-(0)151 54 32 92 55 (Carsten Teichler)",
        phone2: "+49-(0)40-5714 752-12",
        website: "https://ktccontrols.com/",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2369.123456789012!2d9.123456789012345!3d53.12345678901234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b16123456789ab%3A0x123456789abcdef!2sKrähenweg%2011%2022459%20Hamburg%20Germany!5e0!3m2!1sen!2sde!4v1686741234567!5m2!1sen!2sde"></iframe>'
      }
    ]
  },

  /* -------------------------------- MALAYSIA -------------------------------- */
  {
    id: "malaysia",
    country: "Malaysia",
    region: "Southeast Asia",
    branches: [
      {
        title: "Susin I-Tork – Shah Alam",
        image: malaysiaImg,
        address: "Shah Alam, Selangor 40000, Malaysia",
        phone1: "+60 3 5567 8901",
        email: "malaysia@susin-itork.com",
        website: "http://www.susin-itork.com",
        mapIframe: '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127482.12345678901!2d101.12345678901234!3d3.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc123456789abc%3A0x123456789abcdef!2sShah%20Alam%20Selangor%20Malaysia!5e0!3m2!1sen!2smy!4v1686741234567!5m2!1sen!2smy"></iframe>'
      }
    ]
  }
];

/* ---------------------------------------------------------
                    PAGE START
----------------------------------------------------------*/
export default function Contact() {
  const { t } = useLanguage();
  const [selectedTab, setSelectedTab] = useState("india");

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div className="min-h-screen flex flex-col overflow-x-hidden">
      <SEO
        title="Contact Us - Susin Group"
        description="Contact Susin Group for industrial actuator solutions. Reach out to our offices in India, UAE, Qatar, Oman, Malaysia, and Europe. Get quotes, technical support, and product information from our expert team."
        keywords="contact Susin Group, actuator manufacturer contact, industrial automation contact, Susin India, Susin UAE, Susin Qatar, actuator sales, technical support, get quote"
        url="https://www.susinworld.in/contact"
        type="website"
        structuredData={{
          "@context": "https://schema.org",
          "@type": "ContactPage",
          name: "Contact Susin Group",
          description: "Contact information for Susin Group offices worldwide",
          url: "https://www.susinworld.in/contact",
        }}
      />
      <Navbar />

      {/* Main container with mobile optimization */}
      <main className="flex-1 bg-white overflow-x-hidden pt-0">
        
        {/* ---------------- HERO SECTION ---------------- */}
        <section className="relative w-full h-[50vh] sm:h-[60vh] md:h-[70vh] flex items-center justify-center overflow-hidden bg-black">
          <video
            src={heroVideo}
            autoPlay
            loop
            muted
            playsInline
            className="absolute inset-0 w-full h-full object-cover opacity-40"
          />
          
          {/* Clean dark overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent" />

          <div className="relative z-10 text-center px-4 max-w-7xl mx-auto w-full">
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-8xl text-white font-black tracking-tighter uppercase leading-tight">
              {t.contact?.title || "Contact Us"}
            </h1>
            {/* Decorative line */}
            <div className="h-px w-20 sm:w-32 bg-white/50 mx-auto mt-4 sm:mt-6" />
            <p className="text-white/70 mt-4 sm:mt-8 text-xs sm:text-sm font-light uppercase tracking-[0.3em] sm:tracking-[0.6em] px-4">
              {t.contact?.subtitle || "Global Industrial Solutions"}
            </p>
          </div>
        </section>

        {/* Request Section - Mobile Optimized */}
        <div className="relative z-20 -mt-16 sm:-mt-20 md:-mt-24 w-full px-3 sm:px-4 max-w-7xl mx-auto">
          <div className="bg-white border border-zinc-100 shadow-sm sm:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.1)] p-1 sm:p-2 w-full">
            <div className="border border-zinc-100 p-3 sm:p-4 md:p-8 w-full">
              <Request />
            </div>
          </div>
        </div>

        {/* ---------------- LOCATIONS TABS ---------------- */}
        <section className="py-12 sm:py-20 md:py-32 bg-white" id="locations">
          <div className="w-full px-3 sm:px-6 md:px-8 lg:px-12 max-w-7xl mx-auto">
            
            <Tabs defaultValue="india" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
              {/* Mobile-optimized tab navigation */}
              <div className="flex flex-col items-center justify-center w-full mb-8 sm:mb-16 md:mb-20">
                <span className="text-[8px] xs:text-[9px] font-black tracking-[0.3em] sm:tracking-[0.4em] uppercase text-zinc-400 mb-4 sm:mb-6">
                  Global Operations Directory
                </span>

                <div className="w-full overflow-x-auto no-scrollbar">
                  <TabsList className="
                    inline-flex flex-nowrap
                    w-auto min-w-full
                    px-1 py-1 
                    bg-transparent 
                    gap-1 sm:gap-2
                    justify-start
                  ">
                    {locations.map((loc) => (
                      <TabsTrigger
                        key={loc.id}
                        value={loc.id}
                        className="
                          flex-shrink-0
                          whitespace-nowrap
                          px-4 sm:px-6 md:px-8 
                          py-2 sm:py-2.5
                          rounded-full
                          text-xs font-bold uppercase tracking-wide
                          transition-all duration-300
                          bg-white text-zinc-500
                          border border-zinc-200
                          hover:bg-zinc-100
                          data-[state=active]:bg-red-600
                          data-[state=active]:text-white
                          data-[state=active]:border-red-600
                          data-[state=active]:shadow-sm sm:data-[state=active]:shadow-md
                          text-[10px] sm:text-xs
                          text-center
                        "
                      >
                        {loc.country}
                      </TabsTrigger>
                    ))}
                  </TabsList>
                </div>

                {/* Technical Divider Line - Hidden on mobile */}
                <div className="w-px h-8 sm:h-12 bg-gradient-to-b from-zinc-200 to-transparent mt-3 sm:mt-4 hidden sm:block" />
              </div>

              {locations.map((loc) => (
                <TabsContent key={loc.id} value={loc.id} className="mt-0 outline-none w-full">
                  
                  {/* Mobile-optimized grid */}
                  <div className="w-full">
                    {loc.branches.map((branch, index) => (
                      <div
                        key={index}
                        className="bg-white p-4 sm:p-6 md:p-10 lg:p-20 border-b border-zinc-100 group hover:bg-zinc-50 transition-all duration-300 w-full"
                      >
                        {/* Header */}
                        <div className="flex justify-between items-baseline mb-6 sm:mb-8 md:mb-12 w-full">
                          <h3 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-black text-black uppercase tracking-tight leading-tight flex-1 pr-2">
                            {branch.title}
                          </h3>
                          <span className="text-[8px] sm:text-[9px] font-medium text-zinc-400 tracking-widest flex-shrink-0">
                            {loc.id.toUpperCase()} / {String(index + 1).padStart(2, '0')}
                          </span>
                        </div>

                        <div className="w-full space-y-6 sm:space-y-8 md:space-y-12">
                          {/* Data Section */}
                          <div className="space-y-6 sm:space-y-8 md:space-y-10 w-full">
                            <div className="space-y-2 sm:space-y-3 w-full">
                              <label className="text-[9px] sm:text-[10px] font-bold uppercase tracking-widest text-zinc-400">Postal Address</label>
                              <p className="text-sm sm:text-base md:text-lg text-black font-medium leading-relaxed w-full">
                                {branch.address}
                              </p>
                            </div>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 pt-4 sm:pt-6 md:pt-8 border-t border-zinc-100 w-full">
                              {branch.email && (
                                <div className="space-y-1 sm:space-y-2 w-full">
                                  <label className="text-[9px] sm:text-[10px] font-bold uppercase tracking-widest text-zinc-400">Inquiries</label>
                                  <p className="text-xs sm:text-sm text-black font-bold break-all underline underline-offset-2 sm:underline-offset-4 decoration-zinc-200 w-full">
                                    <a href={`mailto:${branch.email}`} className="hover:text-red-600 transition-colors break-all">
                                      {branch.email}
                                    </a>
                                  </p>
                                </div>
                              )}
                              
                              {(branch.phone1 || branch.phone2) && (
                                <div className="space-y-1 sm:space-y-2 w-full">
                                  <label className="text-[9px] sm:text-[10px] font-bold uppercase tracking-widest text-zinc-400">Contact Lines</label>
                                  <div className="text-xs sm:text-sm text-black font-bold flex flex-col space-y-1 w-full">
                                    {branch.phone1 && (
                                      <a href={`tel:${branch.phone1.replace(/[^0-9+]/g, '')}`} className="hover:text-red-600 transition-colors break-all">
                                        {branch.phone1}
                                      </a>
                                    )}
                                    {branch.phone2 && (
                                      <span className="text-zinc-500 break-all">
                                        {branch.phone2}
                                      </span>
                                    )}
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>

                          {/* Media Section - Stack vertically on mobile */}
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mt-3 sm:mt-4 w-full">
                            <div className="relative aspect-square overflow-hidden bg-zinc-100 w-full">
                              <img
                                src={branch.image}
                                alt={branch.title}
                                className="w-full h-full object-cover mix-blend-multiply opacity-90 group-hover:opacity-100 transition-opacity duration-300"
                                loading="lazy"
                              />
                            </div>
                            <div className="relative aspect-square overflow-hidden border border-zinc-100 w-full">
                              <div
                                className="w-full h-full opacity-70 group-hover:opacity-100 transition-all duration-300"
                                dangerouslySetInnerHTML={{ __html: branch.mapIframe }}
                              />
                            </div>
                          </div>
                        </div>

                        {branch.website && (
                          <div className="mt-6 sm:mt-8 md:mt-12 w-full">
                            <a
                              href={branch.website}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="inline-block border-b border-black pb-1 text-[10px] sm:text-[11px] font-black tracking-[0.2em] sm:tracking-[0.4em] uppercase hover:text-red-600 hover:border-red-600 transition-all duration-300 break-all"
                            >
                              {branch.website}
                            </a>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </TabsContent>
              ))}
            </Tabs>
          </div>
        </section>
      </main>

      <Footer />
      <Chatbot />
    </div>
  );
}