"use client";

import React, { useState, useEffect } from 'react';
import {
    Scale,
    FileCheck,
    AlertCircle,
    Gavel,
    ShieldAlert,
    Clock,
    ChevronRight,
    ArrowUp,
    Printer,
    Download,
    Eye,
    Copyright,
    ShieldCheck,
    Terminal,
    Globe,
    Zap
} from 'lucide-react';

// Breadcrumb Integration
const Breadcrumb = ({ breadcrumbs, pageTitle, description }: any) => (
    <div className="bg-white border-b border-slate-100 pt-32 pb-16 px-6 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-1/2 h-full bg-slate-50 -skew-x-12 translate-x-24 z-0" />
        <div className="max-w-7xl mx-auto relative z-10">
            <nav className="flex mb-6 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 gap-3 items-center">
                {breadcrumbs.map((b: any, i: number) => (
                    <React.Fragment key={i}>
                        <a href={b.href} className="hover:text-black transition-colors">{b.name}</a>
                        {i < breadcrumbs.length - 1 && <div className="w-1 h-1 bg-slate-300 rounded-full" />}
                    </React.Fragment>
                ))}
            </nav>
            <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-slate-900 mb-6 leading-[0.9]">
                Terms of <br/><span className="text-slate-300 italic font-serif tracking-normal">Service.</span>
            </h1>
            <p className="text-lg text-slate-500 max-w-xl leading-relaxed border-l-2 border-slate-900 pl-6">
                {description}
            </p>
        </div>
    </div>
);

