"use client";

import React, { useState, useRef, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { 
    ArrowRight, 
    Maximize2, 
    X
} from "lucide-react";
import Navbar from "@/components/Navbar";
import Breadcrumbs from "@/components/Breadcrumbs";
import Footer from "@/components/Footer";
import gsap from "gsap";

interface Accessory {
    id: number;
    name: string;
    image: string;
}

const accessories: Accessory[] = [
    { id: 1, name: "Top Ridge Cap", image: "/images/top ridge.jpg" },
    { id: 2, name: "Top Ridge Cover", image: "/images/Top Ridge cover.jpg" },
    { id: 3, name: "Hip Ridge Cap", image: "/images/hip ridge.jpg" },
    { id: 4, name: "End of Ridge Cap", image: "/images/end of ridge.jpg" },
    { id: 5, name: "3-Way Ridge Junction", image: "/images/three way ridge.jpg" },
    { id: 6, name: "Ceiling Eaves Tile", image: "/images/ceiling eaves tile.jpg" },
    { id: 7, name: "Inside Corner Deflector", image: "/images/inside corner deflector.jpg" },
    { id: 8, name: "Waterproof Corner Deflector", image: "/images/waterproof corner deflector.jpg" },
    { id: 9, name: "Side Cover (Gable Flashing)", image: "/images/side cover.jpg" },
    { id: 10, name: "Wall Flashing Board", image: "/images/wall flashing board.jpg" }
];

export default function AccessoriesPage() {
    const mainRef = useRef<HTMLDivElement>(null);
    const [zoomedImage, setZoomedImage] = useState<string | null>(null);

    useEffect(() => {
        const ctx = gsap.context(() => {
            gsap.from(".acc-hero-badge", { y: 20, opacity: 0, delay: 0.2, duration: 1, ease: "power3.out" });
            gsap.from(".acc-hero-title", { y: 40, opacity: 0, delay: 0.4, duration: 1.2, ease: "power3.out" });
            gsap.from(".acc-hero-desc", { y: 25, opacity: 0, delay: 0.6, duration: 1.2, ease: "power3.out" });
        }, mainRef);
        return () => ctx.revert();
    }, []);

    return (
        <main ref={mainRef} className="min-h-screen bg-white text-zinc-950 selection:bg-brand-accent selection:text-white">
            <Navbar />

            {/* HERO SECTION */}
            <section className="relative pt-32 pb-24 md:pt-48 md:pb-32 overflow-hidden bg-brand-dark min-h-[45vh] flex items-center">
                <div className="absolute inset-0 z-0">
                    <Image
                        src="/images/pexels9.webp"
                        alt="iRoof Accessories Background"
                        fill
                        className="object-cover opacity-45 mix-blend-overlay"
                        priority
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/80 to-transparent" />
                </div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10 w-full text-center">
                    <div className="max-w-4xl mx-auto flex flex-col items-center">
                        <div className="acc-hero-badge flex items-center justify-center gap-4 mb-6 group">
                            <div className="h-[1.5px] w-8 md:w-12 bg-brand-accent group-hover:w-16 transition-all duration-700" />
                            <span className="text-[10px] md:text-[11px] font-semibold text-brand-accent uppercase tracking-[0.3em] md:tracking-[0.4em]">
                                Roofing Components
                            </span>
                            <div className="h-[1.5px] w-8 md:w-12 bg-brand-accent group-hover:w-16 transition-all duration-700" />
                        </div>
                        <h1 className="acc-hero-title text-4xl md:text-6xl lg:text-7xl font-semibold text-white tracking-tighter leading-[1.1] mb-6 font-heading">
                            iRoof <span className="text-brand-accent">Accessories</span>
                        </h1>
                        <p className="acc-hero-desc text-sm md:text-base text-zinc-300 max-w-2xl font-light leading-relaxed font-sans">
                            Complete your roof with our 100% leak-proof, color-matching ASA accessories designed for lifelong weather protection.
                        </p>
                    </div>
                </div>
            </section>

            {/* BREADCRUMBS & MAIN CONTENT */}
            <section className="py-16 bg-white relative">
                <div className="max-w-[1400px] mx-auto px-6 mb-12">
                    <Breadcrumbs items={[{ label: "Accessories" }]} />
                </div>

                <div className="max-w-[1400px] mx-auto px-6">
                    {/* ACCREDITED LAYOUT SCHEME DIAGRAM */}
                    <div className="mb-24 bg-zinc-50 border border-zinc-200/50  p-8 md:p-12 lg:p-16 flex flex-col lg:flex-row items-center gap-12">
                        <div className="lg:w-1/2 space-y-6 text-left">
                            <div className="inline-flex items-center gap-3 px-3 py-1 bg-brand-accent/10 text-brand-accent rounded-full text-[10px] font-semibold uppercase tracking-[0.2em]">
                                Technical Layout
                            </div>
                            <h2 className="text-3xl md:text-[2.5rem] font-bold text-brand-dark tracking-tighter leading-tight">
                                Integrated <br />
                                <span className="text-brand-accent">Roofing Blueprint</span>
                            </h2>
                            <p className="text-sm text-zinc-500 leading-relaxed max-w-md font-sans font-medium">
                                To ensure 100% weather resilience and structural stability, every iRoof installation should utilize matching ASA polymer accessories. Explore our full technical schematic showing correct placement of ridge caps, flashings, and valleys.
                            </p>
                            {/* <button
                                onClick={() => setZoomedImage("/images/i-roof-xtra-accessories1.webp")}
                                className="inline-flex items-center gap-3 bg-brand-dark text-white px-8 py-4 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-brand-accent transition-all duration-300 shadow-lg shadow-brand-dark/10 group active:scale-95"
                            >
                                Zoom Schematic View
                                <Maximize2 size={14} className="group-hover:scale-110 transition-transform" />
                            </button> */}
                        </div>

                        <div className="lg:w-1/2 w-full flex justify-center">
                            <div 
                                className="relative aspect-[3/2] w-full max-w-[550px] bg-white  overflow-hidden border border-zinc-200 shadow-md group cursor-pointer"
                                onClick={() => setZoomedImage("/images/Accessories - 2624 x 1632 Banner Artwork 1.jpg")}
                            >
                                <Image
                                    src="/images/Accessories - 2624 x 1632 Banner Artwork 1.jpg"
                                    alt="iRoof Accessories Blueprint Diagram"
                                    fill
                                    className="object-contain p-4 group-hover:scale-105 transition-transform duration-700"
                                />
                                <div className="absolute inset-0 bg-brand-dark/0 group-hover:bg-brand-dark/10 transition-colors flex items-center justify-center">
                                    <div className="w-12 h-12 rounded-full bg-brand-accent text-white flex items-center justify-center shadow-xl opacity-0 group-hover:opacity-100 transition-opacity">
                                        <Maximize2 size={18} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* ACCESSORIES GRID */}
                    <div className="text-center mb-16">
                        <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.4em] mb-3 block">Product List</span>
                        <h2 className="text-3xl md:text-5xl font-black text-brand-dark tracking-tighter leading-none">
                            The 10 Vital Accessories
                        </h2>
                    </div>

                    <div className="accessories-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-24">
                        {accessories.map((acc) => (
                            <div
                                key={acc.id}
                                onClick={() => setZoomedImage(acc.image)}
                                className="accessory-card group relative bg-white border border-zinc-200 hover:border-brand-accent/20  overflow-hidden flex flex-col justify-between shadow-sm hover:shadow-xl transition-all duration-300 text-center cursor-pointer hover:scale-[1.03]"
                            >
                                <div className="relative aspect-[4/3] w-full bg-zinc-50 border-b border-zinc-100 overflow-hidden">
                                    <Image
                                        src={acc.image}
                                        alt={acc.name}
                                        fill
                                        className="object-cover group-hover:scale-105 transition-transform duration-500"
                                    />
                                </div>
                                <div className="p-6">
                                    <h3 className="text-sm font-bold text-brand-dark tracking-tight transition-colors duration-300 group-hover:text-brand-accent uppercase">
                                        {acc.name}
                                    </h3>
                                </div>

                                {/* Animated bottom red border */}
                                <div className="absolute bottom-0 left-0 right-0 h-[4px] bg-brand-accent scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
                            </div>
                        ))}
                    </div>

                    {/* CALL TO ACTION */}
                    <div className="flex flex-col xl:flex-row items-center justify-between p-8 md:p-12 lg:p-16 rounded-[2.5rem] bg-brand-dark text-white gap-8 mb-12 relative overflow-hidden">
                        <div className="absolute -top-24 -left-24 w-96 h-96 bg-brand-accent/10 rounded-full filter blur-3xl pointer-events-none" />
                        <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-brand-accent/10 rounded-full filter blur-3xl pointer-events-none" />
                        
                        <div className="max-w-xl text-left relative z-10">
                            <h3 className="text-2xl md:text-3xl font-black tracking-tight mb-3">Order Matching Accessories</h3>
                            <p className="text-white/60 text-xs font-sans leading-relaxed font-medium">
                                Contact our team to request a complete package of sheets and color-matched ASA accessories customized to fit your roof blueprints.
                            </p>
                        </div>
                        <Link
                            href="/contact#quotation"
                            className="px-12 py-5 rounded-xl bg-brand-accent text-white text-[10px] font-semibold uppercase tracking-[0.3em] flex items-center gap-4 hover:bg-white hover:text-brand-dark transition-all duration-300 shadow-2xl relative z-10 active:scale-95 shrink-0"
                        >
                            Request Fast Quote
                            <ArrowRight size={16} />
                        </Link>
                    </div>
                </div>
            </section>

            {/* LIGHTBOX MODAL */}
            {zoomedImage && (
                <div 
                    className="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-10 bg-brand-dark/95 backdrop-blur-xl animate-in fade-in duration-300"
                    onClick={() => setZoomedImage(null)}
                >
                    <button
                        onClick={() => setZoomedImage(null)}
                        className="fixed top-6 right-6 md:top-8 md:right-8 z-50 w-12 h-12 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-red-600 transition-colors"
                    >
                        <X size={24} />
                    </button>
                    <div className="relative w-full max-w-5xl h-full max-h-[85vh]">
                        <Image src={zoomedImage} alt="Schematic Zoom" fill className="object-contain" />
                    </div>
                </div>
            )}

            <Footer />
        </main>
    );
}