import { cookieSections, privacySections } from "@/data/privacyData";
import { ChevronRight, Cookie, Shield } from "lucide-react";
import { useState } from "react";

export const PrivacyPolicy: React.FC = () => {
  const [activeSection, setActiveSection] = useState("info-collect");

  const allSections = [...privacySections, ...cookieSections];

  const handleScroll = (id: string) => {
    setActiveSection(id);
    document
      .getElementById(id)
      ?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <section className="mx-auto w-full container px-4 sm:px-6 lg:px-8 py-24">
      {/* HEADER */}
      <header className="max-w-3xl mb-12">
        <div className="flex items-center gap-4 mb-4">
          <div className="p-3 rounded-xl bg-primary/30">
            <Shield className="w-6 h-6 " aria-hidden="true" />
          </div>
          <h1 className="text-3xl sm:text-4xl font-bold">Privacy Policy</h1>
        </div>

        <p className="text-sm text-muted-foreground mb-3">
          Last Updated: April 19, 2026
        </p>

        <p className="text-base sm:text-lg text-muted-foreground leading-relaxed">
          This page explains what data we collect, why we collect it, and how we
          handle it.
        </p>
      </header>

      <div className="flex flex-col lg:flex-row gap-8">
        {/* SIDEBAR */}
        <aside className="lg:w-1/4">
          <nav
            className="bg-accent/10 border border-primary/10 rounded-2xl p-4 space-y-2 lg:sticky lg:top-24"
            aria-label="Privacy policy sections"
          >
            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2 px-2">
              Contents
            </p>

            {allSections.map((section) => (
              <button
                key={section.id}
                onClick={() => handleScroll(section.id)}
                aria-current={activeSection === section.id ? "true" : undefined}
                className={`w-full text-left flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent-neon))] ${
                  activeSection === section.id
                    ? "bg-[hsl(var(--accent-neon)/0.15)] text-primary"
                    : "text-muted-foreground hover:bg-[hsl(var(--accent-neon)/0.08)]"
                }`}
              >
                <span className="truncate">{section.title}</span>
                <ChevronRight
                  className="w-4 h-4 opacity-60"
                  aria-hidden="true"
                />
              </button>
            ))}
          </nav>
        </aside>

        {/* MAIN */}
        <main className="lg:w-3/4 space-y-8">
          {/* PRIVACY */}
          {privacySections.map((section) => (
            <section
              key={section.id}
              id={section.id}
              className="bg-accent/10 border border-primary/10 rounded-2xl p-6 sm:p-8 transition hover:neon-glow"
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="p-2 rounded-lg bg-[hsl(var(--accent-neon)/0.2)]">
                  {section.icon}
                </div>
                <h2 className="text-lg sm:text-xl font-semibold">
                  {section.title}
                </h2>
              </div>

              {Array.isArray(section.content) ? (
                <ul className="space-y-2 ml-5">
                  {section.content.map((item, idx) => (
                    <li key={idx} className="flex gap-2 text-muted-foreground">
                      <span className="mt-2 w-1.5 h-1.5 bg-secondary rounded-full" />
                      {item}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="ml-5 text-muted-foreground leading-relaxed">
                  {section.content}
                </p>
              )}
            </section>
          ))}

          {/* COOKIES */}
          <section className="space-y-6">
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-xl bg-primary/10">
                <Cookie className="w-6 h-6 " />
              </div>
              <h2 className="text-2xl sm:text-3xl font-bold ">
                Cookies Policy
              </h2>
            </div>

            {cookieSections.map((section) => (
              <section
                key={section.id}
                id={section.id}
                className="bg-accent/10 border border-primary/10 rounded-2xl p-6 sm:p-8 transition hover:neon-glow"
              >
                <div className="flex items-center gap-2 mb-3">
                  {section.icon}
                  <h3 className="text-lg font-semibold">{section.title}</h3>
                </div>

                {Array.isArray(section.content) ? (
                  <ul className="space-y-2 ml-5">
                    {section.content.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex gap-2 text-muted-foreground"
                      >
                        <span className="mt-2 w-1.5 h-1.5 bg-[hsl(var(--accent-neon))] rounded-full" />
                        {item}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="ml-5 text-muted-foreground">
                    {section.content}
                  </p>
                )}
              </section>
            ))}
          </section>

          {/* FOOTER */}
          <footer className="bg-accent/10 border border-primary/10 rounded-2xl p-5 text-sm text-muted-foreground">
            You can disable cookies in your browser settings. Continued use of
            this site means you accept this policy.
          </footer>
        </main>
      </div>
    </section>
  );
};
