import { useEffect } from "react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import Chatbot from "@/components/Chatbot";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import LeadershipTabs from "@/components/Leadership/LeadershipTabs";
import HorizontalScrollTimeline, {
  TimelineEvent,
} from "@/components/HorizontalScrollTimeline";
import SEO from "@/components/SEO";
import { useLanguage } from "@/contexts/LanguageContext";

import aboutVideo from "@/assets/aboutus.mp4";

import { Trophy, CheckCircle2 } from "lucide-react";

/* -------------------------------------------------
   TIMELINE IMAGES
------------------------------------------------- */
import timeline1994 from "@/assets/histry/1994.png";
import timeline1999 from "@/assets/histry/1999.png";
import timeline2006 from "@/assets/histry/2006.png";
import timeline2007 from "@/assets/histry/2007.png";
import timeline2008 from "@/assets/histry/2008.png";
import timeline2009 from "@/assets/histry/2009.png";
import timeline2010 from "@/assets/histry/2010.png";
import timeline2011 from "@/assets/histry/2011.png";
import timeline2012 from "@/assets/histry/2012.png";
import timeline2013 from "@/assets/histry/2013.png";
import timeline2014 from "@/assets/histry/2014.png";
import timeline2015 from "@/assets/histry/2015.png";
import timeline2016 from "@/assets/histry/2016.png";
import timeline20161 from "@/assets/histry/2016 2.png";
import timeline2017 from "@/assets/histry/2017.png";
import timeline2018 from "@/assets/histry/2018.png";
import timeline2019 from "@/assets/histry/2019.jpg";
import timeline20191 from "@/assets/histry/2019 2.png";
import timeline2020 from "@/assets/histry/2020.png";
import timeline20201 from "@/assets/histry/2020 2.png";
import timeline2021 from "@/assets/histry/2021.jpeg";
import timeline2022 from "@/assets/histry/2022.jpeg";
import timeline2023 from "@/assets/histry/2023.png";

