'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Scale, CheckCircle, AlertTriangle, FileText, Gavel, Ban } from 'lucide-react'

export default function TermsPage() {
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div className="absolute top-0 left-0 w-[500px] h-[500px] bg-purple-500/[0.03] rounded-full blur-[120px]" />
        <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent/[0.02] rounded-full blur-[120px]" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-48 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-[1000px] mx-auto">
          
          {/* Document Header */}
          <div className="mb-20 text-center relative">
             <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 border border-white/10 rounded-full mb-6 backdrop-blur-md">
                <FileText className="w-3 h-3 text-accent" />
                <span className="text-[10px] font-mono uppercase tracking-[0.2em] text-white/70">Protocol Alpha-9</span>
             </div>
             <h1 className="font-display text-5xl sm:text-7xl text-white mb-6 tracking-tight">
                Terms of Service
             </h1>
             <div className="flex items-center justify-center gap-6 text-[10px] font-mono text-white/30 uppercase tracking-widest">
                <span>Last Updated: 2024.10.12</span>
                <span className="w-1 h-1 bg-white/20 rounded-full" />
                <span>Ref: TOS-2024-X</span>
             </div>
          </div>

          {/* Document Container */}
          <div className="relative">
            {/* Tech Borders */}
            <div className="absolute -top-px left-0 w-20 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
            <div className="absolute -bottom-px right-0 w-20 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
            
            <div className="bg-[#050505]/80 backdrop-blur-xl border border-white/10 p-8 sm:p-16 relative overflow-hidden">
               {/* Watermark */}
               <div className="absolute top-0 right-0 p-8 opacity-[0.02] pointer-events-none">
                  <Scale className="w-96 h-96" />
               </div>

               {/* Intro */}
               <div className="mb-16 border-l-2 border-accent pl-8 py-2">
                  <p className="font-display text-2xl sm:text-3xl text-white leading-relaxed">
                     By accessing the POUNCE terminal, you agree to these operational protocols. <br/>
                     <span className="text-white/40">Read carefully.</span>
                  </p>
               </div>

               {/* Sections */}
               <div className="space-y-16">
                  
                  {/* Section 1 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">01</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <CheckCircle className="w-5 h-5 text-white/30" />
                              Access & Authorization
                           </h3>
                           <div className="prose prose-invert max-w-none font-mono text-sm text-white/60 leading-relaxed">
                              <p>
                                 Access to POUNCE is granted on a subscription basis. Credentials must not be shared. We reserve the right to terminate access for any account found violating these terms or attempting to compromise system integrity.
                              </p>
                           </div>
                        </div>
                     </div>
                  </section>

                  {/* Section 2 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">02</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <Ban className="w-5 h-5 text-white/30" />
                              Acceptable Use
                           </h3>
                           <div className="grid sm:grid-cols-1 gap-4">
                              <div className="p-6 bg-red-500/5 border border-red-500/20">
                                 <h4 className="font-bold text-white mb-2 flex items-center gap-2">
                                    <AlertTriangle className="w-4 h-4 text-red-500" />
                                    Prohibited Actions
                                 </h4>
                                 <ul className="space-y-2 font-mono text-sm text-white/60">
                                    <li className="flex items-start gap-3">
                                       <span className="text-red-500/50">×</span>
                                       Reverse engineering the API or scanning algorithms
                                    </li>
                                    <li className="flex items-start gap-3">
                                       <span className="text-red-500/50">×</span>
                                       Deploying automated scrapers against endpoints
                                    </li>
                                    <li className="flex items-start gap-3">
                                       <span className="text-red-500/50">×</span>
                                       Using the platform for illegal activities
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                  </section>

                  {/* Section 3 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">03</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <Gavel className="w-5 h-5 text-white/30" />
                              Liability & Accuracy
                           </h3>
                           <p className="font-mono text-sm text-white/50 leading-relaxed mb-6">
                              While we strive for real-time precision, domain registry data can fluctuate. POUNCE provides intelligence "as is".
                           </p>
                           <div className="bg-[#020202] border border-white/10 p-6">
                                 <p className="font-mono text-xs text-white/40 uppercase tracking-wide leading-relaxed">
                                    Gugger Digital Services shall not be liable for any indirect, incidental, or consequential damages arising from the use of our services, including but not limited to lost profits or lost data.
                                 </p>
                           </div>
                        </div>
                     </div>
                  </section>

               </div>

               {/* Footer of Card */}
               <div className="mt-20 pt-8 border-t border-white/10 flex justify-between items-center opacity-50">
                  <div className="font-mono text-[10px] uppercase tracking-widest text-left text-white/30">
                     Gugger Digital Services<br/>
                     Wädenswil, CH
                  </div>
                  <div className="font-mono text-[10px] uppercase tracking-widest text-right">
                     Doc_ID: TOS-991-BX<br/>
                     Verified
                  </div>
               </div>

            </div>
          </div>

        </div>
      </main>
      <Footer />
    </div>
  )
}
