"use client";

import Link from "next/link";
import { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { ChevronRight, ArrowRight, X, Maximize2, Play, Pause, Volume2, VolumeX } from "lucide-react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { cn } from "@/lib/utils";
import FAQ from "./FAQ";
import WhyIRoof from "./WhyIRoof";

const AdvantageZoomImage = ({ src, alt }: { src: string; alt: string }) => {
    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
    const [isHovering, setIsHovering] = useState(false);

    return (
        <div
            className="w-full h-full relative overflow-hidden group cursor-zoom-in bg-white"
            onMouseMove={(e) => {
                const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
                const x = Math.max(0, Math.min(((e.clientX - left) / width) * 100, 100));
                const y = Math.max(0, Math.min(((e.clientY - top) / height) * 100, 100));
                setMousePos({ x, y });
            }}
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
        >
            <Image
                src={src}
                alt={alt}
                fill
                sizes="(max-width: 1024px) 100vw, 55vw"
                className={cn(
                    "object-contain transition-opacity duration-300",
                    isHovering ? "opacity-0" : "opacity-100"
                )}
            />
            {isHovering && (
                <div
                    className="absolute inset-0 z-10 w-full h-full bg-no-repeat bg-white"
                    style={{
                        backgroundImage: `url('${src}')`,
                        backgroundPosition: `${mousePos.x}% ${mousePos.y}%`,
                        backgroundSize: '250%',
                    }}
                />
            )}
        </div>
    );
};

export default function ProductsAndGallery() {
    const [clickedProduct, setClickedProduct] = useState<number | null>(null);
    const [activeFeature, setActiveFeature] = useState(1);
    const edgeSectionRef = useRef<HTMLDivElement>(null);
    const edgeScrollRef = useRef<HTMLDivElement>(null);

    // Video Showcase & Custom Cursor states/refs
    const [isPlayingVideo, setIsPlayingVideo] = useState(false);
    const [isVideoBuffering, setIsVideoBuffering] = useState(false);
    const [isHoveringVideo, setIsHoveringVideo] = useState(false);
    const [isMuted, setIsMuted] = useState(true);
    const videoRef = useRef<HTMLVideoElement>(null);
    const cursorRef = useRef<HTMLDivElement>(null);
    const videoContainerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (typeof window !== "undefined") {
            gsap.registerPlugin(ScrollTrigger);
            const mm = gsap.matchMedia();

            mm.add("(max-width: 767px)", () => {
                const container = edgeScrollRef.current;
                const section = edgeSectionRef.current;
                if (!container || !section) return;

                gsap.to(container, {
                    x: () => -(container.scrollWidth - window.innerWidth + 32),
                    ease: "none",
                    scrollTrigger: {
                        trigger: section,
                        start: "center center",
                        pin: true,
                        scrub: 1,
                        end: () => "+=" + container.scrollWidth,
                        invalidateOnRefresh: true,
                    }
                });
            });

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

    // Autoplay when video showcase enters the viewport
    useEffect(() => {
        if (typeof window === "undefined") return;

        let observer: IntersectionObserver | null = null;

        if (!videoContainerRef.current) return;

        observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (videoRef.current) {
                        if (entry.isIntersecting) {
                            videoRef.current.play().catch((e) => {
                                console.error("Autoplay failed:", e);
                            });
                        } else {
                            videoRef.current.pause();
                        }
                    }
                });
            },
            { threshold: 0.2 } // trigger when 20% visible
        );
        observer.observe(videoContainerRef.current);

        return () => {
            if (observer) {
                observer.disconnect();
            }
        };
    }, []);

    // Custom Glassmorphism Cursor Mouse Events
    const handleVideoMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!cursorRef.current || !videoContainerRef.current) return;

        const rect = videoContainerRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        gsap.to(cursorRef.current, {
            x: x,
            y: y,
            duration: 0.1,
            ease: "power2.out",
            overwrite: "auto",
        });
    };

    const handleVideoMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
        setIsHoveringVideo(true);
        if (!cursorRef.current || !videoContainerRef.current) return;

        const rect = videoContainerRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        gsap.set(cursorRef.current, { xPercent: -50, yPercent: -50, x, y });
        gsap.to(cursorRef.current, {
            scale: 1,
            opacity: 1,
            duration: 0.3,
            ease: "back.out(1.5)",
        });
    };

    const handleVideoMouseLeave = () => {
        setIsHoveringVideo(false);
        if (!cursorRef.current) return;

        gsap.to(cursorRef.current, {
            scale: 0.5,
            opacity: 0,
            duration: 0.3,
            ease: "power2.in",
        });
    };

    const handleVideoClick = () => {
        if (!videoRef.current) return;
        try {
            if (isPlayingVideo) {
                videoRef.current.pause();
            } else {
                videoRef.current.play().catch((err) => {
                    console.error("Error playing video: ", err);
                });
            }
        } catch (err) {
            console.error("Error toggling video play state: ", err);
        }
    };

    const features = [
        {
            id: 1,
            num: "01",
            title: "LG ASA Weather-Shield",
            descHighlight: "Ultimate UV Guard:",
            descText: "Powered by LG tech to reflect heat and prevent color fading for 25+ years.",
            src: "/images/iroof-advantages1.webp",
            alt: "LG ASA Weather-Shield Detail",
            badge: "Protective Shield",
            specs: [
                { label: "Shield Material", value: "LG Chem ASA" },
                { label: "UV Refraction", value: "99.8% Resistance" },
                { label: "Thermal Value", value: "0.16 W/mK (Low)" },
                { label: "Lifespan Rating", value: "25+ Years Certified" }
            ]
        },
        {
            id: 2,
            num: "02",
            title: "Structural Core (UPVC)",
            descHighlight: "Rock-Solid Strength:",
            descText: "High-density core that ensures zero warping and maximum impact resistance.",
            src: "/images/iroof-advantages22.webp",
            alt: "Structural Core Detail",
            badge: "Core Integrity",
            specs: [
                { label: "Core Compound", value: "High-impact UPVC" },
                { label: "Tensile Strength", value: "45 MPa" },
                { label: "Deformation Temp", value: "82°C (Vicat standard)" },
                { label: "Density Profile", value: "1.45 g/cm³" }
            ]
        },
        {
            id: 3,
            num: "03",
            title: "Insulation Layer",
            descHighlight: "Cool & Quiet:",
            descText: "Blocks 80% of solar heat and dampens heavy rain noise for a peaceful interior.",
            src: "/images/iroof-advantages3333.webp",
            alt: "Insulation Layer Detail",
            badge: "Thermal & Acoustic",
            specs: [
                { label: "Heat Shielding", value: "80% Absorption Block" },
                { label: "Acoustic Dampening", value: "32 dB Rain Noise Drop" },
                { label: "Energy Efficiency", value: "A+++ Grade Insulation" },
                { label: "Fire Classification", value: "Flame Retardant Class B1" }
            ]
        },
        {
            id: 4,
            num: "04",
            title: "Bottom Protective Layer(UPVC)",
            descHighlight: "Reinforced Stability:",
            descText: "High-rigidity base for extra load-bearing and a clean, premium underside finish.",
            src: "/images/iroof-advantages4.webp",
            alt: "Bottom Protective Layer Detail",
            badge: "Structural Base",
            specs: [
                { label: "Base Composition", value: "Rigid Shield UPVC" },
                { label: "Load Capacity", value: "3.2 kN/m²" },
                { label: "Flexural Modulus", value: "2,800 MPa" },
                { label: "Underside Aesthetic", value: "Matte White Finish" }
            ]
        }
    ];

    const products = [
        {
            model: "iRoof Max",
            type: "Brick Red Roofing Sheet",
            tags: ["UV Resistant", "Heat Resistant", "Lasting Colour"],
            desc: "iRoof Max Brick Red blends classic roofing design with ASA-powered polymer technology for superior weather resistance.",
            image: "/images/Brick Red.jpg",
            hoverImage: "/images/Line art  I - ROOF MAX _ Brick Red.jpg"
        },
        {
            model: "iRoof Max",
            type: "Dark Green Roofing Sheet",
            tags: ["Eco-Inspired", "Natural Blend", "Residential"],
            desc: "iRoof Max Dark Green blends naturally with outdoor surroundings, making it a perfect choice for residential designs.",
            image: "/images/Dark Green.jpg",
            hoverImage: "/images/Line art  I - ROOF MAX _ Dark Green.jpg"
        },
        {
            model: "iRoof Max",
            type: "Chocolate Brown Roofing Sheet",
            tags: ["Elegant", "Premium", "Earth-Tone"],
            desc: "A premium earth-tone roofing solution, iRoof Max Chocolate Brown delivers timeless elegance and exceptional weather resistance.",
            image: "/images/Chocolate Brown.jpg",
            hoverImage: "/images/Line art  I - ROOF MAX _ Chocolate Brown.jpg"
        },
        {
            model: "iRoof Max",
            type: "White Roofing Sheet",
            tags: ["Solar Reflective", "Cooling", "Modern"],
            desc: "A clean and modern roofing solution, iRoof Max White offers superior heat reflection and long-lasting durability.",
            image: "/images/White.jpg",
            hoverImage: "/images/Line art  I - ROOF MAX _ White.jpg"
        },
    ];

    const projects = [
        { id: 1, title: "Modern Private Residence", location: "Colombo 07" },
        { id: 2, title: "Premium Residential Villa", location: "Kandy" },
        { id: 3, title: "Brick House", location: "Biyagama" },
        { id: 4, title: "Coastal Private Villa", location: "Galle" },
        { id: 5, title: "CityScape Builders ", location: "Kurunegala" },
        { id: 6, title: "Oakwood Residences", location: "Rajagiriya" },
        { id: 7, title: "Cornerstone Commercial", location: "Nuwara Eliya" },
    ];

    interface Project {
        id: number;
        title: string;
        location: string;
    }

    const [selectedProject, setSelectedProject] = useState<Project | null>(null);

    return (
        <div className="pt-8 lg:pt-28 pb-12  overflow-hidden">
            <section id="manufacturing-excellence" className="reveal-up max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 mb-12 flex flex-col md:flex-row md:items-end justify-between gap-8 text-center md:text-left">
                <div className="max-w-2xl mx-auto md:mx-0">
                    <div className="flex items-center justify-center md:justify-start gap-6 mb-4 group">
                        <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                        <span className="text-[11px] font-bold text-brand-accent uppercase tracking-[0.4em]">Our iRoof Collection</span>
                        <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700 md:hidden" />
                    </div>
                    <h2 className="text-3xl md:text-5xl font-bold text-brand-dark tracking-tight leading-none mb-0">
                        Manufacturing &nbsp;
                        <span className="text-brand-accent">Excellence</span>
                    </h2>
                    <div className="max-w-3xl mx-auto space-y-8">
                            

                            <p className="text-sm md:text-base text-zinc-500 leading-relaxed pt-4">
                            From residential masterpieces to large-scale industrial hubs, i-Roof provides a specialized range of 100% Sri Lankan-made solutions that guarantee durability, heat reflection, and timeless aesthetics
                            </p>
                        </div>
                </div>
                {/* Warranty Badge Image */}
                <div className="mx-auto md:mx-0 relative w-32 h-32 md:w-40 md:h-40 xl:w-44 xl:h-44 group cursor-default">
                    <div className="absolute inset-0 transition-transform duration-700 group-hover:scale-105 pt-4">
                        <Image
                            src="/images/warranty-badge5.webp"
                            alt="10 Year Warranty Badge"
                            fill
                            className="object-contain"
                        />
                    </div>
                </div>
            </section>

            {/* PRODUCT GRID */}
            <section className="max-w-[1400px] mx-auto px-4 sm:px-8 md:px-16 lg:px-32 pb-12">
                <div className="grid grid-cols-1 xl:grid-cols-4 gap-6 items-stretch stagger-group">
                    {products.map((product, i) => (
                        <Link
                            key={i}
                            href="/products"
                            className="stagger-item flex flex-col h-full group bg-white border border-brand-dark/5 shadow-sm hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-100 overflow-hidden cursor-pointer"
                            aria-label={`View ${product.model} ${product.type}`}
                        >

                            {/* Image Container with Hover Swap */}
                            <div className="relative w-full aspect-square overflow-hidden bg-brand-dark/[0.02]">
                                {/* Default Image */}
                                <Image
                                    src={product.image}
                                    alt={`${product.model} ${product.type}`}
                                    fill
                                    className="object-cover transition-opacity duration-700 group-hover:opacity-0"
                                />
                                {/* Hover Image */}
                                <Image
                                    src={product.hoverImage}
                                    alt={`${product.model} hover`}
                                    fill
                                    className="object-cover opacity-0 transition-all duration-700 group-hover:opacity-100 scale-105 group-hover:scale-100"
                                />
                            </div>

                            {/* Clean Text Content */}
                            <div className="flex flex-col flex-grow p-6 text-left">
                                <h4 className="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] text-brand-accent mb-2 transition-colors duration-300">
                                    {product.model}
                                </h4>
                                <h3 className="text-lg lg:text-xl font-bold tracking-tight text-brand-dark group-hover:text-brand-accent transition-colors duration-500 line-clamp-2">
                                    {product.type}
                                </h3>

                                <p className="text-xs text-brand-dark/50 mt-3 mb-5 line-clamp-3 leading-relaxed font-medium">
                                    {product.desc}
                                </p>

                                <div className="flex flex-wrap gap-2 mb-6 mt-auto">
                                    {product.tags.map((tag, tIndex) => (
                                        <span key={tIndex} className="text-[9px] font-bold uppercase tracking-widest text-brand-dark/60 bg-brand-dark/5 px-2 py-1 flex items-center justify-center rounded-[4px]">
                                            {tag}
                                        </span>
                                    ))}
                                </div>

                                {/* Minimal Button */}
                                <div className="border-t border-brand-dark/5 pt-5 group-hover:border-brand-accent/20 transition-colors duration-500">
                                    <div className="inline-flex items-center w-full justify-between gap-2 text-brand-dark text-[11px] font-black uppercase tracking-[0.2em] group-hover:text-brand-accent transition-all duration-300">
                                        View Details
                                        <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
                                    </div>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            </section>

            {/* FULL-WIDTH VIDEO SHOWCASE */}
            <section 
                ref={videoContainerRef}
                data-no-global-cursor="true"
                className="w-full aspect-video md:aspect-[21/9] relative overflow-hidden select-none cursor-none mt-16 mb-24"
                onMouseMove={handleVideoMouseMove}
                onMouseEnter={handleVideoMouseEnter}
                onMouseLeave={handleVideoMouseLeave}
                onClick={handleVideoClick}
            >
                {/* HTML5 Video Element */}
                <video
                    ref={videoRef}
                    src="/images/downloads/I-Roof reaches the new height of Global Market.mp4"
                    className="absolute inset-0 w-full h-full object-cover"
                    loop
                    muted={isMuted}
                    playsInline
                    preload="auto"
                    onPlay={() => setIsPlayingVideo(true)}
                    onPause={() => setIsPlayingVideo(false)}
                    onWaiting={() => setIsVideoBuffering(true)}
                    onPlaying={() => setIsVideoBuffering(false)}
                    onSeeking={() => setIsVideoBuffering(true)}
                    onSeeked={() => setIsVideoBuffering(false)}
                />

                {/* Cover Image / Overlay */}
                <div 
                    className={cn(
                        "absolute inset-0 w-full h-full z-10 transition-all duration-700 ease-in-out bg-transparent",
                        isPlayingVideo ? "opacity-0 pointer-events-none" : "opacity-100"
                    )}
                >
                    {/* Cover Thumbnail Image */}
                    <img 
                        src="https://img.youtube.com/vi/a89VmhnKpUg/maxresdefault.jpg" 
                        alt="iRoof Manufacturing Excellence Showcase" 
                        className="w-full h-full object-cover scale-[1.12] max-md:scale-[1.35] transition-transform duration-[1500ms]"
                    />
                </div>

                {/* Centered Loading Spinner */}
                <div 
                    className={cn(
                        "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[2px] transition-all duration-300 pointer-events-none z-15",
                        isVideoBuffering ? "opacity-100" : "opacity-0"
                    )}
                >
                    <div className="flex flex-col items-center justify-center p-6 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 shadow-2xl">
                        <div className="w-10 h-10 border-4 border-white/30 border-t-brand-accent rounded-full animate-spin" />
                        <span className="text-[10px] font-black uppercase tracking-[0.2em] text-white mt-3 select-none"></span>
                    </div>
                </div>

                {/* Mute/Unmute glassmorphic floating toggle button */}
                <button
                    onClick={(e) => {
                        e.stopPropagation();
                        setIsMuted(!isMuted);
                    }}
                    className="absolute bottom-6 right-6 md:bottom-8 md:right-8 z-35 flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full border border-white/20 bg-black/30 backdrop-blur-md text-white transition-all duration-300 hover:scale-110 active:scale-95 cursor-pointer shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] hover:bg-black/50"
                    aria-label={isMuted ? "Unmute video" : "Mute video"}
                >
                    {isMuted ? (
                        <VolumeX className="w-5 h-5 md:w-6 md:h-6 text-white animate-pulse" />
                    ) : (
                        <Volume2 className="w-5 h-5 md:w-6 md:h-6 text-white" />
                    )}
                </button>

                {/* Transparent Interaction Overlay (always on top of video, captures moves/clicks) */}
                <div className="absolute inset-0 z-20 w-full h-full bg-transparent" />

                {/* Custom Glassmorphism Cursor (GSAP outer wrapper) */}
                <div 
                    ref={cursorRef}
                    className="absolute pointer-events-none z-30 w-32 h-32 opacity-0 scale-50"
                    style={{
                        left: 0,
                        top: 0,
                        willChange: 'transform',
                    }}
                >
                    {/* Inner active-scale wrapper */}
                    <div className="w-full h-full rounded-full border border-white/35 backdrop-blur-md bg-white/20 shadow-2xl flex flex-col items-center justify-center text-white transition-transform duration-150 active:scale-90">
                        {isVideoBuffering ? (
                            <>
                                <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                <span className="text-[10px] font-black uppercase tracking-[0.2em] mt-2 animate-pulse">Loading...</span>
                            </>
                        ) : isPlayingVideo ? (
                            <>
                                <Pause className="w-6 h-6 text-white animate-pulse" fill="white" />
                                <span className="text-[10px] font-black uppercase tracking-[0.2em] mt-2">Pause Video</span>
                            </>
                        ) : (
                            <>
                                <Play className="w-6 h-6 text-white" fill="white" />
                                <span className="text-[10px] font-black uppercase tracking-[0.2em] mt-2">Play Video</span>
                            </>
                        )}
                    </div>
                </div>
            </section>

            {false && (
            <section className="relative min-h-[80vh] pt-4 mt-24 pb-24 bg-white overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 relative z-10">
                    {/* Header Section */}
                    <div className="text-center mb-20 reveal-up">
                        <div className="flex items-center justify-center gap-6 mb-8">
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                            <span className="text-[11px] font-bold text-brand-dark uppercase tracking-[0.4em]">The i-Roof Edge</span>
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                        </div>
                        <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tight mb-6">
                             Why <span className="text-brand-accent">We Are the Best Choice</span>
                        </h2>
                        <div className="max-w-3xl mx-auto space-y-8">
                            <p className="text-sm md:text-base text-zinc-500 leading-relaxed">
                                i-Roof brings a novel experience for those who love and still need the traditional look of Spanish style roofing tiles. This is a state-of-the-art Polymer roofing sheet made of a special layer of <span className="text-brand-accent font-bold">ASA material and PVC</span> through a production process with the latest cutting-edge technology, which gives many more benefits to the customer.
                            </p>

                            <p className="text-brand-dark/60 font-bold uppercase tracking-widest text-[11px] pt-4">
                                Easier, Cost-Effective & 100% Sri Lankan
                            </p>
                        </div>
                    </div>

                    {/* Desktop Layout - Symmetrical Grid Layout */}
                    <div ref={edgeSectionRef} className="hidden xl:grid xl:grid-cols-12 gap-12 xl:gap-16 items-center">
                        {/* Left Column (Interactive Control Cards) - Span 5 */}
                        <div className="w-full order-2 xl:order-1 xl:col-span-5 flex flex-col gap-4">
                            {features.map((item) => {
                                const isActive = activeFeature === item.id;
                                return (
                                    <div 
                                        key={item.id}
                                        className={cn(
                                            "relative rounded-xl border p-5 cursor-pointer select-none transition-all duration-300 ease-out",
                                            isActive 
                                                ? "bg-gradient-to-r from-brand-accent/5 to-white/95 border-brand-accent/40 shadow-md shadow-brand-accent/5 scale-[1.02]" 
                                                : "bg-white/40 border-brand-dark/5 hover:border-brand-accent/20 hover:bg-white/70"
                                        )}
                                        onMouseEnter={() => setActiveFeature(item.id)}
                                        onClick={() => setActiveFeature(item.id)}
                                    >
                                        {/* Neon sliding indicator line on the left edge */}
                                        <div className={cn(
                                            "absolute left-0 top-0 bottom-0 w-[4px] rounded-l-xl transition-all duration-500",
                                            isActive ? "bg-brand-accent scale-y-100" : "bg-transparent scale-y-0"
                                        )} />

                                        <div className="flex items-start gap-4">
                                            {/* Feature Index / Hex-Code layout */}
                                            <span className={cn(
                                                "font-mono text-xs font-semibold px-2 py-0.5 rounded tracking-widest transition-colors duration-300",
                                                isActive 
                                                    ? "bg-brand-accent text-white" 
                                                    : "bg-brand-dark/5 text-brand-dark/40"
                                            )}>
                                                {item.num}
                                            </span>

                                            <div className="flex-1 min-w-0">
                                                <div className="flex items-center gap-2 flex-wrap mb-1">
                                                    <h3 className={cn(
                                                        "text-base md:text-lg font-bold tracking-tight transition-colors duration-300",
                                                        isActive ? "text-brand-accent" : "text-brand-dark"
                                                    )}>
                                                        {item.title}
                                                    </h3>
                                                    {item.badge && (
                                                        <span className={cn(
                                                            "text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-[4px] border",
                                                            isActive 
                                                                ? "bg-brand-accent/10 border-brand-accent/25 text-brand-accent" 
                                                                : "bg-brand-dark/5 border-transparent text-brand-dark/50"
                                                        )}>
                                                            {item.badge}
                                                        </span>
                                                    )}
                                                </div>

                                                {/* Text dropdown reveal */}
                                                <div 
                                                    style={{
                                                        display: 'grid',
                                                        gridTemplateRows: isActive ? '1fr' : '0fr',
                                                        transition: 'grid-template-rows 300ms ease-out, opacity 300ms ease-out',
                                                        opacity: isActive ? 1 : 0,
                                                    }}
                                                    className="overflow-hidden"
                                                >
                                                    <div className="overflow-hidden pt-2">
                                                        <p className="text-xs md:text-sm font-medium leading-relaxed text-brand-dark/60">
                                                            <span className="font-bold text-brand-dark/80">{item.descHighlight}</span> {item.descText}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>

                        {/* Right Focal Point Image Column (Span 7) - High-Tech CAD Viewport */}
                        <div className="w-full order-1 xl:order-2 xl:col-span-7 flex justify-center py-6">
                            <div className="relative group/viewport w-full max-w-[700px] aspect-[4/3] border border-brand-dark/5 transition-all duration-500 shadow-inner">
                                
                                {/* Technical Corner CAD Brackets */}
                                {/* <div className="absolute -top-1 -left-1 w-6 h-6 border-t-2 border-l-2 border-brand-accent/40 rounded-tl-sm pointer-events-none" />
                                <div className="absolute -top-1 -right-1 w-6 h-6 border-t-2 border-r-2 border-brand-accent/40 rounded-tr-sm pointer-events-none" />
                                <div className="absolute -bottom-1 -left-1 w-6 h-6 border-b-2 border-l-2 border-brand-accent/40 rounded-bl-sm pointer-events-none" />
                                <div className="absolute -bottom-1 -right-1 w-6 h-6 border-b-2 border-r-2 border-brand-accent/40 rounded-br-sm pointer-events-none" /> */}

                                {/* Viewport Title & Status */}
                                <div className="absolute top-2 left-6 right-6 flex items-center justify-between text-[10px] font-mono text-brand-dark/40 uppercase tracking-widest z-10 pointer-events-none select-none">
                                    <div className="flex items-center gap-2">
                                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
                                        <span>SYSTEM VIEWPORT</span>
                                    </div>
                                    <span>ZOOM: HOVER</span>
                                </div>

                                {/* Main Images container */}
                                <div className="relative w-full h-full overflow-hidden rounded-xl bg-white flex items-center justify-center">
                                    {features.map((item) => (
                                        <div
                                            key={item.id}
                                            className={cn(
                                                "absolute inset-0 transition-opacity duration-700 ease-in-out p-6 flex items-center justify-center",
                                                activeFeature === item.id ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"
                                            )}
                                        >
                                            <div className="relative w-full h-full overflow-hidden">
                                                <AdvantageZoomImage src={item.src} alt={item.alt} />
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Mobile Layout - Linear list flow */}
                    <div className="flex flex-col xl:hidden gap-12 mt-12">
                        {features.map((item) => (
                            <div key={item.id} className="flex flex-col gap-6">
                                {/* Title and Details */}
                                <div className="flex items-start gap-4">
                                    <span className="font-mono text-xs font-semibold px-2 py-0.5 rounded tracking-widest bg-brand-accent text-white shrink-0 mt-1">
                                        {item.num}
                                    </span>
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2 flex-wrap mb-1">
                                            <h3 className="text-lg font-bold tracking-tight text-brand-dark">
                                                {item.title}
                                            </h3>
                                            {item.badge && (
                                                <span className="text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-[4px] border bg-brand-accent/10 border-brand-accent/25 text-brand-accent">
                                                    {item.badge}
                                                </span>
                                            )}
                                        </div>
                                        <p className="text-sm font-medium leading-relaxed text-brand-dark/60 mt-2">
                                            <span className="font-bold text-brand-dark/80">{item.descHighlight}</span> {item.descText}
                                        </p>
                                    </div>
                                </div>
                                
                                {/* Image without border, CAD brackets, padding, or background behind it */}
                                <div className="w-full relative aspect-[4/3] overflow-hidden">
                                    <Image 
                                        src={item.src} 
                                        alt={item.alt} 
                                        fill 
                                        sizes="100vw" 
                                        className="object-contain"
                                    />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
            )}

            {/* Redesigned Details-only Tiles Section */}
            <section className="relative pt-4 mt-24 pb-24 bg-white overflow-hidden">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 relative z-10">
                    {/* Header Section */}
                    <div className="text-center mb-20 reveal-up">
                        <div className="flex items-center justify-center gap-6 mb-8">
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                            <span className="text-[11px] font-bold text-brand-dark uppercase tracking-[0.4em]">The i-Roof Edge</span>
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                        </div>
                        <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tight mb-6">
                             Why <span className="text-brand-accent">We Are the Best Choice</span>
                        </h2>
                        <div className="max-w-3xl mx-auto space-y-8">
                            <p className="text-sm md:text-base text-zinc-500 leading-relaxed">
                                i-Roof brings a novel experience for those who love and still need the traditional look of Spanish style roofing tiles. This is a state-of-the-art Polymer roofing sheet made of a special layer of <span className="text-brand-accent font-bold">ASA material and PVC</span> through a production process with the latest cutting-edge technology, which gives many more benefits to the customer.
                            </p>

                            <p className="text-brand-dark/60 font-bold uppercase tracking-widest text-[11px] pt-4">
                                Easier, Cost-Effective & 100% Sri Lankan
                            </p>
                        </div>
                    </div>

                    {/* Tiles Layout */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto mt-12 stagger-group">
                        {features.map((item) => {
                            const isActive = activeFeature === item.id;
                            return (
                                <div 
                                    key={item.id}
                                    className={cn(
                                        "relative rounded-2xl border p-6 cursor-pointer select-none transition-all duration-300 ease-out",
                                        isActive 
                                            ? "bg-gradient-to-r from-brand-accent/5 to-white/95 border-brand-accent/40 shadow-md shadow-brand-accent/5 scale-[1.02]" 
                                            : "bg-white/40 border-brand-dark/5 hover:border-brand-accent/20 hover:bg-white/70"
                                    )}
                                    onMouseEnter={() => setActiveFeature(item.id)}
                                    onClick={() => setActiveFeature(item.id)}
                                >
                                    {/* Neon sliding indicator line on the left edge */}
                                    <div className={cn(
                                        "absolute left-0 top-0 bottom-0 w-[4px] rounded-l-2xl transition-all duration-500",
                                        isActive ? "bg-brand-accent scale-y-100" : "bg-transparent scale-y-0"
                                    )} />

                                    <div>
                                        <div className="flex items-center justify-between mb-4 pl-2">
                                            <span className={cn(
                                                "font-mono text-xs font-semibold px-2 py-0.5 rounded tracking-widest transition-colors duration-300",
                                                isActive 
                                                    ? "bg-brand-accent text-white" 
                                                    : "bg-brand-dark/5 text-brand-dark/40"
                                            )}>
                                                {item.num}
                                            </span>
                                            {item.badge && (
                                                <span className={cn(
                                                    "text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-[4px] border transition-colors duration-300",
                                                    isActive 
                                                        ? "bg-brand-accent/10 border-brand-accent/25 text-brand-accent" 
                                                        : "bg-brand-dark/5 border-transparent text-brand-dark/50"
                                                )}>
                                                    {item.badge}
                                                </span>
                                            )}
                                        </div>

                                        <div className="pl-2">
                                            <h3 className={cn(
                                                "text-lg font-bold tracking-tight transition-colors duration-300 mb-2",
                                                isActive ? "text-brand-accent" : "text-brand-dark"
                                            )}>
                                                {item.title}
                                            </h3>

                                            <p className="text-sm leading-relaxed text-brand-dark/60">
                                                <span className="font-bold text-brand-dark/80">{item.descHighlight}</span> {item.descText}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>
            {/* <section className="relative min-h-[80vh] pt-4 mt-24 pb-24 bg-white 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="text-center mb-20 reveal-up">
                        <div className="flex items-center justify-center gap-6 mb-8">
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                            <span className="text-[11px] font-bold text-brand-dark uppercase tracking-[0.4em]">The i-Roof Edge</span>
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                        </div>
                        <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tight mb-6">
                             Why <span className="text-brand-accent">We Are the Best Choice</span>
                        </h2>
                        <div className="max-w-3xl mx-auto space-y-8">
                            <p className="text-sm md:text-base text-zinc-500 leading-relaxed">
                                i-Roof brings a novel experience for those who love and still need the traditional look of Spanish style roofing tiles. This is a state-of-the-art Polymer roofing sheet made of a special layer of <span className="text-brand-accent font-bold">ASA material and PVC</span> through a production process with the latest cutting-edge technology, which gives many more benefits to the customer.
                            </p>

                            <p className="text-brand-dark/60 font-bold uppercase tracking-widest text-[11px] pt-4">
                                Easier, Cost-Effective & 100% Sri Lankan
                            </p>
                        </div>
                    </div>

                    <div ref={edgeSectionRef} className="hidden xl:grid xl:grid-cols-12 gap-12 xl:gap-16 items-center">
                        <div className="w-full order-2 xl:order-1 xl:col-span-5 flex flex-col gap-4">
                            {features.map((item) => {
                                const isActive = activeFeature === item.id;
                                return (
                                    <div 
                                        key={item.id}
                                        className={cn(
                                            "relative rounded-xl border p-5 cursor-pointer select-none transition-all duration-300 ease-out",
                                            isActive 
                                                ? "bg-gradient-to-r from-brand-accent/5 to-white/95 border-brand-accent/40 shadow-md shadow-brand-accent/5 scale-[1.02]" 
                                                : "bg-white/40 border-brand-dark/5 hover:border-brand-accent/20 hover:bg-white/70"
                                        )}
                                        onMouseEnter={() => setActiveFeature(item.id)}
                                        onClick={() => setActiveFeature(item.id)}
                                    >
                                        <div className={cn(
                                            "absolute left-0 top-0 bottom-0 w-[4px] rounded-l-xl transition-all duration-500",
                                            isActive ? "bg-brand-accent scale-y-100" : "bg-transparent scale-y-0"
                                        )} />

                                        <div className="flex items-start gap-4">
                                            <span className={cn(
                                                "font-mono text-xs font-semibold px-2 py-0.5 rounded tracking-widest transition-colors duration-300",
                                                isActive 
                                                    ? "bg-brand-accent text-white" 
                                                    : "bg-brand-dark/5 text-brand-dark/40"
                                            )}>
                                                {item.num}
                                            </span>

                                            <div className="flex-1 min-w-0">
                                                <div className="flex items-center gap-2 flex-wrap mb-1">
                                                    <h3 className={cn(
                                                        "text-base md:text-lg font-bold tracking-tight transition-colors duration-300",
                                                        isActive ? "text-brand-accent" : "text-brand-dark"
                                                    )}>
                                                        {item.title}
                                                    </h3>
                                                    {item.badge && (
                                                        <span className={cn(
                                                            "text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-[4px] border",
                                                            isActive 
                                                                ? "bg-brand-accent/10 border-brand-accent/25 text-brand-accent" 
                                                                : "bg-brand-dark/5 border-transparent text-brand-dark/50"
                                                        )}>
                                                            {item.badge}
                                                        </span>
                                                    )}
                                                </div>

                                                <div 
                                                    style={{
                                                        display: 'grid',
                                                        gridTemplateRows: isActive ? '1fr' : '0fr',
                                                        transition: 'grid-template-rows 300ms ease-out, opacity 300ms ease-out',
                                                        opacity: isActive ? 1 : 0,
                                                    }}
                                                    className="overflow-hidden"
                                                >
                                                    <div className="overflow-hidden pt-2">
                                                        <p className="text-xs md:text-sm font-medium leading-relaxed text-brand-dark/60">
                                                            <span className="font-bold text-brand-dark/80">{item.descHighlight}</span> {item.descText}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>

                        <div className="w-full order-1 xl:order-2 xl:col-span-7 flex justify-center py-6">
                            <div className="relative group/viewport w-full max-w-[700px] aspect-[4/3] border border-brand-dark/5 transition-all duration-500 shadow-inner">
                                
                               
                                <div className="absolute top-2 left-6 right-6 flex items-center justify-between text-[10px] font-mono text-brand-dark/40 uppercase tracking-widest z-10 pointer-events-none select-none">
                                    <div className="flex items-center gap-2">
                                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
                                        <span>SYSTEM VIEWPORT</span>
                                    </div>
                                    <span>ZOOM: HOVER</span>
                                </div>

                                <div className="relative w-full h-full overflow-hidden rounded-xl bg-white flex items-center justify-center">
                                    {features.map((item) => (
                                        <div
                                            key={item.id}
                                            className={cn(
                                                "absolute inset-0 transition-opacity duration-700 ease-in-out p-6 flex items-center justify-center",
                                                activeFeature === item.id ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"
                                            )}
                                        >
                                            <div className="relative w-full h-full overflow-hidden">
                                                <AdvantageZoomImage src={item.src} alt={item.alt} />
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="flex flex-col xl:hidden gap-12 mt-12">
                        {features.map((item) => (
                            <div key={item.id} className="flex flex-col gap-6">
                                <div className="flex items-start gap-4">
                                    <span className="font-mono text-xs font-semibold px-2 py-0.5 rounded tracking-widest bg-brand-accent text-white shrink-0 mt-1">
                                        {item.num}
                                    </span>
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2 flex-wrap mb-1">
                                            <h3 className="text-lg font-bold tracking-tight text-brand-dark">
                                                {item.title}
                                            </h3>
                                            {item.badge && (
                                                <span className="text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-[4px] border bg-brand-accent/10 border-brand-accent/25 text-brand-accent">
                                                    {item.badge}
                                                </span>
                                            )}
                                        </div>
                                        <p className="text-sm font-medium leading-relaxed text-brand-dark/60 mt-2">
                                            <span className="font-bold text-brand-dark/80">{item.descHighlight}</span> {item.descText}
                                        </p>
                                    </div>
                                </div>
                                
                                <div className="w-full relative aspect-[4/3] overflow-hidden">
                                    <Image 
                                        src={item.src} 
                                        alt={item.alt} 
                                        fill 
                                        sizes="100vw" 
                                        className="object-contain"
                                    />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section> */}
            <WhyIRoof />

            <FAQ />

            {/* PROJECT SHOWCASE - PREMIUM MASONRY GALLERY */}
            {/* <section className="py-8 bg-white">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="reveal-up flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16 md:mb-12 text-center md:text-left">
                        <div className="max-w-2xl mx-auto md:mx-0">
                            <div className="flex items-center justify-center md:justify-start gap-4 md:gap-6 mb-6 md:mb-8 group">
                                <div className="h-[1.5px] w-10 md:w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                                <span className="text-[10px] md:text-[11px] font-black text-brand-accent uppercase tracking-[0.3em] md:tracking-[0.4em]">Portfolio</span>
                            </div>
                            <h2 className="text-3xl md:text-5xl font-black text-brand-dark tracking-tighter leading-none mb-8">
                                Project <br />
                                <span className="text-brand-accent italic">Showcase</span>
                            </h2>
                        </div>
                        <p className="text-xs md:text-sm text-foreground/40 font-medium max-w-sm mx-auto md:mx-0 md:text-right">
                            Explore our completed Roofing projects across Sri Lanka, showcasing Real installations & Premium finishes.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-4 md:gap-6 mb-16">
                        {projects.map((project, i) => {
                            const isLarge = i === 0 || i === 3;
                            return (
                                <div
                                    key={project.id}
                                    className={cn(
                                        "scale-up group relative overflow-hidden  bg-zinc-50 transition-all duration-700 hover:shadow-2xl cursor-pointer h-[350px] md:h-[450px]",
                                        isLarge ? "md:col-span-8" : "md:col-span-4"
                                    )}
                                    onClick={() => setSelectedProject(project)}
                                >
                                    <Image
                                        src={`/images/${project.id}.1.jpg`}
                                        alt={project.title}
                                        fill
                                        className="object-cover transition-all duration-1000 group-hover:scale-105"
                                    />

                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-100 transition-all duration-500 p-8 md:p-12 flex flex-col justify-end">
                                        <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                            <p className="text-[10px] font-black text-brand-accent uppercase tracking-widest mb-2 flex items-center gap-2">
                                                <span className="w-8 h-[1px] bg-brand-accent"></span>
                                                0{i + 1}
                                            </p>
                                            <h3 className="text-lg md:text-2xl font-bold text-white tracking-tight mb-2">{project.title}</h3>
                                            <p className="text-[10px] text-white/60 font-medium uppercase tracking-[0.2em]">{project.location}</p>
                                        </div>
                                    </div>

                                    <div className="absolute top-8 right-8 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-x-4 group-hover:translate-x-0">
                                        <div className="w-12 h-12 rounded-full bg-brand-accent flex items-center justify-center text-white shadow-xl">
                                            <Maximize2 className="w-5 h-5" />
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>

                    <div className="flex justify-center">
                        <Link
                            href="/projects"
                            className="inline-flex items-center gap-4 bg-brand-dark text-white px-10 py-5 rounded-full text-[10px] font-black uppercase tracking-[0.3em] hover:bg-brand-accent transition-all duration-500 shadow-xl hover:shadow-brand-accent/20 group"
                        >
                            Explore Full Portfolio
                            <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
                        </Link>
                    </div>
                </div>
            </section>

            {selectedProject && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-10">
                    <div className="absolute inset-0 bg-brand-dark/95 backdrop-blur-xl animate-in fade-in duration-500" onClick={() => setSelectedProject(null)} />

                    <div className="relative w-full max-w-7xl h-full flex flex-col gap-6 md:gap-10 animate-in zoom-in-95 duration-500 overflow-y-auto custom-scrollbar pt-20 pb-10">
                        <div className="flex items-center justify-between text-white shrink-0">
                            <div>
                                <h2 className="text-3xl md:text-5xl font-black tracking-tighter mb-2">{selectedProject.title}</h2>
                                <p className="text-xs md:text-sm text-brand-accent font-bold uppercase tracking-[0.3em]">{selectedProject.location}</p>
                            </div>
                            <button
                                onClick={() => setSelectedProject(null)}
                                className="fixed top-6 right-6 md:top-8 md:right-8 z-[110] w-12 h-12 md:w-16 md:h-16 rounded-full bg-red-600 text-white flex items-center justify-center shadow-2xl hover:bg-red-700 hover:scale-110 active:scale-95 transition-all group"
                            >
                                <X className="w-6 h-6 md:w-8 md:h-8 group-hover:rotate-90 transition-transform" />
                            </button>
                        </div>

                        <div className="relative w-full aspect-video rounded-[2.5rem] overflow-hidden shadow-2xl border border-white/10">
                            <Image
                                src={`/images/${selectedProject.id}.1.jpg`}
                                alt={selectedProject.title}
                                fill
                                className="object-cover"
                            />
                        </div>

                        <div className="flex flex-col md:flex-row items-center justify-between gap-6 pt-10 border-t border-white/10">
                            <p className="text-white/40 text-sm font-medium italic max-w-md text-center md:text-left">
                                This project showcases our commitment to durability and architectural aesthetics using premium iRoof materials.
                            </p>
                            <Link
                                href="/contact#quotation"
                                className="bg-brand-accent text-white px-10 py-5 rounded-full text-[10px] font-black uppercase tracking-[0.3em] hover:bg-white hover:text-brand-dark transition-all duration-500 shadow-2xl"
                                onClick={() => setSelectedProject(null)}
                            >
                                GET QUOTE FOR THIS DESIGN
                            </Link>
                        </div>
                    </div>
                </div>
            )} */}
        </div >
    );
}