"use client";

import React, { useEffect, useState } from "react";
import {
    Shield,
    Lock,
    Eye,
    FileText,
    Mail,
    ChevronRight,
    ArrowUp,
    UserCheck,
} from "lucide-react";

interface BreadcrumbProps {
    breadcrumbs: {
    name: string;
    href: string;
    }[];
    pageTitle: string;
    description: string;
}

const Breadcrumb = ({
    breadcrumbs,
    pageTitle,
    description,
}: BreadcrumbProps) => {

    return (
        <section className="relative overflow-hidden bg-black text-white border-b border-white/10">

            {/* Background Glow */}
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.08),transparent_35%)]" />

            <div className="relative max-w-7xl mx-auto px-6 pt-36 pb-24">

                {/* Premium Breadcrumb */}
                <nav
                    aria-label="Breadcrumb"
                    className="mb-10"
                >
                    <ol className="flex flex-wrap items-center gap-3 rounded-full border border-white/10 bg-white/5 backdrop-blur-2xl px-6 py-4 w-fit shadow-2xl shadow-black/30">

                        {breadcrumbs.map((b, i) => {
                            const isCurrent = i === breadcrumbs.length - 1;

                            return (
                                <li
                                    key={i}
                                    className="flex items-center gap-3"
                                >
                                    {!isCurrent ? (
                                        <a
                                            href={b.href}
                                            className="text-sm font-semibold text-slate-400 hover:text-white transition-all duration-300"
                                        >
                                            {b.name}
                                        </a>
                                    ) : (
                                        <span className="text-sm font-black text-white">
                                            {b.name}
                                        </span>
                                    )}

                                    {!isCurrent && (
                                        <ChevronRight
                                            size={14}
                                            className="text-slate-600"
                                        />
                                    )}
                                </li>
                            );
                        })}
                    </ol>
                </nav>

                {/* Hero Content */}
                <div className="max-w-4xl">

                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-md text-xs uppercase tracking-[0.3em] text-slate-300 mb-8">
                        <Shield size={14} />
                        Privacy & Compliance
                    </div>

                    <h1 className="text-5xl md:text-7xl font-black tracking-tight leading-none mb-8">
                        {pageTitle}
                    </h1>

                    <p className="text-lg md:text-xl text-slate-400 leading-relaxed max-w-3xl">
                        {description}
                    </p>

                </div>
            </div>
        </section>
    );
};

