"use client";

import Link from "next/link";

/**
 * CookiePolicyContent Component
 * 
 * Provides an easy-to-understand breakdown of what cookies are, why they are used,
 * the different categories of cookies, and options to manage consent preferences.
 */
export default function CookiePolicyContent() {
  // Function to open the consent banner modal manually via WP Consent API or Complianz
  const handleOpenCookieSettings = () => {
    if (typeof window !== "undefined") {
      const win = window as any;
      if (win.cookieyes) {
        if (typeof win.cookieyes._showCookieBanner === "function") {
          win.cookieyes._showCookieBanner();
        } else if (typeof win.cookieyes.show === "function") {
          win.cookieyes.show();
        } else {
          const revisitBtn = document.querySelector(".cky-btn-revisit") as HTMLElement;
          if (revisitBtn) revisitBtn.click();
        }
      } else {
        const revisitBtn = document.querySelector(".cky-btn-revisit") as HTMLElement;
        if (revisitBtn) {
          revisitBtn.click();
        } else {
          alert("Cookie preferences banner is currently loading.");
        }
      }
    }
  };

  return (
    <div className="py-8 md:py-16 bg-[#F8FAFC]">
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Page Header */}
        <div className="mb-10 text-center md:text-left">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#00204F] mb-4">
            Cookie Policy
          </h1>
          <p className="text-sm md:text-base text-[#334D72] font-medium">
            Last Updated: August 6, 2026
          </p>
        </div>

        {/* Action Banner to Manage Preferences */}
        <div className="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-[#E2E8F0] mb-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <div>
            <h3 className="text-lg md:text-xl font-bold text-[#00204F] mb-1">
              Your Privacy & Cookie Choices
            </h3>
            <p className="text-sm text-[#334D72]">
              You can review or change your cookie consent preferences at any time.
            </p>
          </div>
          <button
            onClick={handleOpenCookieSettings}
            className="cky-banner-element w-full md:w-auto px-6 py-3 bg-[#1718FF] hover:bg-[#000dcc] text-white font-semibold text-sm rounded-xl transition-colors duration-200 shadow-md whitespace-nowrap cursor-pointer"
          >
            Manage Cookie Preferences
          </button>
        </div>

        {/* Content Sections */}
        <div className="bg-white p-6 md:p-10 rounded-2xl shadow-sm border border-[#E2E8F0] space-y-8 text-[#334D72] leading-relaxed">
          {/* Section 1: Introduction */}
          <section className="border-b border-[#E2E8F0] pb-6">
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-3">
              1. What Are Cookies?
            </h2>
            <p className="text-base mb-3">
              Cookies are small text files that are stored on your computer, tablet, or mobile device when you visit a website. They are widely used to make websites work efficiently, improve your browsing experience, and provide analytical information to website owners.
            </p>
            <p className="text-base">
              Cookies do not harm your device or contain virus scripts. They simply store specific preference information to recognize your browser on subsequent visits.
            </p>
          </section>

          {/* Section 2: How We Use Cookies */}
          <section className="border-b border-[#E2E8F0] pb-6">
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-3">
              2. How We Use Cookies
            </h2>
            <p className="text-base mb-3">
              At Oculus, we use cookies for several reasons, including:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-base">
              <li>
                <strong>Essential Site Operation:</strong> Enabling core functionalities such as secure navigation and appointment booking.
              </li>
              <li>
                <strong>Performance & Analytics:</strong> Understanding how visitors interact with our website to optimize page speed, navigation, and user experience.
              </li>
              <li>
                <strong>Functional Preferences:</strong> Remembering your chosen settings (e.g., location, language, or appointment details).
              </li>
            </ul>
          </section>

          {/* Section 3: Categories of Cookies */}
          <section className="border-b border-[#E2E8F0] pb-6">
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-4">
              3. Types of Cookies We Use
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-4 bg-[#F8FAFC] rounded-xl border border-[#E2E8F0]">
                <h4 className="font-bold text-[#00204F] mb-2 flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                  Necessary Cookies
                </h4>
                <p className="text-sm">
                  Required for the site to function properly. They cannot be switched off in our systems.
                </p>
              </div>

              <div className="p-4 bg-[#F8FAFC] rounded-xl border border-[#E2E8F0]">
                <h4 className="font-bold text-[#00204F] mb-2 flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                  Analytics Cookies
                </h4>
                <p className="text-sm">
                  Help us measure audience statistics and page performance (e.g., via Google Analytics).
                </p>
              </div>

              <div className="p-4 bg-[#F8FAFC] rounded-xl border border-[#E2E8F0]">
                <h4 className="font-bold text-[#00204F] mb-2 flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
                  Functional Cookies
                </h4>
                <p className="text-sm">
                  Enable enhanced functionality, personalization, and interactive widgets (e.g. appointment scheduling).
                </p>
              </div>

              <div className="p-4 bg-[#F8FAFC] rounded-xl border border-[#E2E8F0]">
                <h4 className="font-bold text-[#00204F] mb-2 flex items-center gap-2">
                  <span className="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
                  Targeting / Advertising
                </h4>
                <p className="text-sm">
                  May be set by advertising partners to build a profile of your interests and show relevant ads on other sites.
                </p>
              </div>
            </div>
          </section>

          {/* Section 4: Active Consent Preferences */}
          <section className="border-b border-[#E2E8F0] pb-6">
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-3">
              4. Active Consent Preferences
            </h2>
            <p className="text-base mb-4">
              You can review, update, or change your active cookie consent choices (Essential, Statistics, Marketing) at any time:
            </p>

            <div className="p-6 bg-[#F8FAFC] rounded-xl border border-[#E2E8F0] text-center flex flex-col items-center justify-center gap-3">
              <p className="text-sm text-[#334D72]">
                Click below to open the WPConsent privacy preferences modal.
              </p>
              <button
                onClick={handleOpenCookieSettings}
                className="wpconsent-open-preferences px-6 py-2.5 bg-[#1718FF] hover:bg-[#000dcc] text-white font-medium text-sm rounded-lg transition-colors cursor-pointer"
              >
                Open Cookie Settings
              </button>
            </div>
          </section>

          {/* Section 5: Managing Cookies via Browser */}
          <section className="border-b border-[#E2E8F0] pb-6">
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-3">
              5. How to Control Cookies in Your Browser
            </h2>
            <p className="text-base mb-3">
              In addition to our Cookie Preference banner, most web browsers allow you to control cookies through their settings. You can block or delete cookies by adjusting your browser options:
            </p>
            <ul className="list-disc pl-6 space-y-1 text-sm md:text-base">
              <li>Google Chrome settings &gt; Privacy and security &gt; Cookies</li>
              <li>Mozilla Firefox settings &gt; Privacy &amp; Security</li>
              <li>Apple Safari preferences &gt; Privacy</li>
              <li>Microsoft Edge settings &gt; Cookies and site permissions</li>
            </ul>
          </section>

          {/* Section 6: Contact Us */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-[#00204F] mb-3">
              6. Contact Us
            </h2>
            <p className="text-base">
              If you have any questions regarding our Cookie Policy or how we handle your privacy, please feel free to reach out through our{" "}
              <Link href="/book-appointment" className="text-[#1718FF] font-semibold hover:underline">
                Contact Page
              </Link>.
            </p>
          </section>
        </div>
      </div>
    </div>
  );
}