'use client'

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

const companyInfo = [
  {
    icon: Building,
    label: 'Company Name',
    value: 'Gugger Digital Services',
  },
  {
    icon: Globe,
    label: 'Registered Office',
    value: 'Holzmoosrütisteig 1b, 8820 Wädenswil, Switzerland',
  },
]

const contacts = [
  { type: 'General Inquiries', email: 'hello@pounce.ch' },
  { type: 'Technical Support', email: 'hello@pounce.ch' },
  { type: 'Legal / Privacy', email: 'hello@pounce.ch' },
  { type: 'Press / Media', email: 'hello@pounce.ch' },
]

export default function ImprintPage() {
  return (
    <div className="min-h-screen bg-background relative flex flex-col">
      <Header />
      <main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-3xl mx-auto">
          <div className="mb-12 animate-fade-in">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
              <Building className="w-4 h-4 text-accent" />
              <span className="text-ui-sm text-foreground-muted">Legal</span>
            </div>
            <h1 className="font-display text-[2.25rem] sm:text-[3rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
              Imprint
            </h1>
            <p className="text-body-lg text-foreground-muted">
              Legal information about Gugger Digital Services
            </p>
          </div>

          <section className="mb-12 animate-slide-up">
            <h2 className="text-heading-sm font-medium text-foreground mb-6">Company Information</h2>
            <div className="grid sm:grid-cols-2 gap-4">
              {companyInfo.map((item) => (
                <div key={item.label} className="p-5 bg-background-secondary/50 border border-border rounded-xl">
                  <div className="flex items-center gap-3 mb-2">
                    <item.icon className="w-4 h-4 text-accent" />
                    <span className="text-ui-sm text-foreground-subtle">{item.label}</span>
                  </div>
                  <p className="text-body font-medium text-foreground">{item.value}</p>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-12 animate-slide-up" style={{ animationDelay: '50ms' }}>
            <h2 className="text-heading-sm font-medium text-foreground mb-6">Management</h2>
            <div className="p-6 bg-background-secondary/50 border border-border rounded-xl">
              <p className="text-body text-foreground mb-2">
                <strong className="text-foreground">Managing Director:</strong>
              </p>
              <p className="text-body text-foreground-muted">
                The company is represented by its management in accordance with Swiss law.
              </p>
            </div>
          </section>

          <section className="mb-12 animate-slide-up" style={{ animationDelay: '100ms' }}>
            <h2 className="text-heading-sm font-medium text-foreground mb-6">Contact</h2>
            <div className="grid sm:grid-cols-2 gap-4">
              {contacts.map((contact) => (
                <div key={contact.type} className="p-5 bg-background-secondary/50 border border-border rounded-xl">
                  <p className="text-ui-sm text-foreground-subtle mb-1">{contact.type}</p>
                  <a href={`mailto:${contact.email}`} className="text-body text-accent hover:text-accent-hover transition-colors flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    {contact.email}
                  </a>
                </div>
              ))}
            </div>
          </section>

          <section className="mb-12 animate-slide-up" style={{ animationDelay: '150ms' }}>
            <h2 className="text-heading-sm font-medium text-foreground mb-6">Disclaimer</h2>
            <div className="space-y-6 text-body text-foreground-muted leading-relaxed">
              <div>
                <h3 className="text-body font-medium text-foreground mb-2">Liability for Content</h3>
                <p>The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents accuracy, completeness, or topicality.</p>
              </div>
              <div>
                <h3 className="text-body font-medium text-foreground mb-2">Liability for Links</h3>
                <p>Our website contains links to external third-party websites over whose content we have no influence. The respective provider is always responsible for the linked pages.</p>
              </div>
              <div>
                <h3 className="text-body font-medium text-foreground mb-2">Copyright</h3>
                <p>The content and works created by the site operators on these pages are subject to Swiss copyright law.</p>
              </div>
            </div>
          </section>

          <section className="animate-slide-up" style={{ animationDelay: '200ms' }}>
            <h2 className="text-heading-sm font-medium text-foreground mb-6">Regulatory Information</h2>
            <div className="p-6 bg-background-secondary/30 border border-border rounded-xl">
              <p className="text-body text-foreground-muted leading-relaxed">
                Gugger Digital Services is a company based in Switzerland. We operate in compliance with Swiss law and applicable EU regulations including GDPR for EU residents. For complaints or regulatory matters, please contact us at{' '}
                <a href="mailto:hello@pounce.ch" className="text-accent hover:text-accent-hover">hello@pounce.ch</a>.
              </p>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  )
}