"use client";

import { useState } from "react";
import Link from "next/link";
import { Listbox } from "@headlessui/react";
import {
  SunIcon,
  MoonIcon,
  HomeIcon,
  UserIcon,
  Cog6ToothIcon,
  BellIcon,
  MagnifyingGlassIcon,
  HeartIcon,
  StarIcon,
  DocumentIcon,
  FolderIcon,
  EnvelopeIcon,
  PhoneIcon,
  CalendarIcon,
  ClockIcon,
  MapPinIcon,
  PhotoIcon,
  VideoCameraIcon,
  MusicalNoteIcon,
  ArrowDownTrayIcon,
  ArrowUpTrayIcon,
  ShareIcon,
  PencilIcon,
  TrashIcon,
  CheckIcon,
  XMarkIcon,
  PlusIcon,
  RocketLaunchIcon,
  EllipsisHorizontalIcon,
  ArrowRightIcon,
  FireIcon,
  ShoppingCartIcon,
  ChevronUpDownIcon,
} from "@heroicons/react/24/outline";

const options = [
  { id: 1, name: 'Opção 1' },
  { id: 2, name: 'Opção 2' },
  { id: 3, name: 'Opção 3' },
];

export default function DesignSystemPage() {
  const [darkMode, setDarkMode] = useState(false);
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
    document.documentElement.classList.toggle('dark');
  };

  const iconList = [
    { name: 'HomeIcon', component: HomeIcon },
    { name: 'UserIcon', component: UserIcon },
    { name: 'Cog6ToothIcon', component: Cog6ToothIcon },
    { name: 'BellIcon', component: BellIcon },
    { name: 'MagnifyingGlassIcon', component: MagnifyingGlassIcon },
    { name: 'HeartIcon', component: HeartIcon },
    { name: 'StarIcon', component: StarIcon },
    { name: 'DocumentIcon', component: DocumentIcon },
    { name: 'FolderIcon', component: FolderIcon },
    { name: 'EnvelopeIcon', component: EnvelopeIcon },
    { name: 'PhoneIcon', component: PhoneIcon },
    { name: 'CalendarIcon', component: CalendarIcon },
    { name: 'ClockIcon', component: ClockIcon },
    { name: 'MapPinIcon', component: MapPinIcon },
    { name: 'PhotoIcon', component: PhotoIcon },
    { name: 'VideoCameraIcon', component: VideoCameraIcon },
    { name: 'MusicalNoteIcon', component: MusicalNoteIcon },
    { name: 'ArrowDownTrayIcon', component: ArrowDownTrayIcon },
    { name: 'ArrowUpTrayIcon', component: ArrowUpTrayIcon },
    { name: 'ShareIcon', component: ShareIcon },
    { name: 'PencilIcon', component: PencilIcon },
    { name: 'TrashIcon', component: TrashIcon },
    { name: 'CheckIcon', component: CheckIcon },
    { name: 'XMarkIcon', component: XMarkIcon },
  ];

  return (
    <div className={darkMode ? 'dark' : ''}>
      <div className="min-h-screen bg-white dark:bg-zinc-950 transition-colors">
        {/* Header fixo */}
        <header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border-b border-zinc-200 dark:border-zinc-800">
          <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                <span className="text-white font-bold">A</span>
              </div>
              <div>
                <h1 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Design System</h1>
                <p className="text-xs text-zinc-500 dark:text-zinc-400">Aggios Platform v1.2</p>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <button
                onClick={toggleDarkMode}
                className="px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all flex items-center gap-2 text-sm"
              >
                {darkMode ? <SunIcon className="w-4 h-4" /> : <MoonIcon className="w-4 h-4" />}
                {darkMode ? 'Light' : 'Dark'}
              </button>
              <Link href="/" className="px-3 py-1.5 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                <HomeIcon className="w-4 h-4" />
                Home
              </Link>
            </div>
          </div>
        </header>

        <main className="max-w-7xl mx-auto px-6 py-12">
          {/* Navegação rápida */}
          <nav className="mb-12 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800">
            <p className="text-xs uppercase tracking-wider text-zinc-500 mb-3">Navegação Rápida</p>
            <div className="flex flex-wrap gap-2">
              {['Cores', 'Espaçamentos', 'Tipografia', 'Bordas', 'Gradiente', 'Sombras', 'Ícones', 'Botões', 'Cards', 'Inputs', 'Badges'].map(item => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="px-3 py-1.5 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:border-transparent hover:text-white transition-all"
                  style={{
                    transition: 'all 0.2s',
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)';
                  }}
                  onMouseLeave={(e) => {
                    if (darkMode) {
                      e.currentTarget.style.background = 'rgb(39 39 42)';
                    } else {
                      e.currentTarget.style.background = 'white';
                    }
                  }}
                >
                  {item}
                </a>
              ))}
            </div>
          </nav>

          {/* CORES */}
          <section id="cores" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cores</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Paleta de cores da plataforma Aggios</p>
            </div>

            {/* Brand Gradient */}
            <div className="mb-6">
              <h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Brand Gradient</h3>
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <div className="h-32 rounded-xl" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
                <p className="text-sm font-mono text-zinc-500 mt-3">linear-gradient(135deg, #ff3a05, #ff0080)</p>
              </div>
            </div>

            {/* Gray Scale */}
            <div className="mb-6">
              <h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Gray Scale</h3>
              <div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-3">
                {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => (
                  <div key={shade} className="space-y-2">
                    <div
                      className="h-20 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
                      style={{ backgroundColor: `var(--color-gray-${shade})` }}
                    ></div>
                    <div className="text-center">
                      <p className="text-xs font-mono text-zinc-900 dark:text-white">gray-{shade}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Surface & Text Colors */}
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Surface Colors</h3>
                <div className="space-y-2">
                  {[
                    { name: 'surface-light', var: '--color-surface-light' },
                    { name: 'surface-dark', var: '--color-surface-dark' },
                    { name: 'surface-muted', var: '--color-surface-muted' },
                    { name: 'surface-card', var: '--color-surface-card' },
                  ].map(color => (
                    <div key={color.name} className="flex items-center gap-3">
                      <div
                        className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
                        style={{ backgroundColor: `var(${color.var})` }}
                      ></div>
                      <div>
                        <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
                        <p className="text-xs font-mono text-zinc-500">var({color.var})</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Text Colors</h3>
                <div className="space-y-2">
                  {[
                    { name: 'text-primary', var: '--color-text-primary' },
                    { name: 'text-secondary', var: '--color-text-secondary' },
                    { name: 'text-inverse', var: '--color-text-inverse' },
                  ].map(color => (
                    <div key={color.name} className="flex items-center gap-3">
                      <div
                        className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
                        style={{ backgroundColor: `var(${color.var})` }}
                      ></div>
                      <div>
                        <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
                        <p className="text-xs font-mono text-zinc-500">var({color.var})</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </section>

          {/* ESPAÇAMENTOS */}
          <section id="espaçamentos" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Espaçamentos</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Sistema de espaçamento compacto</p>
            </div>

            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
              <div className="space-y-4">
                {[
                  { name: 'xs', value: '0.125rem', pixels: '2px' },
                  { name: 'sm', value: '0.25rem', pixels: '4px' },
                  { name: 'md', value: '0.5rem', pixels: '8px' },
                  { name: 'lg', value: '0.75rem', pixels: '12px' },
                  { name: 'xl', value: '1rem', pixels: '16px' },
                  { name: '2xl', value: '1.5rem', pixels: '24px' },
                ].map(space => (
                  <div key={space.name} className="flex items-center gap-4">
                    <div className="w-28">
                      <p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">spacing-{space.name}</p>
                      <p className="text-xs font-mono text-zinc-500">{space.value} ({space.pixels})</p>
                    </div>
                    <div
                      className="rounded"
                      style={{
                        width: space.value,
                        height: '1.5rem',
                        background: 'linear-gradient(135deg, #ff3a05, #ff0080)'
                      }}
                    ></div>
                    <div className="flex-1 text-xs text-zinc-500 dark:text-zinc-400">
                      var(--spacing-{space.name})
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* TIPOGRAFIA */}
          <section id="tipografia" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Tipografia</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Hierarquia de texto e famílias de fontes</p>
            </div>

            <div className="space-y-4">
              {/* Headings */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Headings (Arimo)</h3>
                <div className="space-y-3">
                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
                    <h1 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white">Heading 1</h1>
                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-4xl</p>
                  </div>
                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
                    <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white">Heading 2</h2>
                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-3xl</p>
                  </div>
                  <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
                    <h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white">Heading 3</h3>
                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-2xl</p>
                  </div>
                  <div>
                    <h4 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Heading 4</h4>
                    <p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-xl</p>
                  </div>
                </div>
              </div>

              {/* Body Text */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Body Text (Inter)</h3>
                <div className="space-y-3">
                  <div>
                    <p className="text-base text-zinc-900 dark:text-white">Text Base - The quick brown fox jumps over the lazy dog</p>
                    <p className="text-xs font-mono text-zinc-500 mt-1">text-base</p>
                  </div>
                  <div>
                    <p className="text-sm text-zinc-900 dark:text-white">Text SM - The quick brown fox jumps over the lazy dog</p>
                    <p className="text-xs font-mono text-zinc-500 mt-1">text-sm</p>
                  </div>
                  <div>
                    <p className="text-xs text-zinc-900 dark:text-white">Text XS - The quick brown fox jumps over the lazy dog</p>
                    <p className="text-xs font-mono text-zinc-500 mt-1">text-xs</p>
                  </div>
                </div>
              </div>

              {/* Code Text */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Code (Fira Code)</h3>
                <div className="space-y-3">
                  <div className="p-3 bg-zinc-900 dark:bg-zinc-950 rounded-lg">
                    <code className="font-mono text-sm text-emerald-400">const message = "Hello, Aggios!";</code>
                  </div>
                  <p className="text-xs font-mono text-zinc-500">font-mono - Fira Code</p>
                </div>
              </div>
            </div>
          </section>

          {/* BORDAS */}
          <section id="bordas" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Bordas</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Border radius e estilos de borda</p>
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              {/* Border Radius */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Radius</h3>
                <div className="space-y-3">
                  {[
                    { name: 'rounded-none', class: 'rounded-none' },
                    { name: 'rounded-sm', class: 'rounded-sm' },
                    { name: 'rounded', class: 'rounded' },
                    { name: 'rounded-lg', class: 'rounded-lg' },
                    { name: 'rounded-xl', class: 'rounded-xl' },
                    { name: 'rounded-2xl', class: 'rounded-2xl' },
                    { name: 'rounded-full', class: 'rounded-full' },
                  ].map(radius => (
                    <div key={radius.name} className="flex items-center gap-3">
                      <div className={`w-20 h-12 ${radius.class}`} style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
                      <p className="text-xs font-mono text-zinc-900 dark:text-white">{radius.name}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Border Styles */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Styles</h3>
                <div className="space-y-3">
                  <div className="p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg">
                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border border-zinc-200</p>
                  </div>
                  <div className="p-3 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg">
                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border-2 border-zinc-200</p>
                  </div>
                  <div className="p-3 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg">
                    <p className="text-xs font-mono text-zinc-900 dark:text-white">border border-dashed</p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* GRADIENTE */}
          <section id="gradiente" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Gradiente</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Gradiente principal da marca</p>
            </div>

            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
              <div className="h-32 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                <p className="text-white font-semibold">Brand Gradient</p>
              </div>
              <p className="text-sm font-mono text-zinc-500 mt-4">background: linear-gradient(135deg, #ff3a05, #ff0080)</p>

              {/* Gradient Text */}
              <div className="mt-6">
                <h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Gradient Text</h3>
                <h2 className="font-heading font-bold text-4xl">
                  Texto com <span className="gradient-text">gradiente</span>
                </h2>
                <p className="text-xs font-mono text-zinc-500 mt-3">&lt;span className="gradient-text"&gt;</p>
              </div>
            </div>
          </section>

          {/* SOMBRAS */}
          <section id="sombras" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Sombras</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Sistema de elevação com sombras</p>
            </div>

            <div className="grid md:grid-cols-4 gap-4">
              {[
                { name: 'shadow-sm', class: 'shadow-sm' },
                { name: 'shadow', class: 'shadow' },
                { name: 'shadow-md', class: 'shadow-md' },
                { name: 'shadow-lg', class: 'shadow-lg' },
              ].map(shadow => (
                <div key={shadow.name} className="space-y-2">
                  <div className={`h-24 bg-white dark:bg-zinc-900 rounded-lg ${shadow.class} flex items-center justify-center border border-zinc-100 dark:border-zinc-800`}>
                    <p className="text-xs font-semibold text-zinc-900 dark:text-white">{shadow.name}</p>
                  </div>
                  <p className="text-xs font-mono text-zinc-500 text-center">{shadow.class}</p>
                </div>
              ))}
            </div>
          </section>

          {/* ÍCONES */}
          <section id="ícones" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Ícones</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Heroicons - biblioteca completa (outline)</p>
            </div>

            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
              <div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4">
                {iconList.map(({ name, component: Icon }) => (
                  <div key={name} className="flex flex-col items-center gap-2 p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors">
                    <Icon className="w-6 h-6 text-zinc-900 dark:text-white" />
                    <p className="text-xs font-mono text-zinc-500 text-center leading-tight">{name}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* BOTÕES */}
          <section id="botões" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Botões</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Variações de botões com Headless UI</p>
            </div>

            <div className="space-y-6">
              {/* Primary Buttons */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Primary Buttons</h3>
                <div className="flex flex-wrap gap-3">
                  <button className="px-4 py-2 text-white font-medium rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    <PlusIcon className="w-4 h-4" />
                    Primary
                  </button>
                  <button className="px-3 py-1.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-xs" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    Small
                  </button>
                  <button className="px-5 py-2.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    Medium
                  </button>
                </div>
              </div>

              {/* Secondary Buttons */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Secondary Buttons</h3>
                <div className="flex flex-wrap gap-3">
                  <button className="px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:border-transparent hover:text-white transition-all text-sm"
                    onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                    Secondary
                  </button>
                  <button className="px-4 py-2 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
                    Outline
                  </button>
                  <button className="px-4 py-2 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
                    Ghost
                  </button>
                </div>
              </div>

              {/* Icon Buttons */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Icon Buttons</h3>
                <div className="flex flex-wrap gap-3">
                  <button className="w-10 h-10 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    <HeartIcon className="w-5 h-5" />
                  </button>
                  <button className="w-10 h-10 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:border-transparent hover:text-white transition-all flex items-center justify-center"
                    onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                    <ShareIcon className="w-5 h-5" />
                  </button>
                  <button className="w-8 h-8 rounded-full text-white flex items-center justify-center hover:opacity-90 transition-opacity" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    <PlusIcon className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </section>

          {/* CARDS */}
          <section id="cards" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cards</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Diferentes estilos de cards</p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {/* Basic Card */}
              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Basic Card</h3>
                <p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card simples com borda e padding</p>
                <button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
                </button>
              </div>

              {/* Elevated Card */}
              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-md hover:shadow-lg transition-shadow">
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Elevated Card</h3>
                <p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card com sombra e hover effect</p>
                <button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
                </button>
              </div>

              {/* Gradient Card */}
              <div className="rounded-xl p-4 text-white shadow-md" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                <h3 className="font-semibold text-base mb-2">Gradient Card</h3>
                <p className="text-white/90 mb-3 text-sm">Card com fundo gradiente</p>
                <button className="text-white text-sm font-semibold hover:underline flex items-center gap-1">
                  Saiba mais <ArrowRightIcon className="w-3 h-3" />
                </button>
              </div>

              {/* Icon Card */}
              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:border-transparent hover:shadow-md transition-all">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                  <StarIcon className="w-5 h-5 text-white" />
                </div>
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Icon Card</h3>
                <p className="text-zinc-600 dark:text-zinc-400 text-sm">Card com ícone em destaque</p>
              </div>

              {/* Stat Card */}
              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
                <p className="text-xs uppercase tracking-wide text-zinc-500 mb-1">Total Revenue</p>
                <p className="text-2xl font-bold text-zinc-900 dark:text-white mb-1">R$ 128K</p>
                <p className="text-xs text-emerald-500">+18% este mês</p>
              </div>

              {/* Interactive Card */}
              <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 cursor-pointer hover:scale-105 transition-all"
                onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff3a05'}
                onMouseLeave={(e) => {
                  if (darkMode) {
                    e.currentTarget.style.borderColor = 'rgb(39 39 42)';
                  } else {
                    e.currentTarget.style.borderColor = 'rgb(228 228 231)';
                  }
                }}>
                <div className="flex items-center justify-between mb-3">
                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                    <BellIcon className="w-4 h-4 text-white" />
                  </div>
                  <span className="px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">3</span>
                </div>
                <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-1">Interactive Card</h3>
                <p className="text-zinc-600 dark:text-zinc-400 text-sm">Clique para interagir</p>
              </div>
            </div>
          </section>

          {/* INPUTS */}
          <section id="inputs" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Inputs</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Campos de formulário com Headless UI</p>
            </div>

            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
              <div className="space-y-4 max-w-2xl">
                {/* Text Input */}
                <div>
                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
                    Text Input
                  </label>
                  <input
                    type="text"
                    placeholder="Digite algo..."
                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
                    style={{
                      '--tw-ring-color': '#ff3a05',
                    } as React.CSSProperties}
                  />
                </div>

                {/* Email Input */}
                <div>
                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
                    Email Input
                  </label>
                  <input
                    type="email"
                    placeholder="seu@email.com"
                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
                    style={{
                      '--tw-ring-color': '#ff3a05',
                    } as React.CSSProperties}
                  />
                </div>

                {/* Input with Icon */}
                <div>
                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
                    Input with Icon
                  </label>
                  <div className="relative">
                    <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
                    <input
                      type="text"
                      placeholder="Buscar..."
                      className="w-full pl-10 pr-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
                      style={{
                        '--tw-ring-color': '#ff3a05',
                      } as React.CSSProperties}
                    />
                  </div>
                </div>

                {/* Textarea */}
                <div>
                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
                    Textarea
                  </label>
                  <textarea
                    rows={3}
                    placeholder="Digite sua mensagem..."
                    className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all resize-none"
                    style={{
                      '--tw-ring-color': '#ff3a05',
                    } as React.CSSProperties}
                  ></textarea>
                </div>

                {/* Select with Headless UI */}
                <div>
                  <label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
                    Select (Headless UI)
                  </label>
                  <Listbox value={selectedOption} onChange={setSelectedOption}>
                    <div className="relative">
                      <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-2 pl-3 pr-10 text-left text-sm focus:outline-none focus:ring-2 focus:border-transparent transition-all"
                        style={{
                          '--tw-ring-color': '#ff3a05',
                        } as React.CSSProperties}>
                        <span className="block truncate text-zinc-900 dark:text-white">{selectedOption.name}</span>
                        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                          <ChevronUpDownIcon
                            className="h-4 w-4 text-zinc-400"
                            aria-hidden="true"
                          />
                        </span>
                      </Listbox.Button>
                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-1 text-sm shadow-lg focus:outline-none">
                        {options.map((option) => (
                          <Listbox.Option
                            key={option.id}
                            value={option}
                          >
                            {({ selected, active }) => (
                              <div
                                className={`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
                                  active ? 'text-white' : 'text-zinc-900 dark:text-white'
                                }`}
                                style={{
                                  background: active ? 'linear-gradient(135deg, #ff3a05, #ff0080)' : 'transparent'
                                }}
                              >
                                <span
                                  className={`block truncate ${
                                    selected ? 'font-medium' : 'font-normal'
                                  }`}
                                >
                                  {option.name}
                                </span>
                                {selected ? (
                                  <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                                    <CheckIcon className="h-4 w-4" aria-hidden="true" />
                                  </span>
                                ) : null}
                              </div>
                            )}
                          </Listbox.Option>
                        ))}
                      </Listbox.Options>
                    </div>
                  </Listbox>
                </div>

                {/* Checkbox */}
                <div className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    id="check1"
                    className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 rounded focus:ring-2"
                    style={{
                      accentColor: '#ff3a05',
                      '--tw-ring-color': '#ff3a05',
                    } as React.CSSProperties}
                  />
                  <label htmlFor="check1" className="text-sm text-zinc-900 dark:text-white">
                    Checkbox Label
                  </label>
                </div>

                {/* Radio */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <input
                      type="radio"
                      id="radio1"
                      name="radio"
                      className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
                      style={{
                        accentColor: '#ff3a05',
                        '--tw-ring-color': '#ff3a05',
                      } as React.CSSProperties}
                    />
                    <label htmlFor="radio1" className="text-sm text-zinc-900 dark:text-white">
                      Radio Option 1
                    </label>
                  </div>
                  <div className="flex items-center gap-2">
                    <input
                      type="radio"
                      id="radio2"
                      name="radio"
                      className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
                      style={{
                        accentColor: '#ff3a05',
                        '--tw-ring-color': '#ff0080',
                      } as React.CSSProperties}
                    />
                    <label htmlFor="radio2" className="text-sm text-zinc-900 dark:text-white">
                      Radio Option 2
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* BADGES */}
          <section id="badges" className="mb-16 scroll-mt-24">
            <div className="mb-6">
              <h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Badges</h2>
              <p className="text-zinc-600 dark:text-zinc-400">Tags, badges e status indicators</p>
            </div>

            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
              <div className="space-y-4">
                {/* Status Badges */}
                <div>
                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Status Badges</h3>
                  <div className="flex flex-wrap gap-2">
                    <span className="px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs font-semibold">
                      Success
                    </span>
                    <span className="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
                      Info
                    </span>
                    <span className="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-semibold">
                      Warning
                    </span>
                    <span className="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-semibold">
                      Error
                    </span>
                  </div>
                </div>

                {/* Pill Badges */}
                <div>
                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Pill Badges</h3>
                  <div className="flex flex-wrap gap-2">
                    <span className="px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-md flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                      <RocketLaunchIcon className="w-3 h-3" />
                      Premium
                    </span>
                    <span className="px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
                      <StarIcon className="w-3 h-3" />
                      New
                    </span>
                    <span className="px-3 py-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
                      <FireIcon className="w-3 h-3" />
                      Popular
                    </span>
                  </div>
                </div>

                {/* Count Badges */}
                <div>
                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Count Badges</h3>
                  <div className="flex flex-wrap gap-3 items-center">
                    <div className="relative">
                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
                        <BellIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
                      </button>
                      <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
                        3
                      </span>
                    </div>
                    <div className="relative">
                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
                        <EnvelopeIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
                      </button>
                      <span className="absolute -top-1 -right-1 w-4 h-4 text-white text-xs font-bold rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
                        9
                      </span>
                    </div>
                    <div className="relative">
                      <button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
                        <ShoppingCartIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
                      </button>
                      <span className="absolute -top-1.5 -right-1.5 px-1.5 py-0.5 bg-emerald-500 text-white text-xs font-bold rounded-full">
                        12
                      </span>
                    </div>
                  </div>
                </div>

                {/* Dot Indicators */}
                <div>
                  <h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Dot Indicators</h3>
                  <div className="flex flex-wrap gap-3">
                    <div className="flex items-center gap-1.5">
                      <span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Online</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Away</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="w-2 h-2 bg-red-500 rounded-full"></span>
                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Busy</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="w-2 h-2 bg-zinc-400 rounded-full"></span>
                      <span className="text-xs text-zinc-700 dark:text-zinc-300">Offline</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Footer */}
          <div className="text-center py-8 border-t border-zinc-200 dark:border-zinc-800">
            <p className="text-zinc-600 dark:text-zinc-400 text-sm">
              Design System criado para <span className="font-bold gradient-text">Aggios Platform</span>
            </p>
            <p className="text-xs text-zinc-500 mt-2">
              Versão 1.2 • 2025
            </p>
          </div>
        </main>
      </div>
    </div>
  );
}