'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Building, Globe, Mail } from 'lucide-react'

export default function ImprintPage() {
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      <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-1/2 -translate-x-1/2 w-[800px] h-[400px] 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">
          <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">
              <Globe className="w-3 h-3 text-accent" />
              <span className="text-[10px] font-mono uppercase tracking-[0.2em] text-white/70">Entity Information</span>
            </div>
            <h1 className="font-display text-5xl sm:text-7xl text-white mb-6 tracking-tight">Imprint</h1>
            <div className="flex items-center justify-center gap-6 text-[10px] font-mono text-white/30 uppercase tracking-widest">
              <span>Last Updated: 2024.12.16</span>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-white/10 border border-white/10">
            <div className="bg-[#050505] p-10 sm:p-16 relative group hover:bg-[#080808] transition-colors">
              <div className="absolute top-6 right-6 opacity-20 group-hover:opacity-40 transition-opacity">
                <Building className="w-6 h-6 text-white" />
              </div>
              <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-accent mb-8">Operator</h3>
              <div className="space-y-2 font-display text-2xl text-white">
                <p>Gugger Digital Services</p>
                <p className="text-white/40">Holzmoosrütisteig 1b</p>
                <p className="text-white/40">8820 Wädenswil</p>
                <p className="text-white/40">Switzerland</p>
              </div>
            </div>

            <div className="bg-[#050505] p-10 sm:p-16 relative group hover:bg-[#080808] transition-colors">
              <div className="absolute top-6 right-6 opacity-20 group-hover:opacity-40 transition-opacity">
                <Mail className="w-6 h-6 text-white" />
              </div>
              <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-accent mb-8">Contact</h3>
              <div className="space-y-6">
                <div>
                  <p className="text-[10px] font-mono uppercase tracking-widest text-white/30 mb-2">Electronic Mail</p>
                  <a href="mailto:hello@pounce.ch" className="font-display text-2xl text-white hover:text-accent transition-colors">hello@pounce.ch</a>
                </div>
              </div>
            </div>

            <div className="bg-[#050505] p-10 sm:p-16 relative group hover:bg-[#080808] transition-colors md:col-span-2">
              <div className="absolute top-6 right-6 opacity-20 group-hover:opacity-40 transition-opacity">
                <Globe className="w-6 h-6 text-white" />
              </div>
              <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-accent mb-8">Responsible for Content</h3>
              <div className="space-y-4">
                <p className="font-display text-xl text-white">Gugger Digital Services</p>
                <p className="text-sm font-mono text-white/40 max-w-2xl leading-relaxed">
                  According to § 55 Abs. 2 RStV: The operator is responsible for the content of this website. 
                  For questions, complaints, or legal matters, please contact us via email.
                </p>
              </div>
            </div>
          </div>

          <div className="mt-16 text-center">
            <p className="font-mono text-xs text-white/30 max-w-2xl mx-auto leading-relaxed">
              <strong>Disclaimer:</strong> Despite careful control, we assume no liability for the content of external links. The operators of the linked pages are solely responsible for their content.
            </p>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