export default function TermsOfUse() {
    const breadcrumbData = [
        { name: 'Home', href: '/' },
        { name: 'Legal', href: '#' },
        { name: 'Terms of Use', href: '/terms' },
    ];
    const pageTitle = "Terms of Use";
    const description = "Legal frameworks governing your interaction with Wimraw's global IT, AI, and Robotics ecosystem.";

    const [activeSection, setActiveSection] = useState<string>("acceptance");
    const [showScrollTop, setShowScrollTop] = useState(false);
    const [scrollProgress, setScrollProgress] = useState(0);

    useEffect(() => {
        const handleScroll = () => {
            const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
            setScrollProgress((window.scrollY / totalScroll) * 100);
            setShowScrollTop(window.scrollY > 400);

            const sections = ["acceptance", "license", "conduct", "ip", "liability", "termination", "governing"];
            for (const section of sections) {
                const element = document.getElementById(section);
                if (element) {
                    const rect = element.getBoundingClientRect();
                    if (rect.top >= 0 && rect.top <= 400) {
                        setActiveSection(section);
                    }
                }
            }
        };
        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' });
        }
    };

    const sections = [
        { id: "acceptance", title: "1. Acceptance", icon: <FileCheck size={16} /> },
        { id: "license", title: "2. Usage License", icon: <Eye size={16} /> },
        { id: "conduct", title: "3. User Conduct", icon: <ShieldAlert size={16} /> },
        { id: "ip", title: "4. Intellectual Property", icon: <Copyright size={16} /> },
        { id: "liability", title: "5. Limitation of Liability", icon: <AlertCircle size={16} /> },
        { id: "termination", title: "6. Termination", icon: <Gavel size={16} /> },
        { id: "governing", title: "7. Governing Law", icon: <Scale size={16} /> },
    ];

    return (
        <main className="min-h-screen bg-[#FDFDFD] text-slate-900 font-sans selection:bg-black selection:text-white overflow-x-hidden">
            
            {/* Ambient Background Element */}
        

            {/* Reading Progress Bar */}
            <div className="fixed top-0 left-0 w-full h-1.5 z-[100] bg-slate-100">
                <div className="h-full bg-black transition-all duration-150 ease-out" style={{ width: `${scrollProgress}%` }} />
            </div>

            {/* Sticky Action Bar */}
            <div className="sticky top-0 z-50 w-full border-b border-slate-200/60 bg-white/80 backdrop-blur-xl px-6 py-4">
                <div className="max-w-7xl mx-auto flex justify-between items-center">
                    <div className="flex items-center gap-4">
                        <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center group cursor-pointer transition-transform hover:rotate-12">
                            <Scale size={14} className="text-white" />
                        </div>
                        <div className="flex flex-col">
                            <span className="text-[9px] font-black uppercase tracking-[0.3em] text-slate-400">Document Control</span>
                            <span className="text-[10px] font-bold text-black font-mono">REF: WIM-2026-TOU_v2</span>
                        </div>
                    </div>
                    <div className="flex gap-4">
                        <button onClick={() => window.print()} className="hidden sm:flex items-center gap-2 text-[10px] font-bold uppercase hover:text-black transition-colors px-3 py-2 rounded-lg hover:bg-slate-100">
                            <Printer size={14} /> Print
                        </button>
                        <button className="flex items-center gap-2 px-6 py-2 bg-black text-white text-[10px] font-black uppercase tracking-widest rounded-full hover:bg-slate-800 transition-all shadow-xl shadow-black/10">
                            <Download size={14} /> Download PDF
                        </button>
                    </div>
                </div>
            </div>

            <Breadcrumb
                breadcrumbs={breadcrumbData}
                pageTitle={pageTitle}
                description={description}
            />

            <div className="max-w-7xl mx-auto px-6 py-24">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
                    
                    {/* Navigation Sidebar */}
                    <aside className="hidden lg:block lg:col-span-3 h-fit sticky top-32">
                        <div className="space-y-12">
                            <div>
                                <h3 className="text-[9px] font-black uppercase tracking-[0.4em] text-slate-400 mb-8 border-b border-slate-100 pb-4">Clause index</h3>
                                <nav className="flex flex-col gap-1">
                                    {sections.map((section) => (
                                        <button
                                            key={section.id}
                                            onClick={() => scrollToSection(section.id)}
                                            className={`group relative flex items-center gap-4 py-3.5 px-4 rounded-xl transition-all duration-300 ${
                                                activeSection === section.id 
                                                ? 'bg-black text-white shadow-2xl shadow-black/20 translate-x-2' 
                                                : 'text-slate-400 hover:text-slate-900 hover:bg-slate-50'
                                            }`}
                                        >
                                            <span className={`text-[10px] font-mono ${activeSection === section.id ? 'opacity-50' : 'opacity-30 group-hover:opacity-100'}`}>
                                                {section.title.split('. ')[0].padStart(2, '0')}
                                            </span>
                                            <span className="text-[11px] font-bold uppercase tracking-wider">
                                                {section.title.split('. ')[1]}
                                            </span>
                                            {activeSection === section.id && <ChevronRight size={12} className="ml-auto animate-pulse" />}
                                        </button>
                                    ))}
                                </nav>
                            </div>

                            <div className="p-8 bg-slate-900 rounded-[2.5rem] text-white relative overflow-hidden group shadow-2xl shadow-slate-200">
                                <div className="absolute -top-6 -right-6 p-4 opacity-5 group-hover:rotate-12 transition-transform duration-1000">
                                    <Clock size={120} />
                                </div>
                                <h4 className="text-[11px] font-black uppercase tracking-widest mb-3 flex items-center gap-2">
                                    <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
                                    Active Status
                                </h4>
                                <p className="text-[11px] text-slate-400 leading-relaxed mb-6">
                                    Last major revision implemented Jan 2026. This version supersedes all previous agreements.
                                </p>
                                <button className="text-[10px] font-bold uppercase border-b border-white/20 pb-1 hover:border-white transition-colors">
                                    Historical Logs
                                </button>
                            </div>
                        </div>
                    </aside>

                    {/* Legal Content Body */}
                    <div className="lg:col-span-9">
                        
                        {/* Highlights Grid */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-32">
                            <div className="group bg-white p-10 border border-slate-200/60 rounded-[3rem] shadow-sm hover:shadow-2xl hover:border-slate-300 transition-all duration-700">
                                <div className="w-14 h-14 bg-slate-50 rounded-[1.5rem] flex items-center justify-center mb-8 group-hover:bg-black group-hover:text-white transition-colors duration-500">
                                    <ShieldCheck size={24} />
                                </div>
                                <h4 className="text-[11px] font-black uppercase tracking-[0.2em] mb-4 text-slate-400">The Summary</h4>
                                <h5 className="text-xl font-bold mb-4">Integrity in Usage.</h5>
                                <p className="text-sm text-slate-500 leading-relaxed">
                                    By accessing Wimraw, you agree to respect our digital infrastructure. We provide tools for your imagination; you provide the ethical boundaries.
                                </p>
                            </div>
                            <div className="bg-black p-10 rounded-[3rem] shadow-2xl text-white relative overflow-hidden">
                                <div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none">
                                    <Terminal size={100} />
                                </div>
                                <h4 className="text-[11px] font-black uppercase tracking-[0.2em] mb-4 text-slate-500">The Warning</h4>
                                <h5 className="text-xl font-bold mb-4">Prohibited Extraction.</h5>
                                <p className="text-sm text-slate-400 leading-relaxed">
                                    Automated scraping, reverse engineering of proprietary LLMs, or unauthorized Robotics firmware injection is strictly prohibited.
                                </p>
                                <div className="mt-8 pt-8 border-t border-white/10 flex items-center gap-3">
                                    <Zap size={14} className="text-amber-400" />
                                    <span className="text-[10px] font-mono text-slate-500 uppercase">Enforcement_Protocol: Active</span>
                                </div>
                            </div>
                        </div>

                        <div className="max-w-3xl space-y-40">
                            
                            {/* 1. Acceptance */}
                            <section id="acceptance" className="scroll-mt-40 group">
                                <div className="flex items-center gap-6 mb-12">
                                    <span className="text-7xl font-serif italic text-slate-100 group-hover:text-black transition-colors duration-700 select-none">01</span>
                                    <div className="h-px flex-grow bg-slate-100 group-hover:bg-slate-200 transition-colors" />
                                    <h2 className="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400">Acceptance</h2>
                                </div>
                                <h3 className="text-4xl font-black tracking-tight mb-8">Contractual Agreement.</h3>
                                <div className="prose prose-slate text-slate-600 leading-[1.8] space-y-6">
                                    <p className="text-lg font-medium text-slate-800 italic border-l-4 border-black pl-8">
                                        "Participation in our services constitutes unconditional acceptance of the Wimraw Protocols."
                                    </p>
                                    <p>
                                        These Terms of Use constitute a legally binding agreement made between you, whether personally or on behalf of an entity (“you”) and Wimraw (“we,” “us” or “our”), concerning your access to and use of the website as well as any other media form, media channel, mobile website or mobile application.
                                    </p>
                                    <p>
                                        We reserve the right, in our sole discretion, to make changes or modifications to these Terms of Use at any time and for any reason. We will alert you about any changes by updating the “Last updated” date of these Terms of Use.
                                    </p>
                                </div>
                            </section>

                            {/* 2. License */}
                            <section id="license" className="scroll-mt-40 group">
                                <div className="flex items-center gap-6 mb-12">
                                    <span className="text-7xl font-serif italic text-slate-100 group-hover:text-black transition-colors duration-700">02</span>
                                    <div className="h-px flex-grow bg-slate-100" />
                                    <h2 className="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400">License</h2>
                                </div>
                                <h3 className="text-4xl font-black tracking-tight mb-8">Restricted Privilege.</h3>
                                <div className="space-y-6">
                                    <p className="text-slate-600 leading-relaxed">
                                        Wimraw grants you a limited, non-exclusive, non-transferable, and revocable license to access our platform solely for personal or authorized business purposes.
                                    </p>
                                    <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {[
                                            "No resale of data streams",
                                            "No unauthorized API access",
                                            "Respect hardware silo limits",
                                            "Adhere to per-user rate limits"
                                        ].map((item, i) => (
                                            <li key={i} className="flex items-center gap-3 p-4 bg-white border border-slate-100 rounded-2xl text-[11px] font-bold uppercase tracking-wider text-slate-500">
                                                <div className="w-1.5 h-1.5 bg-black rounded-full" />
                                                {item}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </section>

                            {/* 4. Intellectual Property - High Impact */}
                            <section id="ip" className="scroll-mt-40">
                                <div className="flex items-center gap-6 mb-12">
                                    <span className="text-7xl font-serif italic text-slate-100">04</span>
                                    <div className="h-px flex-grow bg-slate-100" />
                                    <h2 className="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400">Ownership</h2>
                                </div>
                                <div className="bg-white border border-slate-200 p-12 rounded-[4rem] shadow-sm relative overflow-hidden group hover:border-black transition-all duration-1000">
                                    <div className="absolute -bottom-20 -right-20 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity duration-1000 rotate-12">
                                        <Copyright size={400} />
                                    </div>
                                    <div className="relative z-10">
                                        <h3 className="text-3xl font-black mb-8 tracking-tighter uppercase">Proprietary Assets.</h3>
                                        <div className="space-y-6 text-slate-600 leading-[1.8]">
                                            <p>
                                                Unless otherwise indicated, the Site, its underlying source code, AI training weights, Robotics schematics, and design elements (collectively, the “Content”) are our proprietary property.
                                            </p>
                                            <p>
                                                The Content and the Marks are provided on the Site “AS IS” for your information and personal use only. No part of the Site may be copied, reproduced, aggregated, republished, or uploaded without our express prior written permission.
                                            </p>
                                        </div>
                                        <div className="mt-12 flex gap-4">
                                            <div className="w-12 h-px bg-slate-200 mt-3" />
                                            <p className="text-[10px] font-mono text-slate-400 uppercase tracking-widest">Wimraw Intellectual Property Bureau © 2026</p>
                                        </div>
                                    </div>
                                </div>
                            </section>

                            {/* 7. Governing Law */}
                            <section id="governing" className="scroll-mt-40 pt-20">
                                <div className="bg-slate-100 p-16 rounded-[4rem] text-center relative overflow-hidden">
                                    <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10" />
                                    <Globe size={48} className="mx-auto mb-8 text-slate-300" strokeWidth={1} />
                                    <h3 className="text-4xl font-black mb-6 tracking-tight">Jurisdiction.</h3>
                                    <p className="text-slate-500 max-w-lg mx-auto mb-10 leading-relaxed text-sm">
                                        These Terms and your use of our services are governed by and construed in accordance with the laws of the jurisdiction in which Wimraw operates its primary data centers.
                                    </p>
                                    <div className="flex flex-col md:flex-row justify-center items-center gap-8">
                                        <div className="text-left">
                                            <p className="text-[9px] font-black uppercase text-slate-400 tracking-[0.2em] mb-1">Primary HQ</p>
                                            <p className="text-[11px] font-bold text-black uppercase">Innovation District, Global City</p>
                                        </div>
                                        <div className="h-8 w-px bg-slate-200 hidden md:block" />
                                        <div className="text-left">
                                            <p className="text-[9px] font-black uppercase text-slate-400 tracking-[0.2em] mb-1">Arbitration</p>
                                            <p className="text-[11px] font-bold text-black uppercase">International Chamber of Commerce</p>
                                        </div>
                                    </div>
                                </div>
                            </section>

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

        

            {/* Scroll-to-Top Button */}
            <button 
                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                className={`fixed bottom-10 right-10 p-4 bg-white text-black border border-slate-200 rounded-full shadow-2xl transition-all duration-500 z-[90] hover:bg-black hover:text-white group ${showScrollTop ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-10 scale-90 pointer-events-none'}`}
            >
                <ArrowUp size={20} className="group-hover:-translate-y-1 transition-transform" />
            </button>
        </main>
    );
}