'use client';
import React from 'react';
import Link from 'next/link';
import { useLanguage } from '@client/contexts/LanguageContext';

export default function CookiePage() {
  const { t } = useLanguage();

  const cookieTypes = [
    {
      name: t('landing.cookie.type.StrictlyNecessary.name', 'Strictly Necessary'),
      badge: t('landing.cookie.type.StrictlyNecessary.badge', 'Always Active'),
      badgeColor: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-400',
      desc: t('landing.cookie.type.StrictlyNecessary.desc', 'These cookies are essential for the website to function and cannot be switched off. They are set in response to actions you take, such as logging in, setting your privacy preferences, or filling in forms.'),
      examples: [t('landing.cookie.type.StrictlyNecessary.example.0', 'restroagent_session — authentication session cookie'), t('landing.cookie.type.StrictlyNecessary.example.1', 'sub_gate — subscription status cache (5-minute TTL)'), t('landing.cookie.type.StrictlyNecessary.example.2', 'CSRF tokens — security protection')],
    },
    {
      name: t('landing.cookie.type.PerformanceAnalytics.name', 'Performance & Analytics'),
      badge: t('landing.cookie.type.PerformanceAnalytics.badge', 'Optional'),
      badgeColor: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400',
      desc: t('landing.cookie.type.PerformanceAnalytics.desc', 'These cookies allow us to count visits and understand how visitors interact with the Service, so we can measure and improve performance. All information collected is aggregated and anonymous.'),
      examples: [t('landing.cookie.type.PerformanceAnalytics.example.0', 'Anonymous page view tracking'), t('landing.cookie.type.PerformanceAnalytics.example.1', 'Feature usage analytics'), t('landing.cookie.type.PerformanceAnalytics.example.2', 'Error monitoring')],
    },
    {
      name: t('landing.cookie.type.Functional.name', 'Functional'),
      badge: t('landing.cookie.type.Functional.badge', 'Optional'),
      badgeColor: 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-400',
      desc: t('landing.cookie.type.Functional.desc', 'These cookies enable enhanced functionality and personalization, such as remembering your theme preference (dark/light mode) and display settings.'),
      examples: [t('landing.cookie.type.Functional.example.0', 'ra-theme — stores your dark/light mode preference'), t('landing.cookie.type.Functional.example.1', 'Sidebar collapse state'), t('landing.cookie.type.Functional.example.2', 'Language preferences')],
    },
    {
      name: t('landing.cookie.type.Marketing.name', 'Marketing'),
      badge: t('landing.cookie.type.Marketing.badge', 'Optional'),
      badgeColor: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-400',
      desc: t('landing.cookie.type.Marketing.desc', 'These cookies may be set by our advertising partners to build a profile of your interests and show relevant ads on other sites. We do not use these cookies on our core platform — only on our public marketing website.'),
      examples: [t('landing.cookie.type.Marketing.example.0', 'Referral source tracking'), t('landing.cookie.type.Marketing.example.1', 'Campaign attribution')],
    },
  ];

  const sections = [
    { title: t('landing.cookie.section.1.title', 'What Are Cookies?'), content: t('landing.cookie.section.1.content', 'Cookies are small text files that are placed on your device when you visit a website. They are widely used to make websites work efficiently and to provide information to website owners. Cookies allow us to remember your preferences, understand how you use our Service, and improve your experience.') },
    { title: t('landing.cookie.section.2.title', 'How We Use Cookies'), content: t('landing.cookie.section.2.content', 'RestroAgent uses cookies primarily to maintain your login session and remember your preferences (such as dark mode). We use minimal tracking on our core platform, focusing only on what is strictly necessary to deliver a reliable service. Our public marketing website uses additional analytics cookies to understand how visitors find and use our site.') },
    { title: t('landing.cookie.section.3.title', 'Third-Party Cookies'), content: t('landing.cookie.section.3.content', 'Some cookies are placed by third-party services that appear on our pages. These include our payment processor (Stripe), error monitoring service, and where applicable, our analytics provider. These third parties have their own privacy policies and cookie practices.') },
    { title: t('landing.cookie.section.4.title', 'Cookie Duration'), content: t('landing.cookie.section.4.content', 'Session cookies are deleted when you close your browser. Persistent cookies remain on your device for a set period: authentication cookies last up to 7 days, theme preference cookies last up to 1 year, and analytics cookies typically last up to 2 years.') },
    { title: t('landing.cookie.section.5.title', 'Managing Cookies'), content: t('landing.cookie.section.5.content', 'You can control and/or delete cookies as you wish. You can delete all cookies that are already on your computer and you can set most browsers to prevent them from being placed. However, if you do this, you may have to manually adjust some preferences every time you visit and some services and functionalities may not work. See aboutcookies.org for more information on managing cookies in your browser.') },
    { title: t('landing.cookie.section.6.title', 'Changes to This Policy'), content: t('landing.cookie.section.6.content', 'We may update this Cookie Policy from time to time to reflect changes in the cookies we use or for other operational, legal, or regulatory reasons. Please revisit this policy regularly to stay informed about our use of cookies.') },
  ];

  return (
    <>
      <section className="py-16 sm:py-20 relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-1/4 w-64 h-64 bg-amber-400/10 dark:bg-amber-500/6 rounded-full blur-3xl" />
        </div>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">{t('landing.legal.badge', 'Legal')}</p>
          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">{t('landing.cookie.hero.title', 'Cookie Policy')}</h1>
          <p className="text-gray-500 dark:text-gray-400 text-sm">{t('landing.legal.last_updated', 'Last updated')}: {t('landing.cookie.hero.date', 'April 1, 2026')}</p>
          <p className="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            {t('landing.cookie.hero.desc', 'This policy explains how RestroAgent uses cookies and similar tracking technologies on our platform and website.')}
          </p>
        </div>
      </section>

      <section className="pb-20 sm:pb-24 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-10">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-6">{t('landing.cookie.types.title', 'Types of Cookies We Use')}</h2>
          <div className="space-y-4">
            {cookieTypes.map((ct, i) => (
              <div key={i} className="p-5 sm:p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800">
                <div className="flex items-center gap-3 mb-3">
                  <h3 className="font-bold text-gray-900 dark:text-white text-sm">{ct.name}</h3>
                  <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${ct.badgeColor}`}>{ct.badge}</span>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-3">{ct.desc}</p>
                <ul className="space-y-1">
                  {ct.examples.map((ex, j) => (
                    <li key={j} className="flex items-start gap-2 text-xs text-gray-500 dark:text-gray-500">
                      <span className="text-teal-500 mt-0.5">•</span>
                      {ex}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-6">
          {sections.map((section, i) => (
            <div key={i} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800">
              <h2 className="text-base font-bold text-gray-900 dark:text-white mb-3">{section.title}</h2>
              <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{section.content}</p>
            </div>
          ))}
        </div>

        <div className="mt-12 p-6 rounded-2xl bg-orange-50 dark:bg-orange-950/20 border border-orange-100 dark:border-orange-900/30 text-center">
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{t('landing.cookie.footer.questions', 'Questions about our cookie practices?')}</p>
          <Link href="/contact" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 shadow-lg shadow-orange-500/25">
            {t('landing.legal.footer.contact_us', 'Contact Us')}
          </Link>
        </div>

        <div className="mt-8 flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
          <Link href="/terms" className="hover:text-orange-500 transition-colors">{t('landing.legal.terms', 'Terms of Service')}</Link>
          <Link href="/privacy" className="hover:text-orange-500 transition-colors">{t('landing.legal.privacy', 'Privacy Policy')}</Link>
          <Link href="/refund" className="hover:text-orange-500 transition-colors">{t('landing.legal.refund', 'Refund Policy')}</Link>
        </div>
      </section>
    </>
  );
}