export default function PrivacyPage() {

    const [activeSection, setActiveSection] = useState("introduction");
    const [showScrollTop, setShowScrollTop] = useState(false);

    const breadcrumbData = [
        { name: "Home", href: "/" },
        { name: "Privacy Policy", href: "/privacy" },
    ];

    const sections = [
        {
            id: "introduction",
            title: "Introduction",
            icon: <FileText size={18} />,
        },
        {
            id: "data-collection",
            title: "Data Collection",
            icon: <UserCheck size={18} />,
        },
        {
            id: "usage",
            title: "Usage",
            icon: <Eye size={18} />,
        },
        {
            id: "security",
            title: "Security",
            icon: <Lock size={18} />,
        },
        {
            id: "contact",
            title: "Contact",
            icon: <Mail size={18} />,
        },
    ];

    useEffect(() => {

        const handleScroll = () => {

            setShowScrollTop(window.scrollY > 400);

            sections.forEach((section) => {

                const element =
                    document.getElementById(section.id);

                if (element) {

                    const rect =
                        element.getBoundingClientRect();

                    if (
                        rect.top <= 200 &&
                        rect.bottom >= 200
                    ) {
                        setActiveSection(section.id);
                    }
                }
            });
        };

        window.addEventListener("scroll", handleScroll);

        return () =>
            window.removeEventListener(
                "scroll",
                handleScroll
            );

    }, []);

    const scrollToSection = (id: string) => {

        const element =
            document.getElementById(id);

        if (element) {

            window.scrollTo({
                top: element.offsetTop - 120,
                behavior: "smooth",
            });
        }
    };

    return (
        <>
            {/* Hero */}
            <Breadcrumb
                breadcrumbs={breadcrumbData}
                pageTitle="Privacy Policy"
                description="Official privacy, security, and data protection framework for our global digital infrastructure."
            />

            {/* Main Content */}
            <div className="min-h-screen bg-white text-neutral-900 font-sans selection:bg-black selection:text-white">

                <main className="py-24 px-6">

                    <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16">

                        {/* Sidebar */}
                        <aside className="hidden lg:block lg:col-span-4 h-fit sticky top-32">

                            <div className="bg-neutral-50 rounded-3xl p-8 border border-neutral-200">

                                <h3 className="text-xs font-bold uppercase tracking-[0.3em] text-neutral-400 mb-6">
                                    Contents
                                </h3>

                                <nav className="space-y-2">

                                    {sections.map((section) => (

                                        <button
                                            key={section.id}
                                            onClick={() =>
                                                scrollToSection(section.id)
                                            }
                                            className={`w-full flex items-center gap-3 px-5 py-4 rounded-2xl text-sm font-semibold transition-all duration-300 ${activeSection === section.id
                                                ? "bg-black text-white"
                                                : "text-neutral-500 hover:bg-white hover:text-black"
                                                }`}
                                        >
                                            {section.icon}
                                            {section.title}
                                        </button>

                                    ))}

                                </nav>
                            </div>
                        </aside>

                        {/* Content */}
                        <div className="lg:col-span-8 space-y-24">

                            {/* Intro */}
                            <section
                                id="introduction"
                                className="scroll-mt-32"
                            >

                                <div className="flex items-center gap-3 mb-6 text-neutral-400">
                                    <FileText size={24} />
                                    <h2 className="text-3xl font-black text-black uppercase tracking-tight">
                                        Introduction
                                    </h2>
                                </div>

                                <div className="space-y-6 text-neutral-600 leading-relaxed text-lg">

                                    <p>
                                        We are committed to protecting your
                                        personal information using enterprise-grade
                                        security and transparent data governance.
                                    </p>

                                    <p>
                                        This policy explains how we collect,
                                        process, and safeguard information
                                        across our global infrastructure.
                                    </p>

                                </div>
                            </section>

                            {/* Data Collection */}
                            <section
                                id="data-collection"
                                className="scroll-mt-32"
                            >

                                <div className="flex items-center gap-3 mb-6 text-neutral-400">
                                    <UserCheck size={24} />
                                    <h2 className="text-3xl font-black text-black uppercase tracking-tight">
                                        Data Collection
                                    </h2>
                                </div>

                                <div className="grid gap-6">

                                    {[
                                        "Personal information submitted through forms.",
                                        "Technical analytics and browser metadata.",
                                        "Communication and support interactions.",
                                    ].map((item, index) => (

                                        <div
                                            key={index}
                                            className="bg-neutral-50 border border-neutral-200 rounded-3xl p-8"
                                        >
                                            <p className="text-neutral-600 leading-relaxed">
                                                {item}
                                            </p>
                                        </div>

                                    ))}

                                </div>
                            </section>

                            {/* Usage */}
                            <section
                                id="usage"
                                className="scroll-mt-32"
                            >

                                <div className="flex items-center gap-3 mb-6 text-neutral-400">
                                    <Eye size={24} />
                                    <h2 className="text-3xl font-black text-black uppercase tracking-tight">
                                        Usage
                                    </h2>
                                </div>

                                <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">

                                    {[
                                        "Improve user experience",
                                        "Maintain platform security",
                                        "Send important notifications",
                                        "Analyze system performance",
                                    ].map((item, i) => (

                                        <li
                                            key={i}
                                            className="flex items-start gap-3 border border-neutral-200 rounded-2xl p-5"
                                        >
                                            <div className="w-2 h-2 rounded-full bg-black mt-2" />
                                            <span className="text-neutral-600">
                                                {item}
                                            </span>
                                        </li>

                                    ))}

                                </ul>
                            </section>

                            {/* Security */}
                            <section
                                id="security"
                                className="scroll-mt-32 bg-black text-white rounded-[2rem] p-10 relative overflow-hidden"
                            >

                                <div className="absolute top-0 right-0 opacity-10 p-8">
                                    <Lock size={140} />
                                </div>

                                <div className="relative z-10">

                                    <div className="flex items-center gap-3 mb-6 text-neutral-500">
                                        <Lock size={24} />
                                        <h2 className="text-3xl font-black uppercase tracking-tight">
                                            Security
                                        </h2>
                                    </div>

                                    <p className="text-neutral-400 text-lg leading-relaxed max-w-3xl mb-8">
                                        Our infrastructure uses modern encryption,
                                        isolated systems, secure cloud storage,
                                        and advanced monitoring technologies to
                                        ensure the safety of your information.
                                    </p>

                                    <div className="inline-flex items-center gap-2 px-5 py-3 rounded-full border border-white/10 bg-white/10 text-xs uppercase tracking-widest font-mono">
                                        AES-256 ENCRYPTION ACTIVE
                                    </div>

                                </div>
                            </section>

                            {/* Contact */}
                            <section
                                id="contact"
                                className="scroll-mt-32"
                            >

                                <div className="bg-neutral-50 border border-neutral-200 rounded-[2rem] p-12 text-center">

                                    <Mail
                                        size={40}
                                        className="mx-auto mb-6 text-neutral-300"
                                    />

                                    <h2 className="text-4xl font-black mb-4">
                                        Contact Us
                                    </h2>

                                    <p className="text-neutral-500 max-w-xl mx-auto leading-relaxed mb-10">
                                        For legal inquiries, privacy requests,
                                        or compliance concerns, contact our
                                        global privacy team.
                                    </p>

                                    <a
                                        href="mailto:privacy@company.com"
                                        className="inline-flex items-center gap-2 px-10 py-5 rounded-2xl bg-black text-white font-black uppercase tracking-widest hover:scale-105 transition-all duration-300"
                                    >
                                        privacy@company.com
                                    </a>

                                </div>
                            </section>

                        </div>
                    </div>
                </main>

                {/* Scroll To Top */}
                <button
                    aria-label="Back to top"
                    onClick={() =>
                        window.scrollTo({
                            top: 0,
                            behavior: "smooth",
                        })
                    }
                    className={`fixed bottom-8 right-8 p-4 rounded-full bg-black text-white shadow-2xl transition-all duration-300 z-50 hover:scale-110 ${showScrollTop
                        ? "opacity-100 translate-y-0"
                        : "opacity-0 translate-y-10 pointer-events-none"
                        }`}
                >
                    <ArrowUp size={20} />
                </button>

            </div>
        </>
    );
}