"use client";

import React, { useState, useEffect, useRef, RefObject } from "react";
import {
    Leaf,
    Sprout,
    Droplets,
    Tractor,
    BarChart3,
    Globe,
    Microscope,
    ArrowUpRight,
    Menu,
    X,
    ChevronRight,
    Wheat,
    Sun,
    Truck,
    Users,
    PieChart,
    ShieldCheck,
    Activity,
    ScanLine,
    Database,
    Layers,
    Building2
} from "lucide-react";

// --- Hooks for Animation ---
const useOnScreen = (options: IntersectionObserverInit): [RefObject<HTMLDivElement | null>, boolean] => {
    const ref = useRef<HTMLDivElement>(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setVisible(true);
                observer.disconnect();
            }
        }, options);

        if (ref.current) {
            observer.observe(ref.current);
        }

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

    return [ref, visible];
};

// --- Components ---

const fadeOptions: IntersectionObserverInit = { threshold: 0.1 };

interface FadeInSectionProps {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}

const FadeInSection = ({ children, delay = 0, className = "" }: FadeInSectionProps) => {
    const [ref, visible] = useOnScreen(fadeOptions);

    return (
        <div
            ref={ref}
            style={{ transitionDelay: `${delay}ms` }}
            className={`transition-all duration-1000 ease-out transform ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
                } ${className}`}
        >
            {children}
        </div>
    );
};

