"use client";

import { useEffect, useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight, Calendar } 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 { newsItems } from "@/lib/news";

gsap.registerPlugin(ScrollTrigger);

export default function NewsPage() {
    const mainRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const ctx = gsap.context(() => {
            // Hero Animation
            gsap.from(".about-hero-title", {
                y: 50,
                opacity: 0,
                duration: 1.2,
                ease: "power3.out",
                delay: 0.2
            });

            // Reveal animations for news cards
            gsap.utils.toArray<HTMLElement>(".news-card").forEach((card) => {
                gsap.from(card, {
                    y: 50,
                    opacity: 0,
                    duration: 1,
                    scrollTrigger: {
                        trigger: card,
                        start: "top 85%",
                        toggleActions: "play none none none"
                    }
                });
            });
        }, mainRef);

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

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

            {/* NEWS HERO - Immersive 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 mb-24">
                <Image
                    src="/images/pexels9.webp"
                    alt="News 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">
                    <h1 className="about-hero-title text-4xl md:text-6xl lg:text-7xl font-medium text-white tracking-tight mt-6">
                        News
                    </h1>
                </div>
            </section>

            {/* NEWS GRID - Primary Feed */}
            <section className="pb-8 pt-8">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-8 mt-[-2rem]">
                    <Breadcrumbs items={[{ label: "News" }]} className="mb-12" />
                </div>
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="flex flex-col xl:flex-row xl:items-end justify-between gap-8 mb-16">
                        <div>
                            <div className="flex items-center gap-4 mb-4 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-medium text-brand-dark/40 uppercase tracking-[0.3em] md:tracking-[0.4em]">Journal Archive</span>
                            </div>
                            <h2 className="text-3xl md:text-5xl font-medium text-brand-dark tracking-tighter leading-none">
                                Industry <br className="md:hidden" />
                                <span className="text-brand-accent">Milestones.</span>
                            </h2>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-8 xl:gap-12">
                        {newsItems.map((item) => (
                            <div key={item.id} className="news-card group flex flex-col bg-white overflow-hidden border border-brand-dark/5 shadow-sm hover:shadow-xl transition-all duration-700">
                                <div className="relative h-80 w-full overflow-hidden">
                                    <Image
                                        src={item.image}
                                        alt={item.title}
                                        fill
                                        className="object-cover transition-transform duration-1000 group-hover:scale-105"
                                    />
                                    <div className="absolute top-6 left-6">
                                        <span className="px-5 py-2 bg-brand-accent text-white text-[9px] font-medium uppercase tracking-widest rounded-xl shadow-xl">
                                            {item.category}
                                        </span>
                                    </div>
                                </div>
                                <div className="p-10 flex flex-col flex-1">
                                    <div className="flex items-center gap-4 mb-6 text-brand-dark/30 text-[9px] font-bold uppercase tracking-widest">
                                        <div className="flex items-center gap-1.5">
                                            <Calendar className="w-3 h-3 text-brand-accent" />
                                            {item.date}
                                        </div>
                                        <div className="w-1 h-1 rounded-full bg-brand-dark/10" />
                                    </div>
                                    <h3 className="text-xl md:text-2xl font-medium text-brand-dark mb-6 tracking-tight leading-[1.1] group-hover:text-brand-accent transition-colors">
                                        {item.title}
                                    </h3>
                                    <p className="text-brand-dark/50 text-sm font-medium leading-relaxed mb-10 flex-1">
                                        {item.excerpt}
                                    </p>
                                    <Link
                                        href={`/news/${item.id}`}
                                        className="inline-flex items-center justify-between w-full p-6 bg-zinc-50 rounded-2xl group/read hover:bg-brand-dark transition-all duration-500"
                                    >
                                        <span className="text-brand-dark font-semibold text-[10px] uppercase tracking-widest group-hover/read:text-white transition-colors">
                                            Read Full Article
                                        </span>
                                        <div className="w-8 h-8 rounded-full border border-brand-dark/10 flex items-center justify-center group-hover/read:bg-brand-accent group-hover/read:border-brand-accent group-hover/read:text-white transition-all">
                                            <ArrowUpRight className="w-4 h-4" />
                                        </div>
                                    </Link>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <Footer />
        </main>
    );
}