'use client'

import * as React from 'react'
import { useRouter } from '@/lib/router'
import { PageShell, PageHero, Section, SectionHeading, Reveal, Eyebrow, Card, LabeledDivider } from '@/components/site/ui'

export function CookiesPage() {
  return (
    <PageShell>
      <PageHero
        index="03"
        eyebrow="Legal & Compliance"
        title="Cookie Policy"
        highlight="Tracking Technologies"
        lead="A comprehensive overview of how Espandiar Pharmaceuticals uses cookies and similar tracking technologies on espandiar.com, including their purposes, categories, and how you can manage your preferences."
      />

      {/* Section 1: What Are Cookies */}
      <Section tone="light">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="01" title="What Are Cookies" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Cookies are small text files consisting of a series of letters and numbers that are placed on your computer, smartphone, or other device when you visit a website. Cookies are widely used by website operators to make their websites work more efficiently, to provide a better browsing experience, and to supply information to the owners of the site. Cookies allow websites to recognize your device and remember information about your visit, such as your preferred language and other settings, which can make your next visit easier and the site more useful to you.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Cookies can be "persistent" (stored on your device until they expire or are deleted) or "session" cookies (deleted automatically when you close your browser). Cookies may also be set by the website you are visiting ("first-party cookies") or by third-party services operating on that website ("third-party cookies"). In addition to cookies, Espandiar may use similar technologies such as pixel tags (also known as web beacons or clear GIFs), local storage, and session storage, which function in a similar manner to cookies.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              This Cookie Policy explains what cookies Espandiar Pharmaceuticals GmbH ("Espandiar," "we," "us," or "our") uses on espandiar.com (the "Website"), why we use them, and how you can control and manage your cookie preferences. This Cookie Policy should be read in conjunction with our <a href="#/privacy" className="text-[#0d5d50] underline underline-offset-2 font-medium">Privacy Policy</a>.
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Section 2: How We Use Cookies */}
      <Section tone="pearl">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="02" title="How We Use Cookies" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Espandiar uses cookies on the Website for the following primary purposes:
            </p>
          </Reveal>
          <Reveal>
            <div className="space-y-3 text-sm text-muted-foreground">
              <p><strong>Essential Website Functionality:</strong> To ensure the Website functions correctly, securely, and efficiently, including maintaining your session, remembering your preferences, enforcing security measures (such as Cross-Site Request Forgery protection), and ensuring that the content you view is delivered correctly to your device.</p>
              <p><strong>Analytics and Performance Measurement:</strong> To collect anonymized and aggregated information about how visitors interact with the Website, including pages visited, time spent on pages, navigation paths, and general geographic location (at the country level only). This data helps us understand how visitors use the Website, identify areas for improvement, and optimize the user experience and website performance.</p>
              <p><strong>Functionality and Personalization:</strong> To remember your preferences and settings, such as your preferred language, theme (light/dark mode), and display preferences, so that we can provide a more personalized and convenient experience during subsequent visits.</p>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Section 3: Types of Cookies */}
      <Section tone="light">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="03" title="Types of Cookies We Use" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              The cookies used on the Website fall into the following categories:
            </p>
          </Reveal>
          <Reveal>
            <div className="space-y-4">
              <Card tone="light">
                <p className="text-sm font-semibold text-[#0d5d50]">Strictly Necessary Cookies</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  These cookies are essential for the operation of the Website. They enable core functionality such as session management, security enforcement, and the storage of fundamental preferences. The Website cannot function properly without these cookies, and they do not require consent under the ePrivacy Directive (Directive 2002/58/EC) as amended by Directive 2009/136/EC. Strictly necessary cookies include session cookies that maintain your authenticated state, CSRF tokens that protect against cross-site request forgery attacks, and preference cookies that store essential display settings such as your chosen theme.
                </p>
              </Card>
              <Card tone="light">
                <p className="text-sm font-semibold text-[#0d5d50]">Analytics Cookies</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  These cookies collect anonymized and aggregated information about how visitors use the Website, enabling us to understand usage patterns and improve the Website's performance, content, and user experience. Analytics data is processed in a pseudonymized form and is not used to identify individual users. We use IP anonymization to truncate IP addresses before they are processed, ensuring that full IP addresses are never stored. Analytics cookies are set only after you have provided your consent through the cookie consent mechanism.
                </p>
              </Card>
              <Card tone="light">
                <p className="text-sm font-semibold text-[#0d5d50]">Functional Cookies</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  These cookies enable the Website to remember choices you make (such as your preferred language or display settings) and provide enhanced, personalized features. Functional cookies improve the browsing experience by adapting the Website's behavior to your preferences. These cookies are set only with your consent.
                </p>
              </Card>
              <Card tone="light">
                <p className="text-sm font-semibold text-[#0d5d50]">Marketing / Advertising Cookies</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  These cookies are used to track visitors across websites for the purpose of displaying relevant advertisements. Espandiar currently does not use marketing or advertising cookies on the Website. If this policy changes in the future, we will update this Cookie Policy and obtain your consent before deploying any marketing cookies.
                </p>
              </Card>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Section 4: Detailed Cookie Table */}
      <Section tone="pearl">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="04" title="Detailed Cookie Table" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              The following table provides a detailed overview of the cookies currently used on the Website:
            </p>
          </Reveal>
          <Reveal>
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead>
                  <tr className="border-b border-[#dce2dd] dark:border-[#253630]">
                    <th className="pb-3 pr-4 text-xs font-bold uppercase tracking-wider text-[#0d5d50] dark:text-[#8fb9ad]">Cookie Name</th>
                    <th className="pb-3 pr-4 text-xs font-bold uppercase tracking-wider text-[#0d5d50] dark:text-[#8fb9ad]">Category</th>
                    <th className="pb-3 pr-4 text-xs font-bold uppercase tracking-wider text-[#0d5d50] dark:text-[#8fb9ad]">Purpose</th>
                    <th className="pb-3 pr-4 text-xs font-bold uppercase tracking-wider text-[#0d5d50] dark:text-[#8fb9ad]">Duration</th>
                    <th className="pb-3 text-xs font-bold uppercase tracking-wider text-[#0d5d50] dark:text-[#8fb9ad]">Domain</th>
                  </tr>
                </thead>
                <tbody className="text-muted-foreground">
                  <tr className="border-b border-border">
                    <td className="py-4 pr-4 font-mono text-xs">next.sessionid</td>
                    <td className="py-4 pr-4">Strictly Necessary</td>
                    <td className="py-4 pr-4">Maintains the user session state and enables secure navigation across pages on the Website. Without this cookie, the Website cannot reliably maintain your session or protect against session-related security vulnerabilities.</td>
                    <td className="py-4 pr-4 whitespace-nowrap">1 hour</td>
                    <td className="py-4 whitespace-nowrap">espandiar.com</td>
                  </tr>
                  <tr className="border-b border-border">
                    <td className="py-4 pr-4 font-mono text-xs">esp_theme</td>
                    <td className="py-4 pr-4">Strictly Necessary</td>
                    <td className="py-4 pr-4">Stores your preferred visual theme setting (light mode or dark mode) so that the Website renders with your selected theme on subsequent visits without requiring you to re-select your preference.</td>
                    <td className="py-4 pr-4 whitespace-nowrap">1 year</td>
                    <td className="py-4 whitespace-nowrap">espandiar.com</td>
                  </tr>
                  <tr className="border-b border-border">
                    <td className="py-4 pr-4 font-mono text-xs">_ga</td>
                    <td className="py-4 pr-4">Analytics</td>
                    <td className="py-4 pr-4">Used to distinguish individual users by assigning a randomly generated identifier. Enables the calculation of visitor, session, and campaign data. The IP address is anonymized before processing, and the cookie does not contain any personally identifiable information.</td>
                    <td className="py-4 pr-4 whitespace-nowrap">2 years</td>
                    <td className="py-4 whitespace-nowrap">.espandiar.com</td>
                  </tr>
                  <tr className="border-b border-border">
                    <td className="py-4 pr-4 font-mono text-xs">_gid</td>
                    <td className="py-4 pr-4">Analytics</td>
                    <td className="py-4 pr-4">Used to distinguish individual users within a 24-hour period. Enables the generation of aggregated analytics reports about how visitors interact with the Website. Data is processed in pseudonymized form.</td>
                    <td className="py-4 pr-4 whitespace-nowrap">24 hours</td>
                    <td className="py-4 whitespace-nowrap">.espandiar.com</td>
                  </tr>
                  <tr>
                    <td className="py-4 pr-4 font-mono text-xs">_gat</td>
                    <td className="py-4 pr-4">Analytics</td>
                    <td className="py-4 pr-4">Used to throttle the request rate for analytics tracking. Prevents the analytics system from being overwhelmed by excessive tracking requests from a single user session, ensuring that analytics data is collected reliably and that Website performance is not adversely affected.</td>
                    <td className="py-4 pr-4 whitespace-nowrap">1 minute</td>
                    <td className="py-4 whitespace-nowrap">.espandiar.com</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Section 5: Third-Party Cookies */}
      <Section tone="light">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="05" title="Third-Party Cookies" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              At present, Espandiar does not place or utilize third-party cookies on the Website. All cookies deployed on espandiar.com are first-party cookies set directly by Espandiar or through our authorized first-party analytics tools operating under our direct control.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Espandiar does not use social media tracking cookies (e.g., Facebook Pixel, LinkedIn Insight Tag, Twitter Pixel), advertising network cookies (e.g., Google Ads, programmatic advertising), or any other third-party tracking cookies. We do not participate in cross-site tracking or retargeting activities.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              If Espandiar's cookie practices change in the future and third-party cookies are introduced, this Cookie Policy will be updated accordingly, and we will obtain your consent prior to deploying any third-party cookies, in compliance with the ePrivacy Directive and applicable national implementing legislation.
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Section 6: Managing Cookies */}
      <Section tone="pearl">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="06" title="Managing Cookies" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              You have the right to decide whether to accept or reject cookies. You can exercise your cookie preferences through the following methods:
            </p>
          </Reveal>
          <Reveal>
            <p className="text-sm font-semibold">Browser Settings</p>
            <p className="mt-2 text-sm text-muted-foreground">
              Most web browsers allow you to control cookies through their settings. You can typically set your browser to refuse all cookies, accept only first-party cookies, delete cookies when you close your browser, or block cookies from specific websites. The following instructions describe how to manage cookies in the most commonly used browsers:
            </p>
          </Reveal>
          <Reveal>
            <div className="space-y-4 text-sm text-muted-foreground">
              <Card tone="light">
                <p className="font-semibold">Google Chrome</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  Navigate to Settings &gt; Privacy and security &gt; Cookies and other site data. Here you can block third-party cookies, allow or block cookies from specific sites, clear all cookies and site data when you close Chrome, or manage individual site permissions. Chrome also offers an Incognito mode that does not save cookies after the session ends.
                </p>
              </Card>
              <Card tone="light">
                <p className="font-semibold">Mozilla Firefox</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  Navigate to Settings &gt; Privacy &amp; Security &gt; Cookies and Site Data. Firefox offers Standard, Strict, and Custom settings for cookie management. You can block third-party tracking cookies, delete existing cookies and site data, manage exceptions for specific websites, or use Firefox's Enhanced Tracking Protection feature to automatically block tracking cookies.
                </p>
              </Card>
              <Card tone="light">
                <p className="font-semibold">Apple Safari</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  Navigate to Safari &gt; Preferences &gt; Privacy. Safari includes Intelligent Tracking Prevention (ITP), which by default blocks third-party tracking cookies. You can also choose to block all cookies, prevent cross-site tracking, or manage website-specific settings through the Websites tab.
                </p>
              </Card>
              <Card tone="light">
                <p className="font-semibold">Microsoft Edge</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  Navigate to Settings &gt; Cookies and site permissions &gt; Manage and delete cookies and site data. Edge provides options to block third-party cookies, clear browsing data on exit, and manage cookies for individual sites. Edge also includes a tracking prevention feature with Basic, Balanced, and Strict levels.
                </p>
              </Card>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Section 7: Consent */}
      <Section tone="light">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="07" title="Your Consent" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              In accordance with the ePrivacy Directive (Directive 2002/58/EC, as amended by Directive 2009/136/EC) and the German Telemedia Act (Telemediengesetz, TMG), Espandiar obtains your consent before placing any non-essential cookies (i.e., analytics and functional cookies) on your device. Strictly necessary cookies are exempt from the consent requirement, as they are essential for the provision of the information society service requested by you.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              When you first visit the Website, a cookie consent banner or preference center is displayed, allowing you to: (a) accept all non-essential cookies; (b) reject all non-essential cookies; or (c) customize your preferences by category (analytics, functional). Your consent is recorded and stored, and you can change your preferences at any time by revisiting the consent management interface, which is accessible through a link in the Website footer or through your browser settings.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Consent is obtained through a clear and affirmative action on your part (e.g., clicking an "Accept" button). Silence, pre-ticked boxes, or inactivity do not constitute valid consent. You may withdraw your consent at any time through the cookie consent management tool. Withdrawal of consent does not affect the lawfulness of processing carried out on the basis of consent before its withdrawal.
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Section 8: Impact of Disabling Cookies */}
      <Section tone="pearl">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="08" title="Impact of Disabling Cookies" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              If you choose to disable or reject cookies, certain features and functionality of the Website may be limited or unavailable. The specific impact depends on which categories of cookies you disable:
            </p>
          </Reveal>
          <Reveal>
            <div className="space-y-3 text-sm text-muted-foreground">
              <p><strong>Disabling strictly necessary cookies:</strong> If you block strictly necessary cookies, the Website will not be able to function properly. You may experience difficulties with navigation, session management, and security features. Pages may not load correctly, and you may be unable to access certain areas of the Website. We strongly recommend that you do not disable strictly necessary cookies.</p>
              <p><strong>Disabling analytics cookies:</strong> If you reject analytics cookies, Espandiar will not be able to collect usage data about your visit. This means we will have less information available to understand how visitors use the Website and to make improvements. The core functionality of the Website will not be affected.</p>
              <p><strong>Disabling functional cookies:</strong> If you reject functional cookies, the Website will not be able to remember your preferences (such as theme or display settings). You may need to reconfigure your preferences each time you visit the Website. Core functionality will not be affected.</p>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Section 9: Updates to This Policy */}
      <Section tone="light">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="09" title="Updates to This Policy" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              Espandiar reserves the right to update, modify, or replace this Cookie Policy at any time to reflect changes in the cookies we use, changes in technology, changes in applicable laws and regulations (including updates to the ePrivacy Directive and the GDPR), or for other operational reasons. We will not expand the scope of cookie usage without obtaining your consent where required by applicable law.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              When we make changes to this Cookie Policy, we will update the "Last Updated" date at the bottom of this page. For material changes (such as the introduction of new cookie categories, new third-party cookies, or significant changes to the purposes of processing), we will re-present the cookie consent banner on your next visit to the Website to obtain your refreshed consent.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              We encourage you to review this Cookie Policy periodically to stay informed about our use of cookies and tracking technologies.
            </p>
          </Reveal>
        </div>
      </Section>

      {/* Section 10: Contact */}
      <Section tone="pearl">
        <div className="mx-auto max-w-3xl space-y-10">
          <Reveal>
            <SectionHeading eyebrow="Section" index="10" title="Contact Information" tone="light" />
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              If you have any questions, concerns, or requests regarding this Cookie Policy, the cookies we use, or your cookie preferences, please contact us:
            </p>
          </Reveal>
          <Reveal>
            <Card tone="light">
              <p className="font-semibold">Espandiar Pharmaceuticals GmbH</p>
              <p className="mt-2 text-sm text-muted-foreground">
                Frankfurt am Main, Hessen, Germany<br />
                Email: <a href="mailto:Info@espandiarpharma.com" className="text-[#0d5d50] underline underline-offset-2">Info@espandiarpharma.com</a><br />
                Telephone: <a href="tel:+4915223449208" className="text-[#0d5d50] underline underline-offset-2">+49 1522 3449208</a>
              </p>
            </Card>
          </Reveal>
          <Reveal>
            <p className="text-muted-foreground">
              For privacy-related questions concerning the personal data collected through cookies, please also refer to our <a href="#/privacy" className="text-[#0d5d50] underline underline-offset-2 font-medium">Privacy Policy</a> or contact our Data Protection Officer at <a href="mailto:Info@espandiarpharma.com" className="text-[#0d5d50] underline underline-offset-2">Info@espandiarpharma.com</a>.
            </p>
          </Reveal>
          <Reveal>
            <p className="text-sm text-muted-foreground">
              This Cookie Policy was last updated on January 1, 2025. &copy; {new Date().getFullYear()} Espandiar Pharmaceuticals GmbH. All rights reserved.
            </p>
          </Reveal>
        </div>
      </Section>
    </PageShell>
  )
}