export default function AgriculturePage() {
    const [scrolled, setScrolled] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);

    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    }, []);

    return (
        <div className="min-h-screen bg-stone-50 text-slate-900 font-sans selection:bg-emerald-900 selection:text-white overflow-x-hidden">

            {/* Mobile Menu */}
            {menuOpen && (
                <div className="fixed inset-0 z-40 bg-white pt-24 px-6 md:hidden border-b border-stone-200">
                    <nav className="flex flex-col gap-8 text-2xl font-serif text-emerald-950">
                        {['About', 'Sectors', 'Sustainability', 'Investors', 'News'].map((item) => (
                            <a key={item} href="#" className="border-b border-stone-100 pb-4">{item}</a>
                        ))}
                    </nav>
                </div>
            )}

            {/* ================= HERO ================= */}
            <section className="relative min-h-screen flex items-center pt-15 overflow-hidden">
                {/* Cinematic Background Image */}
                <div className="absolute inset-0 z-0">
                    <img
                        src="https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?q=80&w=2070&auto=format&fit=crop"
                        alt="AgriTech Laboratory"
                        className="w-full h-full object-cover opacity-60 scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-transparent"></div>
                    <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>

                    {/* Grid Overlay */}
                    <div className="absolute inset-0 bg-[linear-gradient(rgba(16,185,129,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(16,185,129,0.05)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none"></div>
                </div>

                <div className="max-w-[1400px] mx-auto px-6 relative z-10 w-full grid lg:grid-cols-2 gap-12 items-center">
                    <div className="pt-20">
                        <FadeInSection>
                            <div className="flex items-center gap-3 mb-8">
                                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_10px_#10b981]"></div>
                                <span className="text-xs font-mono text-emerald-500 uppercase tracking-widest">
                                    System Status: Optimal
                                </span>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={100}>
                            <h1 className="text-6xl md:text-8xl font-medium tracking-tighter text-white mb-8 leading-[0.9]">
                                SYNTHETIC <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-600 font-bold">
                                    BIOLOGY
                                </span>
                            </h1>
                        </FadeInSection>

                        <FadeInSection delay={200}>
                            <p className="max-w-lg text-lg text-neutral-400 leading-relaxed mb-10 font-light border-l border-emerald-500/50 pl-6">
                                Re-engineering the building blocks of life. We utilize CRISPR technology and AI-driven cultivation to secure the future food supply.
                            </p>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* ================= EXEC SUMMARY ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1600px] mx-auto px-6 grid lg:grid-cols-2 gap-20">
                    <FadeInSection>
                        <h2 className="text-5xl font-serif mb-8">
                            Operating where <span className="italic text-emerald-800">nature</span> meets{" "}
                            <span className="italic text-emerald-800">technology</span>.
                        </h2>
                        <p className="text-slate-600 text-lg">
                            Terra Holdings manages multi-continental agricultural assets powered by proprietary analytics.
                        </p>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="bg-stone-50 p-12 border">
                            <Building2 className="w-6 h-6 text-emerald-800 mb-4" />
                            <p className="text-sm uppercase tracking-widest font-bold text-slate-500">
                                Executive Summary
                            </p>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= SECTORS (Image Grid) ================= */}
            <section className="py-12 bg-stone-50">
                <div className="max-w-[1600px] mx-auto px-6">
                    <div className="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-stone-300 pb-8">
                        <FadeInSection>
                            <h2 className="text-4xl md:text-5xl font-serif text-emerald-950">
                                Our <span className="italic text-slate-500">Portfolio</span>
                            </h2>
                        </FadeInSection>
                        <FadeInSection delay={100}>
                            <p className="text-slate-500 text-sm max-w-sm text-right mt-4 md:mt-0 leading-relaxed font-medium">
                                A diversified conglomerate spanning biotechnology, logistics, and renewable energy.
                            </p>
                        </FadeInSection>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {[
                            {
                                title: "Bio-Science",
                                desc: "Genomic research and crop resilience.",
                                image: "https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?q=80&w=2670&auto=format&fit=crop"
                            },
                            {
                                title: "Precision Farming",
                                desc: "Autonomous robotics and AI telemetry.",
                                image: "https://images.unsplash.com/photo-1586771107445-d3ca888129ff?q=80&w=2672&auto=format&fit=crop"
                            },
                            {
                                title: "Global Supply",
                                desc: "Cold-chain logistics and distribution.",
                                image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2670&auto=format&fit=crop"
                            },
                            {
                                title: "Renewable Energy",
                                desc: "Biomass and solar integration.",
                                image: "https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?q=80&w=2670&auto=format&fit=crop"
                            },
                            {
                                title: "Water Management",
                                desc: "Desalination and irrigation infrastructure.",
                                image: "https://images.unsplash.com/photo-1563514227147-6d2ff665a6a0?q=80&w=2671&auto=format&fit=crop"
                            },
                            {
                                title: "Commodities",
                                desc: "Market analysis and futures trading.",
                                image: "https://images.unsplash.com/photo-1605000797499-95a51c5269ae?q=80&w=2671&auto=format&fit=crop"
                            },
                        ].map((item, i) => (
                            <FadeInSection key={i} delay={i * 50}>
                                <div className="group relative h-[450px] bg-white shadow-lg hover:shadow-2xl transition-all duration-700 overflow-hidden cursor-pointer">
                                    <div className="absolute inset-0">
                                        <img
                                            src={item.image}
                                            alt={item.title}
                                            className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
                                        />
                                        <div className="absolute inset-0 bg-gradient-to-t from-emerald-950/90 via-emerald-950/20 to-transparent opacity-90 group-hover:opacity-80 transition-opacity"></div>
                                    </div>

                                    <div className="absolute inset-x-0 bottom-0 p-10 flex flex-col justify-end h-full">
                                        <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                            <div className="w-12 h-1 bg-white mb-6 transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500 delay-100"></div>
                                            <h3 className="text-3xl font-serif text-white mb-2">{item.title}</h3>
                                            <p className="text-stone-300 text-sm leading-relaxed mb-6 max-w-xs opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">
                                                {item.desc}
                                            </p>
                                            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-white group-hover:text-emerald-400 transition-colors">
                                                View Sector <ArrowUpRight className="w-3 h-3" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= SUSTAINABILITY PARALLAX ================= */}
            <section className="relative py-40 overflow-hidden flex items-center">
                {/* Parallax BG */}
                <div className="absolute inset-0 bg-fixed bg-cover bg-center" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1464226184884-fa280b87c399?q=80&w=2070&auto=format&fit=crop)" }}></div>
                <div className="absolute inset-0 bg-emerald-950/80"></div>

                <div className="max-w-[1600px] mx-auto px-6 relative z-10 w-full grid lg:grid-cols-2 gap-20">
                    <FadeInSection>
                        <div className="bg-white p-12 shadow-2xl">
                            <h2 className="text-4xl font-serif text-emerald-950 mb-6">Sustainable by Design.</h2>
                            <p className="text-slate-600 text-lg leading-relaxed mb-8">
                                We don't just harvest; we regenerate. Our commitment to Net Zero 2040 drives every
                                decision, from soil microbiome restoration to electric logistics fleets.
                            </p>
                            <div className="space-y-6">
                                {[
                                    { label: "Carbon Sequestered", val: "12M Tons" },
                                    { label: "Water Efficiency", val: "+40%" },
                                    { label: "Renewable Energy", val: "100%" }
                                ].map((stat, i) => (
                                    <div key={i} className="flex justify-between items-center border-b border-stone-200 pb-4">
                                        <span className="font-bold text-slate-500 uppercase tracking-widest text-xs">{stat.label}</span>
                                        <span className="font-serif text-2xl text-emerald-900">{stat.val}</span>
                                    </div>
                                ))}
                            </div>
                            <button className="mt-10 px-8 py-4 bg-emerald-900 text-white text-xs font-bold uppercase tracking-widest hover:bg-emerald-800 transition-colors w-full">
                                Download ESG Report
                            </button>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= LATEST NEWS & INVESTORS ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1600px] mx-auto px-6">
                    <div className="flex justify-between items-end mb-16">
                        <FadeInSection>
                            <h2 className="text-4xl font-serif text-emerald-950">Corporate <span className="italic text-slate-500">News</span></h2>
                        </FadeInSection>
                        <FadeInSection delay={100}>
                            <button className="text-xs font-bold uppercase tracking-widest text-emerald-900 border-b border-emerald-900 pb-1 hover:text-emerald-700 transition-colors">
                                View Newsroom
                            </button>
                        </FadeInSection>
                    </div>

                    <div className="grid lg:grid-cols-3 gap-12">
                        {[
                            { date: "OCT 12, 2024", cat: "Acquisition", title: "Terra Holdings Completes Acquisition of BioGenetics Labs for $450M", img: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=2670&auto=format&fit=crop" },
                            { date: "SEP 28, 2024", cat: "Sustainability", title: "Global Operations Reach 85% Renewable Energy Usage", img: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?q=80&w=2574&auto=format&fit=crop" },
                            { date: "AUG 15, 2024", cat: "Innovation", title: "Introducing 'Ceres': The World's First Fully Autonomous Harvester", img: "https://images.unsplash.com/photo-1517036082269-2f22b8287c88?q=80&w=2574&auto=format&fit=crop" }
                        ].map((news, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="group cursor-pointer">
                                    <div className="aspect-[4/3] overflow-hidden mb-6 bg-stone-100">
                                        <img src={news.img} alt={news.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale group-hover:grayscale-0" />
                                    </div>
                                    <div className="flex items-center gap-4 text-xs font-bold uppercase tracking-widest mb-3">
                                        <span className="text-emerald-700">{news.cat}</span>
                                        <span className="text-stone-400 border-l border-stone-300 pl-4">{news.date}</span>
                                    </div>
                                    <h3 className="text-xl font-serif text-slate-900 leading-tight group-hover:text-emerald-800 transition-colors">
                                        {news.title}
                                    </h3>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

        </div>
    );
}