/* -------------------------------------------------
   DETAILED TIMELINE CONTENT
------------------------------------------------- */
const timelineEvents: TimelineEvent[] = [
  {
    year: "1994",
    img: timeline1994,
    descParagraph:
      "SUMKA marked its formal entry into the industrial sector by participating in its first major exhibition. The company began operations as a calibration equipment distributor, representing reputed European brands across the Indian market.",
    bullets: [
      "First industrial exhibition participation",
      "Distributor of European calibration instruments",
      "Initial industrial customer base established",
    ],
  },
  {
    year: "1999",
    img: timeline1999,
    descParagraph:
      "Building on its early success, the company gradually transitioned into the export of fully machined castings, supplying precision-engineered components to customers in Europe and the United States.",
    bullets: [
      "Entered machined castings export business",
      "Supplied precision components to Europe & USA",
      "Manufacturing and quality systems strengthened",
    ],
  },
  {
    year: "2006",
    img: timeline2006,
    descParagraph:
      "To support long-term growth, the organisation was regrouped under a unified identity. The brand name “SUSIN” was officially established, marking a strategic shift towards manufacturing and global markets.",
    bullets: [
      "SUSIN brand officially launched",
      "Unified business identity",
      "Clear focus on global industrial solutions",
    ],
  },
  {
    year: "2007",
    img: timeline2007,
    descParagraph:
      "In a remarkable achievement during its first year of operations, SUSIN became a supplier to the world’s tallest building — Burj Khalifa, establishing global credibility early in its journey.",
    bullets: [
      "Supplied components to Burj Khalifa",
      "Prestigious global infrastructure project",
      "Early international recognition",
    ],
  },
  {
    year: "2008",
    img: timeline2008,
    descParagraph:
      "SUSIN entered valve automation through a strategic joint venture with I-Tork Controls, Korea, gaining access to advanced actuator technology and global expertise.",
    bullets: [
      "Joint venture with I-Tork Controls, Korea",
      "Entry into valve actuator manufacturing",
      "Technology-driven expansion",
    ],
  },
  {
    year: "2009",
    img: timeline2009,
    descParagraph:
      "LBH India was established as a joint venture with LBH International A/S, Denmark — a global leader in expansion joint solutions with over three decades of expertise.",
    bullets: [
      "JV with LBH International, Denmark",
      "Expansion into expansion joint solutions",
      "Strengthened European collaboration",
    ],
  },
  {
    year: "2010",
    img: timeline2010,
    descParagraph:
      "This year marked a major breakthrough as SUSIN began OEM manufacturing for leading European and U.S. valve and valve automation companies.",
    bullets: [
      "OEM manufacturing initiated",
      "Trusted global manufacturing partner",
      "Served leading valve automation brands",
    ],
  },
  {
    year: "2011",
    img: timeline2011,
    descParagraph:
      "As part of a CII trade delegation to Doha, Qatar, SUSIN laid the foundation for its first Middle East operation, leading to the establishment of SUSIN Qatar.",
    bullets: [
      "CII trade delegation participation",
      "SUSIN Qatar established",
      "First Middle East presence",
    ],
  },
  {
    year: "2012",
    img: timeline2012,
    descParagraph:
      "SUSIN achieved Green Channel supplier status from FL Smidth, the world’s largest cement EPC, supplying pneumatic gates and dampers for major cement projects.",
    bullets: [
      "Green Channel supplier to FL Smidth",
      "Supplied pneumatic gates & dampers",
      "Recognised by global EPC leader",
    ],
  },
  {
    year: "2013",
    img: timeline2013,
    descParagraph:
      "Following the success of compact electric actuators, SUSIN successfully indigenised pneumatic actuator manufacturing to serve the Indian market.",
    bullets: [
      "Indian-made pneumatic actuators",
      "Reduced dependency on imports",
      "Strengthened domestic manufacturing",
    ],
  },
  {
    year: "2014",
    img: timeline2014,
    descParagraph:
      "A major milestone in the Oil & Gas sector was achieved as SUSIN became an approved global supplier to GE Oil & Gas.",
    bullets: [
      "Approved supplier to GE Oil & Gas",
      "Global Oil & Gas market entry",
      "Expanded international footprint",
    ],
  },
  {
    year: "2015",
    img: timeline2015,
    descParagraph:
      "SUSIN successfully developed and supplied compact Profibus electric actuators for HVAC applications at Qatar Foundation within a six-month timeline.",
    bullets: [
      "Developed Profibus smart actuators",
      "Qatar Foundation HVAC project",
      "Largest Profibus actuator installation in Qatar",
    ],
  },
  {
    year: "2016",
    img: timeline2016,
    descParagraph:
      "SUSIN celebrated 10 years of operations, marking a decade of continuous growth across India and the Middle East.",
    bullets: [
      "10-year milestone celebration",
      "Operational consolidation",
      "Strong regional growth",
    ],
  },
  {
    year: "2016",
    img: timeline20161,
    descParagraph:
      "In the same year, SUSIN significantly upgraded its engineering capabilities by adopting licensed SolidWorks and Altair simulation tools.",
    bullets: [
      "SolidWorks design platform",
      "Altair simulation tools",
      "Enhanced R&D capabilities",
    ],
  },
  {
    year: "2017",
    img: timeline2017,
    descParagraph:
      "SUSIN achieved another Oil & Gas milestone by becoming a successful actuator supplier to Emerson’s Asian operations.",
    bullets: [
      "Supplier to Emerson Asia",
      "Expanded Oil & Gas footprint",
      "Strengthened global customer base",
    ],
  },
  {
    year: "2018",
    img: timeline2018,
    descParagraph:
      "SUSIN became a co-owner of LBH International, Denmark — a proud milestone celebrated with the visit of the Indian Ambassador.",
    bullets: [
      "Co-ownership in LBH International",
      "Strengthened Indo-European collaboration",
      "Expanded global JV portfolio",
    ],
  },
  {
    year: "2019",
    img: timeline2019,
    descParagraph:
      "To provide complete valve automation solutions, SUSIN formed a strategic partnership with KTC Germany, specialists in hydraulic valve automation.",
    bullets: [
      "Strategic partnership with KTC Germany",
      "Expanded hydraulic automation portfolio",
      "Total valve automation solutions",
    ],
  },
  {
    year: "2019",
    img: timeline20191,
    descParagraph:
      "SUSIN sponsored International Yoga Day celebrations in collaboration with the Indian Embassy in Denmark, strengthening cultural ties.",
    bullets: [
      "International Yoga Day sponsorship",
      "Collaboration with Indian Embassy Denmark",
      "Cultural engagement initiative",
    ],
  },
  {
    year: "2020",
    img: timeline2020,
    descParagraph:
      "LBH Technology (Asia) Pvt. Ltd. was established in Singapore to support expansion joint markets across the Far East region.",
    bullets: [
      "LBH Asia office launched in Singapore",
      "Support for Far East markets",
      "Expanded APAC presence",
    ],
  },
  {
    year: "2020",
    img: timeline20201,
    descParagraph:
      "SUSIN celebrated 15 years of operations, reinforcing its leadership position in valve automation across India.",
    bullets: [
      "15-year milestone celebration",
      "Sustained industry leadership",
      "Strong domestic presence",
    ],
  },
  {
    year: "2021",
    img: timeline2021,
    descParagraph:
      "SUSIN pneumatic actuators began promotion across Europe under the KTC Controls brand, strengthening its European market reach.",
    bullets: [
      "European market expansion",
      "KTC Controls brand promotion",
      "Increased global visibility",
    ],
  },
  {
    year: "2022",
    img: timeline2022,
    descParagraph:
      "Regulus was established as a digital company focused on transforming pre-sales, post-sales, and MRO activities through digitalisation.",
    bullets: [
      "Regulus digital platform launched",
      "Pre-sales & post-sales digitalisation",
      "MRO process optimisation",
    ],
  },
  {
    year: "2023",
    img: timeline2023,
    descParagraph:
      "SUSIN Dubai celebrated 10 successful years of operations, marking a decade of growth and leadership in the Middle East region.",
    bullets: [
      "10-year Dubai milestone",
      "Strong Middle East presence",
      "Regional market leadership",
    ],
  },
];

