"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Award as AwardIcon, X, Maximize2, ArrowRight, FileText, Plus, ChevronDown, ChevronUp } from "lucide-react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Navbar from "@/components/Navbar";
import Breadcrumbs from "@/components/Breadcrumbs";
import Footer from "@/components/Footer";
import ScrollAnimations from "@/components/ScrollAnimations";
import StatsAndStory from "@/components/sections/StatsAndStory";
import { cn } from "@/lib/utils";
import { awards } from "@/lib/awards";

// Register GSAP plugins
if (typeof window !== "undefined") {
    gsap.registerPlugin(ScrollTrigger);
}

export default function AboutPage() {
    const mainRef = useRef<HTMLDivElement>(null);
    const [isGovernanceExpanded, setIsGovernanceExpanded] = useState(false);

    useEffect(() => {
        const ctx = gsap.context(() => {
            // Hero Animations
            const heroTl = gsap.timeline();
            heroTl.from(".about-hero-title", { y: 40, opacity: 0, duration: 1.2, delay: 0.5 });

            // Reveal animations for scroll
            gsap.utils.toArray<HTMLElement>(".reveal-up").forEach((element) => {
                gsap.from(element, {
                    scrollTrigger: {
                        trigger: element,
                        start: "top 85%",
                        toggleActions: "play none none reverse",
                    },
                    y: 50,
                    opacity: 0,
                    duration: 1,
                    ease: "power3.out",
                });
            });

        }, mainRef);

        return () => ctx.revert();
    }, []);

    return (
        <main ref={mainRef} className="min-h-screen bg-white">
            <ScrollAnimations />
            <Navbar />

            {/* ABOUT HERO - Banner */}
            <section className="relative pt-24 pb-8 md:pt-40 md:pb-16 min-h-[20px] w-full flex items-center justify-center overflow-hidden">
                <Image
                    src="/images/pexels9.webp"
                    alt="About Us Background"
                    fill
                    className="object-cover"
                    priority
                />
                {/* Dark overlay for text readability */}
                <div className="absolute inset-0 bg-brand-dark/70" />

                <div className="relative z-10 text-center px-6 flex flex-col items-center">
                    <h1 className="about-hero-title text-4xl md:text-6xl lg:text-7xl font-medium text-white tracking-tight mt-6">
                        About Us
                    </h1>
                </div>
            </section>

            {/* IDEA GROUP LEGACY */}
            <section className="bg-white">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-8 pt-8">
                    <Breadcrumbs items={[{ label: "About Us" }]} className="mb-12" />
                </div>
            </section>

            <StatsAndStory />

            <section className="bg-white pt-24">
                <div className="max-w-[1400px]  mx-auto px-8 md:px-16 lg:px-32 xl:px-40 grid grid-cols-1 xl:grid-cols-2 gap-24 items-start">
                    <div className="relative group xl:sticky xl:top-32 reveal-up hidden xl:block">
                        <div className="relative aspect-[4/5] overflow-hidden shadow-sm">
                            <Image
                                src="/images/713 x 692 Web Banner.png"
                                alt="Idea Group Legacy"
                                fill
                                className="object-cover"
                            />
                            <div className="absolute inset-0 bg-brand-dark/10 group-hover:bg-transparent transition-colors duration-1000" />
                        </div>
                        {/* Mechanical Accent */}
                        {/* <div className="absolute -top-8 -right-8 w-32 h-32 border-t-8 border-r-8 border-brand-accent transition-all duration-700 group-hover:-top-4 group-hover:-right-4" /> */}
                    </div>

                    <div className="space-y-12 reveal-up">
                        <div>
                            <div className="flex items-center gap-4 mb-4">
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                                <span className="text-[11px] font-medium text-brand-accent uppercase tracking-[0.4em]">Corporate Legacy</span>
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                            </div>
                            <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tighter leading-[1.1] mb-6 xl:mb-12">
                                Company Overview
                            </h2>
                            {/* Mobile Image */}
                            <div className="block xl:hidden relative aspect-[4/5] overflow-hidden shadow-sm mb-8 reveal-up">
                                <Image
                                    src="/images/713 x 692 Web Banner.png"
                                    alt="Idea Group Legacy"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute inset-0 bg-brand-dark/10 transition-colors duration-1000" />
                            </div>
                            <div className="space-y-6 text-base md:text-md text-brand-dark/50 font-normal leading-relaxed">
                                <p>
                                    <span className="text-brand-dark font-normal">Idea Group Limited</span> is a leading Sri Lankan business conglomerate that operates with a
                                    progressive global mindset. Since our inception in 2008 as a software development firm, we have
                                    strategically expanded our horizons to become a diversified conglomerate. Today, we are honored
                                    to be ranked among the <span className="text-brand-dark font-normal">LMD Top 50 Financial Performing Entities</span> in Sri Lanka, a testament to
                                    our stability, growth, and unwavering commitment to excellence.
                                </p>
                                <p>
                                    With a vast portfolio that includes our own home-grown brands and 14 strategic acquisitions, we
                                    have become a household name in the construction and home improvement sectors. Our success
                                    is built on a foundation of innovation, professional endorsement, and the trust of millions of
                                    residential and commercial customers nationwide.
                                </p>

                            </div>
                        </div>

                        {/* <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 reveal-up">
                            {[
                                { title: "2008 Inception", desc: "Launched journey in software development." },
                                { title: "LMD Top 50", desc: "Ranked among Sri Lanka's elite financial performers." },
                                { title: "14 Brands", desc: "Aggressive growth through strategic brand acquisition." },
                                { title: "Market Leader", desc: "Highly recommended by industry professionals." }
                            ].map((item, i) => (
                                <div key={i} className="group p-8 rounded-2xl bg-zinc-50 border border-brand-dark/5 hover:border-brand-accent/20 hover:bg-white hover:scale-[1.03] transition-all duration-700 relative shadow-sm hover:shadow-xl">
                                    <h4 className="font-black text-brand-accent mb-3 text-xs uppercase tracking-widest">{item.title}</h4>
                                    <p className="text-brand-dark/40 text-[11px] font-bold leading-relaxed italic pr-4">{item.desc}</p>
                                    <div className="absolute bottom-6 right-8 w-8 h-8 rounded-full bg-brand-dark/5 flex items-center justify-center text-brand-dark group-hover:bg-brand-accent group-hover:text-white transition-all">
                                        <ArrowUpRight size={14} />
                                    </div>
                                </div>
                            ))}
                        </div> */}
                    </div>
                </div>
            </section>

            {/* THE CORPORATE EVOLUTION - Detailed Business Story */}
            {/* <section className="py-24 relative overflow-hidden bg-zinc-50 border-y border-brand-dark/5"> */}
                {/* Large Background Watermark */}
                {/* <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none select-none opacity-[0.02]">
                    <span className="text-[20rem] font-black tracking-tighter leading-none">IDEA</span>
                </div> */}

                {/* <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 relative z-10">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
                        <div className="lg:col-span-6 reveal-up">
                            <div className="flex items-center gap-4 mb-4">
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                                <span className="text-[11px] font-medium text-brand-accent uppercase tracking-[0.4em]">Corporate Evolution</span>
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                            </div>
                            <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tighter leading-[1] mb-12">
                                Redefining <span className="text-brand-accent">Diversified</span> <br />
                                Business Success.
                            </h2>
                            <div className="space-y-8 text-base text-brand-dark/50 font-normal leading-relaxed">
                                <p className="text-lg text-brand-dark/60 italic border-l-4 border-brand-accent/20 pl-6">
                                    Whilst maintaining a concentrated focus on green practices, <span className="text-brand-dark font-normal">Idea Group Limited</span> offers its customers with a multitude of unparalleled eco friendly products and innovative professional services.
                                </p>
                                <p>
                                    Since its inception, the organization has been a notable player at the forefront of sectors such as Software Development, Digital Documentation, Database Management, and Advertising. Moreover, the group has established its ascendancy in spheres such as Construction and Civil Engineering Supplies, Manufacturing, Import & Export Trading, and also in Leisure and Hotel Management.
                                </p>

                            </div>
                        </div>

                        <div className="lg:col-span-6 grid grid-cols-1 sm:grid-cols-2 gap-8 reveal-up">
                            {[
                                { year: "2008", title: "Soft-Inception", desc: "Launched as a specialized software development house, building the digital backbone for future scale." },
                                { year: "2012", title: "Industrial Pivot", desc: "Expanded into construction and civil engineering supplies, identifying a gap for premium local materials." },
                                { year: "2018", title: "Scale & Accolades", desc: "Recognized among LMD's Top 50 Financial Entities, managing 14+ brands through strategic growth." },
                                { year: "2024+", title: "Global Expansion", desc: "Marching towards global leadership in eco-friendly polymer technology and luxury construction." }
                            ].map((milestone, i) => (
                                <div key={i} className={cn("p-10  bg-white border border-brand-dark/5 shadow-sm group hover:shadow-xl transition-all duration-700", (i % 2 !== 0) && "sm:mt-12")}>
                                    <div className="text-5xl font-black text-brand-dark/10 group-hover:text-brand-accent/20 transition-colors mb-6 italic">{milestone.year}</div>
                                    <h4 className="text-xl font-black text-brand-dark mb-4 group-hover:text-brand-accent transition-colors">{milestone.title}</h4>
                                    <p className="text-[13px] text-brand-dark/40 font-medium leading-relaxed">{milestone.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div> */}
            {/* </section> */}

            {/* OUR HERITAGE */}
            <section className="py-24 bg-white border-b border-brand-dark/5">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="flex items-center gap-4 mb-4 reveal-up">
                        <div className="h-[1.5px] w-8 bg-brand-accent" />
                        <span className="text-[11px] font-medium text-brand-accent uppercase tracking-[0.4em]">Our Legacy</span>
                        <div className="h-[1.5px] w-8 bg-brand-accent" />
                    </div>
                    <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tighter leading-[1.1] mb-16 reveal-up">
                        Our Heritage
                    </h2>

                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-16 items-start mb-24 reveal-up">
                        <div>
                            <h3 className="text-2xl font-bold text-brand-dark mb-6 tracking-tight">From Humble Beginnings to Market Leadership</h3>
                            <p className="text-base text-brand-dark/60 leading-relaxed font-normal">
                                Our journey began in 2008, driven by a passion for technology and innovation. What started as a tech-focused entity soon expanded its horizons to identify and seize new opportunities in the manufacturing and trading sectors. Over the years, we have mastered the art of diversification, transforming into a multi-brand powerhouse that leads the market through quality and reliability.
                            </p>
                        </div>
                        <div>
                            <h3 className="text-2xl font-bold text-brand-dark mb-6 tracking-tight">The Birth of I-Roof</h3>
                            <p className="text-base text-brand-dark/60 leading-relaxed font-normal">
                                In our quest to revolutionize the Sri Lankan construction landscape, we introduced I-Roof—our flagship roofing brand. Born from the engineering expertise of Idea Group, I-Roof was created to provide a superior, eco-friendly, and durable alternative to traditional roofing materials. Today, I-Roof stands as a crown of our brand portfolio, embodying the &quot;Quality & Innovation&quot; that Idea Group represents.
                            </p>
                        </div>
                    </div>

                    <div className="reveal-up">
                        <h3 className="text-3xl md:text-4xl font-bold text-brand-dark tracking-tight mb-12 text-center">Our Strategic Pillars</h3>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {/* Vision */}
                            <div className="p-10 bg-zinc-50 border border-brand-dark/5 shadow-sm hover:shadow-xl transition-all duration-700 group text-center">
                                <h4 className="text-xl font-bold text-brand-dark mb-4 group-hover:text-brand-accent transition-colors">Vision</h4>
                                <p className="text-sm text-brand-dark/50 leading-relaxed">To be the most innovative and trusted roofing solutions provider globally, setting new standards in quality and sustainability.</p>
                            </div>

                            {/* Mission */}
                            <div className="p-10 bg-zinc-50 border border-brand-dark/5 shadow-sm hover:shadow-xl transition-all duration-700 group text-center">
                                <h4 className="text-xl font-bold text-brand-dark mb-4 group-hover:text-brand-accent transition-colors">Mission</h4>
                                <p className="text-sm text-brand-dark/50 leading-relaxed">To deliver cutting-edge, eco-friendly building materials that empower communities, protect investments, and respect the environment.</p>
                            </div>

                            {/* Core Values */}
                            <div className="p-10 bg-zinc-50 border border-brand-dark/5 shadow-sm hover:shadow-xl transition-all duration-700 group text-center">
                                <h4 className="text-xl font-bold text-brand-dark mb-4 group-hover:text-brand-accent transition-colors">Core Values</h4>
                                <p className="text-sm text-brand-dark/50 leading-relaxed">Innovation, Integrity, Sustainability, Excellence, and Customer-Centricity form the bedrock of everything we do.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* TECHNOLOGY SECTION - THE iROOF SPEC (DARK MATERIAL ALIGNMENT) */}
            {/* <section className="py-8 bg-zinc-50 text-brand-dark relative overflow-hidden border-b border-brand-dark/5">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 relative z-10">
                    <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-12 mb-20 reveal-up">
                        <div className="max-w-3xl">
                            <div className="flex items-center gap-6 mb-8 group">
                                <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                                <span className="text-[11px] font-black text-brand-accent uppercase tracking-[0.4em]">Why i-roof?</span>
                            </div>
                            <h2 className="text-3xl md:text-[2.5rem] font-black text-brand-dark tracking-tighter leading-none mb-6">
                                ASA <span className="text-brand-dark/20 font-black italic">Technology</span>
                            </h2>
                            <p className="text-brand-dark/40 text-lg font-medium max-w-2xl leading-relaxed italic">
                                Engineered with LG Material Partnership for superior tropical thermal stability.
                            </p>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 reveal-up">
                        {[
                            { title: "Colour Retention", desc: "Superior vibrancy even under intense tropical sunlight, preventing structural fading.", icon: Star, spec: "UV-10" },
                            { title: "Heat Resistance", desc: "Advanced thermal deflection significantly reduces internal radiant heat transfer.", icon: Thermometer, spec: "148°C" },
                            { title: "UV Protection", desc: "Polymer-level shielding against intense solar radiation and oxidative corrosion.", icon: ShieldCheck, spec: "CLASS-4" },
                            { title: "Acoustic Guard", desc: "Multi-layered compound reduces rain noise for enhanced environmental comfort.", icon: Volume2, spec: "35dB" }
                        ].map((item, i) => (
                            <div key={i} className="group p-10 rounded-2xl bg-brand-dark border border-brand-accent/20 hover:scale-[1.03] transition-all duration-700 overflow-hidden relative shadow-xl hover:shadow-brand-accent/5">
                                <div className="space-y-8 relative z-10 h-full flex flex-col">
                                    <div className="flex items-center justify-between">
                                        <div className="w-10 h-10 rounded-xl bg-zinc-800/50 border border-white/5 flex items-center justify-center text-white/30 group-hover:bg-brand-accent group-hover:text-white transition-all duration-500">
                                            <item.icon size={16} strokeWidth={2} />
                                        </div>
                                        <div className="text-[8px] font-mono font-bold text-white/20 uppercase tracking-widest">{item.spec}</div>
                                    </div>

                                    <div>
                                        <h4 className="text-xl font-black text-brand-accent mb-4 uppercase tracking-tight">{item.title}</h4>
                                        <p className="text-[13px] text-zinc-400 leading-relaxed font-medium italic pr-2">{item.desc}</p>
                                    </div>
                                </div>

                                <div className="absolute bottom-0 left-0 w-full h-[3px] bg-brand-accent scale-x-100 origin-left" />
                            </div>
                        ))}
                    </div>
                </div>
            </section> */}

            {/* CORPORATE GOVERNANCE SECTION */}
            <section className="relative py-24 md:py-32 bg-brand-dark overflow-hidden border-y border-brand-dark/5">
                <Image
                    src="/images/office-room1.webp"
                    alt="Corporate Governance"
                    fill
                    className="object-cover opacity-100"
                />

                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-20 xl:px-20 relative z-10">
                    <div className="flex justify-end">
                        <div className="w-full xl:w-[60%] bg-[#5b677a]/90 backdrop-blur-sm p-12 md:p-12 md:pr-24 text-white shadow-2xl reveal-up text-left">
                            {/* <h2 className="text-3xl md:text-5xl font-semibold mb-6 tracking-tighter">
                                Corporate Governance & Leadership
                            </h2> */}
                            <h2 className="text-base md:text-2xl font-bold text-white/90 mb-8">
                                Guided by Visionary Leadership & Professional Integrity
                            </h2>
                            <div className="text-sm md:text-base text-zinc-200/80 leading-relaxed font-normal mb-8">
                                <p className={cn(
                                    "transition-all duration-500",
                                    !isGovernanceExpanded ? "line-clamp-4" : ""
                                )}>
                                    At Idea Group Limited, we believe that a strong leadership foundation is the driving force behind every successful innovation. Our organization is steered by a Board of Directors and a senior management team consisting of visionary professionals with decades of experience in Industrial Engineering, Strategic Finance, and Global Marketing.
                                    <br /><br />
                                    We adhere to the highest standards of Corporate Governance, ensuring absolute accountability, ethical business conduct, and transparency. This disciplined professional management ensures that every i-Roof product delivered to the market meets stringent international quality benchmarks and adheres to our environmental policies.
                                </p>
                            </div>

                            <button
                                onClick={() => setIsGovernanceExpanded(!isGovernanceExpanded)}
                                className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-white/30 text-white font-bold uppercase tracking-widest text-[10px] hover:bg-white hover:text-[#5b677a] transition-all duration-500 rounded-sm"
                            >
                                {isGovernanceExpanded ? "View Less" : "View More"}
                                {isGovernanceExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                            </button>
                        </div>
                    </div>
                </div>
            </section>


            {/* OUR EVENTS SECTION */}
            <section className="py-24 bg-zinc-50 border-y border-brand-dark/5 overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-16 xl:gap-24 items-center">
                        <div className="relative w-full aspect-[4/3] xl:aspect-square reveal-up hidden xl:block">
                            <Image
                                src="/images/512 x 341 Web Image.png"
                                alt="Our Events"
                                fill
                                className="object-contain"
                            />
                        </div>
                        <div className="reveal-up">
                            <h2 className="text-3xl md:text-4xl font-bold text-brand-dark tracking-tight mb-4">
                                Our Events
                            </h2>
                            <h3 className="text-sm font-bold text-brand-accent uppercase tracking-widest mb-6 xl:mb-8">
                                Engagement Beyond Business
                            </h3>
                            {/* Mobile Image */}
                            <div className="block xl:hidden relative w-full aspect-[4/3] mb-8 reveal-up">
                                <Image
                                    src="/images/512 x 341 Web Image.png"
                                    alt="Our Events"
                                    fill
                                    className="object-contain"
                                />
                            </div>
                            <p className="text-brand-dark/60 leading-relaxed font-medium mb-10">
                                We actively engage with the industry and our community through various national and regional events. From showcasing our latest innovations at premier construction exhibitions like Architect, JITF and Kedella to conducting educational workshops for consumers, contractors and architectors island-wide, our events are designed to build knowledge and strengthen the bonds with our valued stakeholders across Sri Lanka.
                            </p>
                            <Link href="/news" className="inline-flex items-center justify-center px-10 py-4 border border-brand-accent/50 text-brand-accent font-bold uppercase tracking-widest text-[11px] hover:bg-brand-accent hover:text-white transition-all duration-500 rounded-sm">
                                Read More
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* AWARDS & CERTIFICATIONS SECTION */}
            <section id="awards" className="pt-12 bg-white overflow-hidden border-b border-brand-dark/5">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    {/* New Achievements UI (Intro to Grid) */}
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-16 xl:gap-24 items-center mb-24">
                        <div className="xl:order-1 reveal-up">
                            <h2 className="text-3xl md:text-4xl font-bold text-brand-dark tracking-tight mb-4">
                                Our Achievements and Certifications
                            </h2>
                            <h3 className="text-sm font-bold text-brand-accent uppercase tracking-widest mb-6 xl:mb-8">
                                A Journey of Excellence and Recognition
                            </h3>
                            {/* Mobile Image */}
                            <div className="block xl:hidden relative w-full aspect-[4/3] mb-8 reveal-up">
                                <Image
                                    src="/images/i-roof-achievements.webp"
                                    alt="Awards and Certifications Trophy"
                                    fill
                                    className="object-contain drop-shadow-2xl"
                                />
                            </div>
                            <p className="text-brand-dark/60 leading-relaxed font-medium mb-10">
                                Our commitment to quality and innovation has been consistently honored with numerous prestigious accolades. From being ranked among the LMD Top 50 financial entities to receiving The Best Product Awards for Roofing Categorty, these achievements reflect our market leadership. Backed by ISO certifications, every milestone we reach reinforces our dedication to delivering world-class roofing solutions that Sri Lankans can trust.
                            </p>
                            <Link
                                href="/awards"
                                className="inline-flex items-center justify-center px-10 py-4 border border-brand-accent/50 text-brand-accent font-bold uppercase tracking-widest text-[11px] hover:bg-brand-accent hover:text-white transition-all duration-500 rounded-sm"
                            >
                                Read More
                            </Link>
                        </div>
                        <div className="relative w-full aspect-[4/3] xl:aspect-square xl:order-2 reveal-up hidden xl:block">
                            <Image
                                src="/images/i-roof-achievements.webp"
                                alt="Awards and Certifications Trophy"
                                fill
                                className="object-contain drop-shadow-2xl"
                            />
                        </div>
                    </div>

                    {/* <div id="awards-grid" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 reveal-up pt-12 border-t border-brand-dark/5">
                        {awards.slice(0, 6).map((item, i) => (
                            <div
                                key={i}
                                className="group relative bg-zinc-50 overflow-hidden border border-brand-dark/5 hover:border-brand-accent/20 transition-all duration-700 h-[450px] cursor-pointer"
                                onClick={() => setSelectedAward(item)}
                            >
                                <div className="absolute inset-0">
                                    <Image
                                        src={item.image}
                                        alt={item.title}
                                        fill
                                        className="object-cover transition-transform duration-1000 group-hover:scale-110"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/20 to-transparent opacity-90 group-hover:opacity-100 transition-opacity" />
                                </div>

                                <div className="absolute inset-x-0 bottom-0 p-10 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-700">
                                    <div className="flex items-center gap-3 mb-4">
                                        {item.type === "Award" ? <AwardIcon className="w-4 h-4 text-brand-accent" /> : <FileText className="w-4 h-4 text-brand-accent" />}
                                        <span className="text-[10px] font-black text-white/50 uppercase tracking-widest">{item.type}</span>
                                    </div>
                                    <h3 className="text-xl font-bold text-white mb-3 tracking-tight">{item.title}</h3>
                                    <p className="text-xs text-white/40 font-medium italic opacity-0 group-hover:opacity-100 transition-opacity duration-700">{item.subtitle}</p>
                                </div>

                                <div className="absolute top-8 right-8 w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all duration-700">
                                    <Maximize2 className="w-4 h-4" />
                                </div>
                            </div>
                        ))}
                    </div> */}

                    {/* <div className="mt-16 text-center reveal-up">
                        <button
                            onClick={() => setIsAllAwardsOpen(true)}
                            className="px-10 py-4 bg-brand-dark text-white rounded-lg text-[10px] font-semibold uppercase tracking-[0.2em] transition-all duration-500 hover:bg-brand-accent flex items-center gap-4 mx-auto group shadow-xl"
                        >
                            See All Awards & Certifications
                            <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                        </button>
                    </div> */}
                </div>
            </section>

            {/* PERFORMANCE & INSTALLATION */}
            {/* <section className="py-24 bg-zinc-50 overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
                    <div className="reveal-up">
                        <div className="flex items-center gap-6 mb-8 group">
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                            <span className="text-[11px] font-black text-brand-accent uppercase tracking-[0.4em]">Performance Metrics</span>
                        </div>
                        <h2 className="text-3xl md:text-5xl font-black text-brand-dark tracking-tighter leading-[1.1] mb-8">
                            Lightweight Strength, <br />
                            <span className="text-brand-accent">Rapid Installation</span>
                        </h2>
                        <div className="space-y-6 mb-12">
                            <p className="text-lg text-brand-dark/50 leading-relaxed font-medium">
                                iRoof sheets are lightweight yet strong, allowing for faster and more cost-effective installation. The rigid construction offers exceptional load-bearing capacity, proven in rigorous stress tests.
                            </p>
                            <p className="text-base text-brand-dark/40 italic border-l-4 border-brand-accent/20 pl-8 font-medium">
                                "Our rigid multi-layer construction provides unrivaled structural integrity under heavy weights."
                            </p>
                        </div>

                        <div className="grid grid-cols-2 gap-6">
                            <div className="p-8 rounded-[2rem] bg-white shadow-sm border border-brand-dark/5">
                                <div className="text-3xl font-black text-brand-dark mb-2">High</div>
                                <div className="text-[10px] font-black uppercase tracking-widest text-brand-dark/30">Load Capacity</div>
                            </div>
                            <div className="p-8 rounded-[2rem] bg-white shadow-sm border border-brand-dark/5">
                                <div className="text-3xl font-black text-brand-dark mb-2">30%</div>
                                <div className="text-[10px] font-black uppercase tracking-widest text-brand-dark/30">Faster Install</div>
                            </div>
                        </div>
                    </div>

                    <div className="relative group reveal-up">
                        <div className="relative aspect-square overflow-hidden rounded-2xl md:rounded-[2rem] shadow-sm">
                            <Image
                                src="/images/hero-section-image.png"
                                alt="Load Bearing Test"
                                fill
                                className="object-cover"
                            />
                            <div className="absolute inset-0 bg-brand-dark/10" />
                        </div>
                    </div>
                </div>
            </section> */}



            {/* LEADERSHIP SECTION - Restored */}
            {/* <section id="leadership" className="py-24 bg-white overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="flex flex-col md:flex-row md:items-end justify-between gap-12 mb-24 reveal-up">
                        <div className="max-w-2xl">
                            <div className="flex items-center gap-4 mb-4">
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                                <span className="text-[11px] font-medium text-brand-accent uppercase tracking-[0.4em]">Visionary Leadership</span>
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                            </div>
                            <h2 className="text-3xl md:text-[2.5rem] font-semibold text-brand-dark tracking-tighter leading-[0.9]">
                                The Minds Behind <br />
                                <span className="text-brand-accent">iRoof&apos;s Success</span>
                            </h2>
                        </div>
                        <p className="text-brand-dark/50 text-base max-w-sm md:text-right font-medium italic">
                            A directorial board dedicated to pioneering industrial innovation and premium aesthetics in Sri Lanka.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-24 items-center">
                        <div className="relative group reveal-up">
                            <div className="relative h-[650px]  overflow-hidden shadow-sm">
                                <Image
                                    src="/images/chairman.webp"
                                    alt="Chairman Sampath Mayakaduwa"
                                    fill
                                    className="object-cover transition-transform duration-1000 group-hover:scale-105"
                                />
                                <div className="absolute inset-x-0 bottom-0 p-12 bg-gradient-to-t from-brand-dark to-transparent">
                                    <h3 className="text-3xl font-black text-white mb-2">Sampath Mayakaduwa</h3>
                                    <p className="text-brand-accent text-[11px] font-black uppercase tracking-[0.4em]">Chairman / CEO, Idea Group Limited</p>
                                </div>
                            </div>
                            <div className="absolute top-12 right-12 w-10 h-10 flex items-center justify-center">
                                <div className="absolute w-full h-[1px] bg-white/20" />
                                <div className="absolute h-full w-[1px] bg-white/20" />
                                <Plus className="text-white/40 w-4 h-4" />
                            </div>
                        </div>

                        <div className="space-y-12">
                            <div className="reveal-up p-12 rounded-[2rem] bg-zinc-50 border border-brand-dark/5 group hover:border-brand-accent/20 transition-all duration-700">
                                <p className="text-2xl font-bold italic text-brand-dark/80 leading-relaxed mb-10">
                                    &quot;Our goal was never just to build a company, but to redefine what &apos;Premium Roofing&apos; means for the Sri Lankan landscape. Every sheet that leaves our facility carries our signature of excellence.&quot;
                                </p>
                                <div className="flex items-center gap-6">
                                    <div className="h-[1.5px] w-12 bg-brand-accent" />
                                    <span className="text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/40">Message from the Chairman</span>
                                </div>
                            </div> */}

                            {/* <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 reveal-up">
                                <div className="p-10 rounded-2xl border border-brand-dark/5 bg-white shadow-sm flex flex-col justify-between group hover:shadow-xl transition-all duration-500">
                                    <div>
                                        <h4 className="text-lg font-black text-brand-dark mb-2 uppercase tracking-tight">Directorial Board</h4>
                                        <p className="text-xs text-brand-dark/40 font-medium">Strategic guidance and industrial foresight.</p>
                                    </div>
                                    <div className="mt-8 flex items-center justify-between">
                                        <div className="flex -space-x-4">
                                            {[1, 2, 3].map(i => (
                                                <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-zinc-200 overflow-hidden relative">
                                                    <Image src={`https://i.pravatar.cc/100?img=${i + 60}`} alt="Board Member" fill className="object-cover" />
                                                </div>
                                            ))}
                                        </div>
                                        <div className="w-10 h-10 rounded-full bg-brand-dark/5 flex items-center justify-center text-brand-dark group-hover:bg-brand-dark group-hover:text-white transition-colors cursor-pointer">
                                            <ArrowUpRight className="w-4 h-4" />
                                        </div>
                                    </div>
                                </div>
                                <div className="p-10 rounded-2xl border border-brand-dark/5 bg-white shadow-sm flex flex-col justify-between group hover:shadow-xl transition-all duration-500">
                                    <div>
                                        <h4 className="text-lg font-black text-brand-dark mb-2 uppercase tracking-tight">Operations Team</h4>
                                        <p className="text-xs text-brand-dark/40 font-medium">Precision manufacturing and distribution mastery.</p>
                                    </div>
                                    <div className="mt-8 flex justify-end">
                                        <div className="w-10 h-10 rounded-full bg-brand-dark/5 flex items-center justify-center text-brand-dark group-hover:bg-brand-dark group-hover:text-white transition-colors cursor-pointer">
                                            <ArrowUpRight className="w-4 h-4" />
                                        </div>
                                    </div>
                                </div>
                            </div> */}
                        {/* </div>
                    </div>
                </div>
            </section> */}

            {/* ECO-FRIENDLY & GLOBAL VISION */}
            {/* ECO-FRIENDLY & GLOBAL VISION */}
            {/* ECO-FRIENDLY & GLOBAL VISION */}
            {/* <section className="py-24 bg-zinc-50 relative overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 relative z-10">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 md:gap-24 items-start">
                        <div className="lg:col-span-5 reveal-up">
                            <div className="flex items-center gap-4 mb-4">
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                                <span className="text-[11px] font-medium text-brand-accent uppercase tracking-[0.4em]">Eco-Responsible</span>
                                <div className="h-[1.5px] w-8 bg-brand-accent" />
                            </div>
                            <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tighter leading-[1] mb-12">
                                For the <br />
                                <span className="text-brand-accent">Sustainable Builder</span>
                            </h2>
                            <p className="text-md text-brand-dark/50 mb-12 leading-relaxed font-medium">
                                iRoof products are environmentally responsible and fully recyclable. We reinforce sustainable building solutions through lead-free, chemical-free compounds.
                            </p>
                        </div>

                        <div className="lg:col-span-7 reveal-up">
                            <div className="text-brand-dark relative overflow-hidden group">
                                <div className="relative z-10 h-full flex flex-col">
                                    <div className="relative flex-1 min-h-[250px] md:min-h-[600px] w-full">
                                        <Image
                                            src="/images/global_footprint_1aae73da1b.svg"
                                            alt="iRoof Global Footprint"
                                            fill
                                            className="object-contain"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section> */}



            {/* CALL TO ACTION SECTION */}
            <section className="py-20 bg-zinc-50 border-t border-zinc-100">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 text-center">
                    <div className="max-w-2xl mx-auto flex flex-col items-center">
                        <div className="flex items-center gap-3 text-brand-accent text-[11px] font-extrabold tracking-[0.4em] uppercase mb-6">
                            <span className="w-6 h-[1.5px] bg-brand-accent rounded-full" />
                            Build with Trust
                            <span className="w-6 h-[1.5px] bg-brand-accent rounded-full" />
                        </div>
                        <h2 className="text-3xl md:text-[40px] font-extrabold text-brand-dark leading-none mb-6">
                            Ready to Elevate Your Roof?
                        </h2>
                        <p className="text-sm md:text-base text-zinc-500 font-sans leading-relaxed mb-10 max-w-lg">
                            Get in touch with our team of experts today or request a custom quotation tailored to your architectural plans.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center w-full sm:w-auto">
                            <Link
                                href="/contact#quotation"
                                className="w-full sm:w-auto inline-flex items-center justify-center bg-brand-accent hover:bg-brand-dark text-white px-8 py-4 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] transition-all duration-300 hover:scale-105 active:scale-95 shadow-[0_10px_20px_-5px_rgba(177,32,40,0.4)] group"
                            >
                                Get a Free Quote
                                <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                            </Link>
                            <Link
                                href="/contact"
                                className="w-full sm:w-auto inline-flex items-center justify-center border border-zinc-300 hover:border-brand-dark text-brand-dark hover:text-white hover:bg-brand-dark px-8 py-4 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] transition-all duration-300 hover:scale-105 active:scale-95"
                            >
                                Contact Us
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
        </main>
    );
}