'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Cookie, Calendar, Check } from 'lucide-react'

const cookieTypes = [
  {
    name: 'Essential Cookies',
    required: true,
    description: 'These cookies are necessary for the website to function and cannot be disabled.',
    examples: [
      { name: 'session_id', purpose: 'Maintains your login session', duration: 'Session' },
      { name: 'csrf_token', purpose: 'Security token to prevent attacks', duration: 'Session' },
    ],
  },
  {
    name: 'Functional Cookies',
    required: false,
    description: 'These cookies enable enhanced functionality and personalization.',
    examples: [
      { name: 'theme', purpose: 'Remembers your display preferences', duration: '1 year' },
      { name: 'language', purpose: 'Stores your language preference', duration: '1 year' },
    ],
  },
  {
    name: 'Analytics Cookies',
    required: false,
    description: 'These cookies help us understand how visitors interact with our website.',
    examples: [
      { name: '_ga', purpose: 'Google Analytics identifier', duration: '2 years' },
      { name: '_gid', purpose: 'Google Analytics daily identifier', duration: '24 hours' },
    ],
  },
]

const sections = [
  {
    title: 'What Are Cookies?',
    content: `
      <p>Cookies are small text files that are placed on your device when you visit a website. They are widely used to make websites work more efficiently and provide information to website owners.</p>
      <p>We use cookies and similar technologies (such as local storage) to improve your experience on our website.</p>
    `,
  },
  {
    title: 'How We Use Cookies',
    content: `
      <p>We use cookies for several purposes:</p>
      <ul>
        <li><strong>Authentication:</strong> To keep you logged in and maintain your session</li>
        <li><strong>Security:</strong> To protect against fraud and unauthorized access</li>
        <li><strong>Preferences:</strong> To remember your settings and preferences</li>
        <li><strong>Analytics:</strong> To understand how you use our service and improve it</li>
      </ul>
    `,
  },
  {
    title: 'Third-Party Cookies',
    content: `
      <p>Some cookies are placed by third-party services that appear on our pages:</p>
      <ul>
        <li><strong>Google Analytics:</strong> For website analytics (can be disabled)</li>
        <li><strong>Stripe:</strong> For secure payment processing</li>
      </ul>
      <p>These third parties have their own privacy policies governing the use of cookies.</p>
    `,
  },
  {
    title: 'Managing Cookies',
    content: `
      <p>You can control and manage cookies in several ways:</p>
      <ul>
        <li><strong>Browser Settings:</strong> Most browsers allow you to refuse or delete cookies through their settings</li>
        <li><strong>Our Settings:</strong> You can adjust your cookie preferences using our cookie consent tool</li>
        <li><strong>Opt-Out Links:</strong> Some analytics providers offer opt-out browser extensions</li>
      </ul>
      <p>Note that disabling certain cookies may affect the functionality of our website.</p>
    `,
  },
  {
    title: 'Updates to This Policy',
    content: `
      <p>We may update this Cookie Policy from time to time to reflect changes in technology, legislation, or our data practices. We encourage you to periodically review this page for the latest information.</p>
    `,
  },
  {
    title: 'Contact Us',
    content: `
      <p>If you have questions about our use of cookies, please contact us at:</p>
      <ul>
        <li>Email: privacy@pounce.dev</li>
        <li>Address: pounce AG, Zurich, Switzerland</li>
      </ul>
    `,
  },
]

export default function CookiesPage() {
  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">
          {/* Hero */}
          <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">
              <Cookie 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">
              Cookie Policy
            </h1>
            <div className="flex items-center gap-2 text-body-sm text-foreground-muted">
              <Calendar className="w-4 h-4" />
              <span>Last Updated: December 8, 2025</span>
            </div>
          </div>

          {/* Introduction */}
          <div className="prose-custom mb-12 animate-slide-up">
            <p className="text-body-lg text-foreground-muted leading-relaxed">
              This Cookie Policy explains how pounce uses cookies and similar technologies 
              to recognize you when you visit our website.
            </p>
          </div>

          {/* Cookie Types */}
          <section className="mb-12 animate-slide-up">
            <h2 className="text-heading-sm font-medium text-foreground mb-6">
              Types of Cookies We Use
            </h2>
            <div className="space-y-4">
              {cookieTypes.map((type) => (
                <div
                  key={type.name}
                  className="p-6 bg-background-secondary/50 border border-border rounded-xl"
                >
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="text-body font-medium text-foreground">{type.name}</h3>
                    {type.required ? (
                      <span className="text-ui-xs text-foreground-subtle bg-background-tertiary px-2 py-0.5 rounded-full">
                        Required
                      </span>
                    ) : (
                      <span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
                        Optional
                      </span>
                    )}
                  </div>
                  <p className="text-body-sm text-foreground-muted mb-4">{type.description}</p>
                  <div className="bg-background-tertiary rounded-lg overflow-hidden">
                    <table className="w-full text-body-sm">
                      <thead>
                        <tr className="border-b border-border">
                          <th className="text-left text-foreground-subtle font-medium px-4 py-2">Cookie</th>
                          <th className="text-left text-foreground-subtle font-medium px-4 py-2">Purpose</th>
                          <th className="text-left text-foreground-subtle font-medium px-4 py-2 hidden sm:table-cell">Duration</th>
                        </tr>
                      </thead>
                      <tbody>
                        {type.examples.map((cookie) => (
                          <tr key={cookie.name} className="border-b border-border last:border-0">
                            <td className="px-4 py-2 font-mono text-foreground">{cookie.name}</td>
                            <td className="px-4 py-2 text-foreground-muted">{cookie.purpose}</td>
                            <td className="px-4 py-2 text-foreground-muted hidden sm:table-cell">{cookie.duration}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Sections */}
          <div className="space-y-10">
            {sections.map((section, i) => (
              <section
                key={section.title}
                className="animate-slide-up"
                style={{ animationDelay: `${i * 50}ms` }}
              >
                <h2 className="text-heading-sm font-medium text-foreground mb-4">
                  {section.title}
                </h2>
                <div
                  className="prose-custom text-body text-foreground-muted leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-2 [&_li]:text-foreground-muted [&_strong]:text-foreground [&_p]:mb-4"
                  dangerouslySetInnerHTML={{ __html: section.content }}
                />
              </section>
            ))}
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}