/* -------------------------------------------------
   AWARDS IMAGES
------------------------------------------------- */
const awardImages = [
  timeline1994,
  timeline2007,
  timeline2008,
  timeline2010,
  timeline2014,
  timeline2016,
  timeline2020,
  timeline2023,
];

/* -------------------------------------------------
   PAGE COMPONENT
------------------------------------------------- */
export default function About() {
  const { t } = useLanguage();

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

  return (
    <div className="min-h-screen bg-white text-zinc-900">
      <Navbar />

      {/* HERO */}
      <section className="relative w-full h-[50vh] md:h-[85vh] bg-black overflow-hidden">
        <video
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover opacity-90"
        >
          <source src={aboutVideo} type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/40" />
        <div className="absolute bottom-16 left-0 w-full px-8 md:px-16">
          <h1 className="text-white text-5xl font-bold">
            {t.nav.about}
          </h1>
        </div>
      </section>

      {/* LEADERSHIP */}
      <section id="leadership" className="pt-24 bg-white">
        <LeadershipTabs />
      </section>

      {/* TIMELINE HEADING */}
      <section
        id="legacy"
        className="bg-zinc-50 pt-24 pb-12 text-center border-t"
      >
        <span className="text-red-600 text-xs tracking-[0.3em] font-bold uppercase">
          Our Journey
        </span>
        <h2 className="text-4xl md:text-5xl font-black uppercase mt-3">
          Legacy of <span className="text-red-600">Innovation</span>
        </h2>
      </section>

      {/* TIMELINE */}
      <HorizontalScrollTimeline events={timelineEvents} />

      {/* AWARDS & CERTIFICATIONS */}
      <section
        id="awards"
        className="py-28 bg-white border-t border-zinc-100"
      >
        <div className="container">
          <div className="text-center mb-20">
            <div className="inline-flex p-4 bg-red-50 rounded-full mb-6">
              <Trophy className="w-8 h-8 text-red-600" />
            </div>
            <h2 className="text-4xl md:text-5xl font-black uppercase">
              Awards &{" "}
              <span className="text-red-600">Certifications</span>
            </h2>
            <p className="mt-4 text-lg text-zinc-500 max-w-2xl mx-auto">
              Recognised globally for our commitment to quality,
              engineering excellence, and innovation.
            </p>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8">
            {Array.from({ length: 10 }).map((_, i) => (
              <AwardCard
                key={i}
                img={awardImages[i % awardImages.length]}
                index={i}
              />
            ))}
          </div>
        </div>
      </section>

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

/* -------------------------------------------------
   AWARD CARD
------------------------------------------------- */
function AwardCard({ img, index }: { img: string; index: number }) {
  const { ref, isVisible } = useScrollAnimation(0.1);
  const delay = (index % 5) * 100;

  return (
    <div
      ref={ref}
      style={{ transitionDelay: `${delay}ms` }}
      className={`bg-white rounded-xl p-4 border shadow-sm hover:shadow-xl transition-all ${
        isVisible
          ? "opacity-100 translate-y-0"
          : "opacity-0 translate-y-8"
      }`}
    >
      <div className="relative aspect-[3/4] bg-zinc-50 rounded-lg flex items-center justify-center p-4">
        <img
          src={img}
          className="w-full h-full object-contain grayscale hover:grayscale-0 transition"
        />
        <div className="absolute top-3 right-3 bg-white p-1 rounded-full shadow">
          <CheckCircle2 className="w-4 h-4 text-red-600" />
        </div>
      </div>

      <div className="mt-4 text-center">
        <p className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">
          Certified
        </p>
        <h4 className="text-sm font-bold text-zinc-800">
          ISO 9001:2015
        </h4>
      </div>
    </div>
  );
}