import { H1, H6, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'
import Link from 'next/link'

const CookiesPolicyHero = () => {
  const t = useTranslations()

  interface ICookieSection {
    title: string
    content?: string
    bullets?: string[]
    table?: {
      name: string
      provider: string
      purpose: string
      type: string
      expiry: string
    }[]
  }

  const sections: ICookieSection[] = [
    {
      title: '1 What Are Cookies',
      content:
        'Cookies are small text files stored on your device (computer, smartphone, tablet) when you visit a website They are widely used to make websites function properly or work more efficiently, as well as to provide information to site owners',
    },
    {
      title: '2 Why Do We Use Cookies',
      bullets: [
        'Essential cookies – Required for the operation of the site (eg, session management, language settings)',
        'Functional cookies – Improve your experience by remembering your preferences',
        'Analytics cookies – Help us understand how visitors interact with the site (eg, Google Analytics)',
        'Marketing cookies – Used to deliver personalized ads and measure their effectiveness',
      ],
    },
    {
      title: '3 Cookies We Use',
      table: [
        {
          name: '*ga, ga_',
          provider: 'Google Analytics',
          purpose: 'Tracks user behavior across pages',
          type: 'HTTP Cookie',
          expiry: '2 years',
        },
        {
          name: 'gclau',
          provider: 'Google Ads',
          purpose: 'Stores and tracks ad click information',
          type: 'HTTP Cookie',
          expiry: '3 months',
        },
        {
          name: 'IDE',
          provider: 'DoubleClick (Google)',
          purpose: 'Personalized advertising across Google properties',
          type: 'HTTP Cookie',
          expiry: '13 months',
        },
        {
          name: '*clck, clsk',
          provider: 'Microsoft Clarity',
          purpose: 'Stores user ID and session info for heatmaps/replays',
          type: 'HTTP Cookie',
          expiry: '1 year / 1 day',
        },
        {
          name: 'CLID',
          provider: 'Microsoft Clarity',
          purpose: 'Identifies the first time Clarity saw this user',
          type: 'HTTP Cookie',
          expiry: '1 year',
        },
        {
          name: 'intercom-device-id-',
          provider: 'Intercom',
          purpose: 'Identifies device for messaging and support',
          type: 'LocalStorage',
          expiry: 'Persistent',
        },
        {
          name: 'BSSESSID',
          provider: 'Leadsy',
          purpose: 'Tracks session data for lead generation',
          type: 'HTTP Cookie',
          expiry: 'Session',
        },
        {
          name: 'kd-ebfd146b2c8bd2e6',
          provider: 'Ahrefs',
          purpose: 'Analytics and SEO-related tracking',
          type: 'HTTP Cookie',
          expiry: 'Unknown',
        },
        {
          name: 'MUID',
          provider: 'Microsoft',
          purpose: 'User tracking for Microsoft services and advertising',
          type: 'HTTP Cookie',
          expiry: '1 year',
        },
        {
          name: 'NEXT_LOCALE',
          provider: 'Dadycar',
          purpose: 'Stores user’s language preference',
          type: 'HTTP Cookie',
          expiry: 'Session',
        },
      ],
    },
    {
      title: '4 Managing Cookies',
      bullets: [
        'Our cookie banner when you first visit the site',
        'Your browser settings to delete or block cookies at any time',
        'Be aware that disabling certain cookies may limit your experience on our site',
      ],
    },
    {
      title: '5 Third-Party Services',
      content:
        'We may use cookies provided by trusted third-party services such as:',
      bullets: [
        'Google Analytics & Google Ads (Google)',
        'Microsoft Clarity',
        'Intercom',
        'Leadsy',
        'Ahrefs',
      ],
    },
    {
      title: '6 Your Rights',
      bullets: [
        'Access your personal data',
        'Request correction or deletion',
        'Object to certain types of processing',
        'Withdraw your consent at any time',
      ],
      content:
        'In accordance with the GDPR, you have the right to:',
    },
    {
      title: '7 Contact Us',
      content:
        'If you have any questions about this Cookie Policy, please contact us at: contact@dadycarfr',
    },
  ]

  return (
    <section className="flex flex-col gap-16">
      <H1 className="text-center !text-xl lg:!text-3xl">{t('Cookie Policy')}</H1>
      <P>{t('Last updated')}: 20/01/2025</P>
      <P>
        {t(
          'This Cookie Policy explains how we use cookies and similar technologies on our website'
        )}{' '}
        <Link
          href="https://dadycarcom"
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-600 underline hover:text-blue-800"
        >
          dadycar.com
        </Link>
        .{' '}
        {t(
          'By continuing to browse or use our services, you agree to the use of cookies as described in this policy'
        )}
      </P>

      <ul className="flex flex-col gap-10">
        {sections.map((section, index) => (
          <li key={index} className="flex flex-col gap-4">
            <H6 className="text-primary">{t(section.title)}</H6>
            {section.content && <P>{t(section.content)}</P>}
            {section.bullets && (
              <ul className="list-disc pl-5">
                {section.bullets.map((bullet, i) => (
                  <li key={i}>
                    <P>{t(bullet)}</P>
                  </li>
                ))}
              </ul>
            )}
            {section.table && (
              <div className="overflow-auto">
                <table className="w-full text-sm border border-gray-300">
                  <thead className="bg-gray-100 text-left">
                    <tr>
                      <th className="p-2 border border-gray-300">{t("Cookie Name")}</th>
                      <th className="p-2 border border-gray-300">{t("Provider")}</th>
                      <th className="p-2 border border-gray-300">{t("Purpose")}</th>
                      <th className="p-2 border border-gray-300">{t("Type")}</th>
                      <th className="p-2 border border-gray-300">{t("Expiry")}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {section.table.map((row, i) => (
                      <tr key={i} className="border-t">
                        <td className="p-2 border border-gray-300">{t(row.name)}</td>
                        <td className="p-2 border border-gray-300">{t(row.provider)}</td>
                        <td className="p-2 border border-gray-300">{t(row.purpose)}</td>
                        <td className="p-2 border border-gray-300">{t(row.type)}</td>
                        <td className="p-2 border border-gray-300">{t(row.expiry)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </li>
        ))}
      </ul>
    </section>
  )
}

export default CookiesPolicyHero