import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
  Sparkles,
  Palette,
  Type,
  Shapes,
  MousePointerClick,
  FileEdit,
  LayoutGrid,
  SlidersHorizontal,
  Compass,
  Home,
  Mail,
  Phone,
  User,
  Users,
  Bell,
  TrendingUp,
  Rocket,
  Search,
  ChevronsUpDown,
} from 'lucide-react';

import { useBrandColors } from '../../../contexts/BrandColorsContext';
import { useOptionalLayout } from '../../../contexts/LayoutContext';
import { cn } from '../../shared/utils';

import { Header } from '../../layout/header';
import { PageHeader } from '../../ui/page-header';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '../../ui/card';
import { Separator } from '../../ui/separator';
import { Badge } from '../../ui/badge';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { Label } from '../../ui/label';
import { Textarea } from '../../ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
import { Alert, AlertTitle, AlertDescription } from '../../ui/alert';
import { Progress } from '../../ui/progress';
import { Skeleton } from '../../ui/skeleton';
import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction } from '../../ui/empty';
import { Avatar, AvatarImage, AvatarFallback } from '../../ui/avatar';
import { StatsCard } from '../../ui/stats-card';
import {
  Timeline,
  TimelineItem,
  TimelineDot,
  TimelineContent,
  TimelineHeading,
  TimelineTime,
  TimelineDescription,
} from '../../ui/timeline';
import { Checkbox } from '../../ui/checkbox';
import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
import { Switch } from '../../ui/switch';
import { Slider } from '../../ui/slider';
import { ToggleGroup, ToggleGroupItem } from '../../ui/toggle-group';
import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/input-otp';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '../../ui/dialog';
import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../ui/tooltip';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from '../../ui/dropdown-menu';
import { HoverCard, HoverCardTrigger, HoverCardContent } from '../../ui/hover-card';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../ui/accordion';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../ui/collapsible';
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
} from '../../ui/pagination';

import {
  FeatureCard,
  QuickActionCard,
  ActivityCard,
  NotificationCard,
  ProfileCard,
  ProjectCard,
  type ActivityItem,
  type NotificationItem,
} from '../../blocks/card-patterns';

import { ThemeToggle } from '../../brand/theme-toggle';
import { LanguageSelector } from '../../brand/language-selector';
import { Isotipo, Mosaico, Cuadrados } from '../../brand/isotype';
import { XerticaLogo } from '../../brand/xertica-logo';
import { XerticaXLogo } from '../../brand/xertica-xlogo';

export interface ShowcaseContentProps {
  /**
   * Brand theme id to switch to on mount (e.g. `"xertica"`). Left undefined
   * by default so embedding this content inside a host app never hijacks its
   * active theme — only the standalone `ShowcasePage` opts into this.
   */
  defaultThemeId?: string;
}

const TYPOGRAPHY_SCALE = [
  {
    key: 'hero',
    family: 'heading',
    weight: 'Heavy 900',
    size: '60px',
    lineHeight: '105%',
    tracking: '-2px',
  },
  {
    key: 'h1',
    family: 'heading',
    weight: 'Bold 700',
    size: '44px',
    lineHeight: '120%',
    tracking: '-1.5px',
  },
  {
    key: 'h2',
    family: 'heading',
    weight: 'Bold 700',
    size: '32px',
    lineHeight: '125%',
    tracking: '-1px',
  },
  {
    key: 'h3',
    family: 'heading',
    weight: 'Bold 700',
    size: '24px',
    lineHeight: '130%',
    tracking: '-0.5px',
  },
  {
    key: 'body',
    family: 'body',
    weight: 'Regular 400',
    size: '18px',
    lineHeight: '165%',
    tracking: 'normal',
  },
  {
    key: 'eyebrow',
    family: 'body',
    weight: 'Medium 500',
    size: '13px',
    lineHeight: '150%',
    tracking: '1.5px',
  },
  {
    key: 'nav',
    family: 'body',
    weight: 'Regular/Medium',
    size: '15–16px',
    lineHeight: '150%',
    tracking: 'normal',
  },
  {
    key: 'button',
    family: 'body',
    weight: 'Semibold/Bold 600–700',
    size: '15–16px',
    lineHeight: '120%',
    tracking: '-0.2px',
  },
] as const;

const TYPOGRAPHY_FONT_SIZE: Record<(typeof TYPOGRAPHY_SCALE)[number]['key'], string> = {
  hero: '60px',
  h1: '44px',
  h2: '32px',
  h3: '24px',
  body: '18px',
  eyebrow: '13px',
  nav: '16px',
  button: '16px',
};

const ACCENT_PALETTE = [
  { name: 'Negro Xertica', hex: '#1E1E1E' },
  { name: 'Azul', hex: '#3D63AC' },
  { name: 'Celeste', hex: '#1899AF' },
  { name: 'Magenta', hex: '#C45BAA' },
  { name: 'Rojo Coral', hex: '#DE5B48' },
  { name: 'Rosado', hex: '#E2B8D2' },
  { name: 'Amarillo', hex: '#FAF338' },
  { name: 'Naranja', hex: '#E37744' },
  { name: 'Verde', hex: '#2E8B5A' },
  { name: 'Verde azulado', hex: '#39C6AE' },
];

const SURFACE_PALETTE = [
  { name: 'Marfil', hex: '#FFFEF8' },
  { name: 'Crema / Papel', hex: '#F2EDD8' },
  { name: 'Fondo Slides', hex: '#F5F0E8' },
  { name: 'Off-white cálido', hex: '#E9E6DC' },
];

const APPROVED_COMBINATIONS = [
  ['#1899AF', '#DE5B48'],
  ['#DE5B48', '#3D63AC', '#E2B8D2'],
  ['#DE5B48', '#2E8B5A', '#E2B8D2'],
  ['#FAF338', '#DE5B48'],
  ['#C45BAA', '#1899AF'],
];

const INTERSECTIONS = [
  { a: '#1899AF', b: '#C45BAA', result: '#5A4A96', obligatory: true },
  { a: '#2E8B5A', b: '#DE5B48', result: '#2A2415', obligatory: true },
  { a: '#1899AF', b: '#FAF338', result: '#2E9A3A', obligatory: false },
];

const SAMPLE_ACTIVITY_ITEMS: ActivityItem[] = [
  {
    id: 'a1',
    user: { name: 'Alex Rivera', initials: 'AR' },
    action: 'updated',
    target: 'Showcase Page',
    time: '2m',
    type: 'update',
  },
  {
    id: 'a2',
    user: { name: 'Mia Chen', initials: 'MC' },
    action: 'deployed',
    target: 'v3.1.0',
    time: '1h',
    type: 'deploy',
  },
  {
    id: 'a3',
    user: { name: 'Diego Torres', initials: 'DT' },
    action: 'commented on',
    target: 'Brand tokens',
    time: '3h',
    type: 'comment',
  },
];

const SAMPLE_NOTIFICATION_ITEMS: NotificationItem[] = [
  {
    id: 'n1',
    title: 'New theme available',
    message: 'The xertica brand theme is ready to use.',
    time: '5m',
    read: false,
    type: 'success',
  },
  {
    id: 'n2',
    title: 'Token update',
    message: '--card-hover-shadow now resolves to none.',
    time: '1h',
    read: false,
    type: 'info',
  },
  {
    id: 'n3',
    title: 'Review requested',
    message: 'Please review the button press-shift spec.',
    time: '1d',
    read: true,
    type: 'default',
  },
];

function SectionHeading({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description?: string;
}) {
  return (
    <div className="flex items-start gap-3">
      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius)] bg-primary/10 text-primary">
        {icon}
      </div>
      <div className="space-y-1">
        <h2 className="text-xl font-semibold tracking-tight text-foreground">{title}</h2>
        {description && <p className="text-sm text-muted-foreground max-w-2xl">{description}</p>}
      </div>
    </div>
  );
}

function StaticSwatch({ name, hex }: { name: string; hex: string }) {
  return (
    <div className="flex items-center gap-3 rounded-[var(--radius)] border border-border p-3">
      <span
        className="h-10 w-10 shrink-0 rounded-[var(--radius)] border border-black/10"
        style={{ backgroundColor: hex }}
      />
      <div className="min-w-0">
        <p className="truncate text-sm font-medium text-foreground">{name}</p>
        <p className="font-mono text-xs text-muted-foreground">{hex}</p>
      </div>
    </div>
  );
}

export function ShowcaseContent({ defaultThemeId }: ShowcaseContentProps) {
  const { t } = useTranslation();
  const { currentTheme, themes, setTheme } = useBrandColors();
  const layout = useOptionalLayout();
  const sidebarExpanded = layout?.sidebarExpanded ?? false;
  const sidebarWidth = layout?.sidebarWidth ?? 280;

  useEffect(() => {
    if (defaultThemeId) {
      setTheme(defaultThemeId);
    }
    // Only ever applied once, on mount — never re-forced if the visitor picks a different theme.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [progress, setProgress] = useState(64);
  const [otpValue, setOtpValue] = useState('');
  const [radioValue, setRadioValue] = useState('starter');
  const [checked, setChecked] = useState(true);
  const [switchOn, setSwitchOn] = useState(true);
  const [paginationPage, setPaginationPage] = useState(2);

  const orderedThemes = [
    ...themes.filter(theme => theme.id === 'xertica'),
    ...themes.filter(theme => theme.id === 'xertica-original'),
    ...themes.filter(theme => theme.id !== 'xertica' && theme.id !== 'xertica-original'),
  ];

  return (
    <div
      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
      style={{ paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px' }}
    >
      <Header
        showThemeToggle
        showLanguageSelector
        breadcrumbs={[
          { label: t('nav.designSystem'), href: '/home', icon: <Home className="w-4 h-4" /> },
          { label: t('showcase.breadcrumb') },
        ]}
        renderLink={(href, props) => <Link to={href} {...props} />}
      />
      <main className="flex-1 overflow-hidden bg-muted">
        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
          <div className="p-5 sm:p-4 md:p-6">
            <div className="mx-auto max-w-6xl space-y-10">
              <PageHeader title={t('showcase.title')} subtitle={t('showcase.subtitle')} />

              {/* 0. Theme switcher */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Sparkles className="size-4 text-primary" />
                    {t('showcase.themeSwitcher.label')}
                  </CardTitle>
                  <CardDescription>{t('showcase.themeSwitcher.hint')}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {orderedThemes.map(theme => (
                      <button
                        key={theme.id}
                        type="button"
                        onClick={() => setTheme(theme.id)}
                        className={cn(
                          'flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors',
                          currentTheme === theme.id
                            ? 'border-primary bg-primary/10 text-foreground'
                            : 'border-border text-muted-foreground hover:text-foreground'
                        )}
                      >
                        <span className="flex -space-x-1">
                          <span
                            className="h-3 w-3 rounded-full border border-background"
                            style={{ backgroundColor: theme.preview.primary }}
                          />
                          <span
                            className="h-3 w-3 rounded-full border border-background"
                            style={{ backgroundColor: theme.preview.secondary }}
                          />
                          <span
                            className="h-3 w-3 rounded-full border border-background"
                            style={{ backgroundColor: theme.preview.accent }}
                          />
                        </span>
                        {theme.name}
                        {theme.id === 'xertica' && (
                          <Badge variant="secondary" className="ml-1">
                            {t('showcase.themeSwitcher.recommended')}
                          </Badge>
                        )}
                      </button>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Separator />

              {/* 1. Typography */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<Type className="size-5" />}
                  title={t('showcase.sections.typography')}
                  description={t('showcase.typography.description')}
                />
                <Card>
                  <CardContent className="divide-y divide-border pt-6">
                    {TYPOGRAPHY_SCALE.map(row => (
                      <div
                        key={row.key}
                        className="flex flex-col gap-2 py-4 first:pt-0 last:pb-0 md:flex-row md:items-baseline md:justify-between"
                      >
                        <p
                          className="text-foreground"
                          style={{
                            fontFamily:
                              row.family === 'heading' ? 'var(--font-heading)' : 'var(--font-body)',
                            fontSize: TYPOGRAPHY_FONT_SIZE[row.key],
                            lineHeight: row.lineHeight,
                            letterSpacing: row.tracking === 'normal' ? 'normal' : row.tracking,
                            fontWeight: row.key === 'body' ? 400 : 700,
                          }}
                        >
                          {t(`showcase.typography.samples.${row.key}`)}
                        </p>
                        <p className="shrink-0 font-mono text-xs text-muted-foreground">
                          {t(`showcase.typography.labels.${row.key}`)} — {row.weight} · {row.size} ·{' '}
                          {row.lineHeight} lh · {row.tracking} tracking
                        </p>
                      </div>
                    ))}
                  </CardContent>
                  <CardFooter>
                    <p className="text-xs text-muted-foreground">
                      {t('showcase.typography.footnote')}
                    </p>
                  </CardFooter>
                </Card>
              </section>

              <Separator />

              {/* 2. Colors & surfaces */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<Palette className="size-5" />}
                  title={t('showcase.sections.colors')}
                  description={t('showcase.colors.description')}
                />
                <Badge variant="outline" className="w-fit">
                  {t('showcase.colors.staticBadge')}
                </Badge>

                <Card>
                  <CardHeader>
                    <CardTitle>{t('showcase.colors.accentPalette')}</CardTitle>
                  </CardHeader>
                  <CardContent className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
                    {ACCENT_PALETTE.map(color => (
                      <StaticSwatch key={color.hex} name={color.name} hex={color.hex} />
                    ))}
                  </CardContent>
                </Card>

                <div className="grid gap-4 md:grid-cols-2">
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('showcase.colors.surfaces')}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      {SURFACE_PALETTE.map(surface => (
                        <StaticSwatch key={surface.hex} name={surface.name} hex={surface.hex} />
                      ))}
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>{t('showcase.colors.intersections')}</CardTitle>
                      <CardDescription>{t('showcase.colors.intersectionsHint')}</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      {INTERSECTIONS.map(pair => (
                        <div
                          key={pair.result}
                          className="flex items-center gap-2 rounded-[var(--radius)] border border-border p-3"
                        >
                          <span
                            className="h-6 w-6 rounded-full border border-black/10"
                            style={{ backgroundColor: pair.a }}
                          />
                          <span className="text-muted-foreground">+</span>
                          <span
                            className="h-6 w-6 rounded-full border border-black/10"
                            style={{ backgroundColor: pair.b }}
                          />
                          <span className="text-muted-foreground">=</span>
                          <span
                            className="h-6 w-6 rounded-full border border-black/10"
                            style={{ backgroundColor: pair.result }}
                          />
                          <span className="font-mono text-xs text-muted-foreground">
                            {pair.result}
                          </span>
                          {pair.obligatory && (
                            <Badge variant="secondary" className="ml-auto">
                              {t('showcase.colors.obligatory')}
                            </Badge>
                          )}
                        </div>
                      ))}
                    </CardContent>
                  </Card>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>{t('showcase.colors.combinations')}</CardTitle>
                  </CardHeader>
                  <CardContent className="flex flex-wrap gap-4">
                    {APPROVED_COMBINATIONS.map((combo, index) => (
                      <div key={index} className="flex -space-x-2">
                        {combo.map((hex, hexIndex) => (
                          <span
                            key={hexIndex}
                            className="h-9 w-9 rounded-full border-2 border-background"
                            style={{ backgroundColor: hex }}
                          />
                        ))}
                      </div>
                    ))}
                  </CardContent>
                </Card>
              </section>

              <Separator />

              {/* 3. Isotypes & logo */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<Shapes className="size-5" />}
                  title={t('showcase.sections.brandMarks')}
                  description={t('showcase.brandMarks.description')}
                />

                <div
                  className="grid grid-cols-2 gap-4 rounded-[var(--radius)] p-6 sm:grid-cols-3 lg:grid-cols-5"
                  style={{ backgroundColor: '#F2EDD8' }}
                >
                  <div className="space-y-2">
                    <Mosaico className="w-full" aria-label="Mosaico" />
                    <p className="text-center text-xs font-medium" style={{ color: '#1E1E1E' }}>
                      Mosaico
                    </p>
                  </div>
                  {(['blue-magenta', 'blue-yellow', 'green-red'] as const).map(variant => (
                    <div key={`cuadrados-${variant}`} className="space-y-2">
                      <Cuadrados
                        variant={variant}
                        className="w-full"
                        aria-label={`Cuadrados ${variant}`}
                      />
                      <p className="text-center text-xs font-medium" style={{ color: '#1E1E1E' }}>
                        Cuadrados · {variant}
                      </p>
                    </div>
                  ))}
                  {(['magenta-blue', 'blue-red', 'green-red'] as const).map(variant => (
                    <div key={`isotipo-${variant}`} className="space-y-2">
                      <Isotipo
                        variant={variant}
                        className="w-full"
                        aria-label={`Isotipo ${variant}`}
                      />
                      <p className="text-center text-xs font-medium" style={{ color: '#1E1E1E' }}>
                        Isotipo · {variant}
                      </p>
                    </div>
                  ))}
                </div>

                <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                  <Card>
                    <CardContent className="flex flex-col items-center gap-3 pt-6">
                      <XerticaLogo variant="default" className="h-8 w-auto" />
                      <p className="text-xs text-muted-foreground">XerticaLogo · default</p>
                    </CardContent>
                  </Card>
                  <Card style={{ backgroundColor: '#1E1E1E' }}>
                    <CardContent className="flex flex-col items-center gap-3 pt-6">
                      <XerticaLogo variant="white" className="h-8 w-auto" />
                      <p className="text-xs text-white/70">XerticaLogo · white</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="flex flex-col items-center gap-3 pt-6">
                      <XerticaXLogo variant="default" className="h-10 w-10" />
                      <p className="text-xs text-muted-foreground">XerticaXLogo</p>
                    </CardContent>
                  </Card>
                </div>

                <Alert variant="info">
                  <AlertTitle>{t('showcase.brandMarks.neverTitle')}</AlertTitle>
                  <AlertDescription>
                    <ul className="mt-1 list-disc space-y-1 pl-4">
                      <li>{t('showcase.brandMarks.never.gradients')}</li>
                      <li>{t('showcase.brandMarks.never.metallic')}</li>
                      <li>{t('showcase.brandMarks.never.decorativeFonts')}</li>
                      <li>{t('showcase.brandMarks.never.textOverShapes')}</li>
                      <li>{t('showcase.brandMarks.never.floatingShapes')}</li>
                      <li>{t('showcase.brandMarks.never.logoAbuse')}</li>
                    </ul>
                  </AlertDescription>
                </Alert>
              </section>

              <Separator />

              {/* 4. Buttons */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<MousePointerClick className="size-5" />}
                  title={t('showcase.sections.buttons')}
                  description={t('showcase.buttons.description')}
                />
                <Card>
                  <CardContent className="space-y-6 pt-6">
                    <div className="flex flex-wrap items-center gap-3">
                      <Button>{t('showcase.buttons.primary')}</Button>
                      <Button variant="secondary">{t('showcase.buttons.secondary')}</Button>
                      <Button variant="outline">{t('showcase.buttons.outline')}</Button>
                      <Button variant="ghost">{t('showcase.buttons.ghost')}</Button>
                      <Button variant="link">{t('showcase.buttons.link')}</Button>
                      <Button variant="destructive">{t('showcase.buttons.destructive')}</Button>
                    </div>
                    <div className="flex flex-wrap items-center gap-3">
                      <Button size="sm">{t('showcase.buttons.small')}</Button>
                      <Button size="default">{t('showcase.buttons.default')}</Button>
                      <Button size="lg">{t('showcase.buttons.large')}</Button>
                      <Button size="icon" aria-label={t('showcase.buttons.iconOnly')}>
                        <Rocket className="size-4" />
                      </Button>
                      <Button disabled>{t('showcase.buttons.disabled')}</Button>
                    </div>
                    <div className="flex flex-wrap items-center gap-3">
                      <ToggleGroup type="single" defaultValue="pill">
                        <ToggleGroupItem value="pill">
                          {t('showcase.buttons.segmentedA')}
                        </ToggleGroupItem>
                        <ToggleGroupItem value="outline">
                          {t('showcase.buttons.segmentedB')}
                        </ToggleGroupItem>
                        <ToggleGroupItem value="ghost">
                          {t('showcase.buttons.segmentedC')}
                        </ToggleGroupItem>
                      </ToggleGroup>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <p className="text-xs text-muted-foreground">
                      {t('showcase.buttons.footnote')}
                    </p>
                  </CardFooter>
                </Card>
              </section>

              <Separator />

              {/* 5. Forms */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<FileEdit className="size-5" />}
                  title={t('showcase.sections.forms')}
                  description={t('showcase.forms.description')}
                />
                <Card>
                  <CardContent className="pt-6">
                    <form
                      className="grid gap-5 md:grid-cols-2"
                      onSubmit={event => event.preventDefault()}
                    >
                      <div className="space-y-2">
                        <Label htmlFor="showcase-name" required>
                          {t('showcase.forms.name')}
                        </Label>
                        <Input
                          id="showcase-name"
                          placeholder={t('showcase.forms.namePlaceholder')}
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="showcase-email" required>
                          {t('showcase.forms.email')}
                        </Label>
                        <div className="relative">
                          <Mail className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                          <Input
                            id="showcase-email"
                            type="email"
                            className="pl-9"
                            placeholder={t('showcase.forms.emailPlaceholder')}
                            required
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="showcase-phone">{t('showcase.forms.phone')}</Label>
                        <div className="relative">
                          <Phone className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                          <Input
                            id="showcase-phone"
                            type="tel"
                            className="pl-9"
                            placeholder={t('showcase.forms.phonePlaceholder')}
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="showcase-role">{t('showcase.forms.plan')}</Label>
                        <Select defaultValue="pro">
                          <SelectTrigger id="showcase-role">
                            <SelectValue placeholder={t('showcase.forms.plan')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="starter">
                              {t('showcase.forms.planStarter')}
                            </SelectItem>
                            <SelectItem value="pro">{t('showcase.forms.planPro')}</SelectItem>
                            <SelectItem value="enterprise">
                              {t('showcase.forms.planEnterprise')}
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2 md:col-span-2">
                        <Label htmlFor="showcase-message">{t('showcase.forms.message')}</Label>
                        <Textarea
                          id="showcase-message"
                          placeholder={t('showcase.forms.messagePlaceholder')}
                          rows={4}
                        />
                      </div>
                      <div className="md:col-span-2">
                        <Button type="submit" className="w-full">
                          {t('showcase.forms.submit')}
                        </Button>
                      </div>
                    </form>
                  </CardContent>
                  <CardFooter>
                    <p className="text-xs text-muted-foreground">{t('showcase.forms.footnote')}</p>
                  </CardFooter>
                </Card>
              </section>

              <Separator />

              {/* 6. Cards */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<LayoutGrid className="size-5" />}
                  title={t('showcase.sections.cards')}
                  description={t('showcase.cards.description')}
                />
                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                  <FeatureCard
                    title={t('showcase.cards.featureTitle')}
                    description={t('showcase.cards.featureDescription')}
                    icon={<Sparkles className="size-5" />}
                    color="chart-3"
                    badge={t('showcase.cards.new')}
                    actionLabel={t('showcase.cards.learnMore')}
                  />
                  <QuickActionCard
                    title={t('showcase.cards.quickActionTitle')}
                    description={t('showcase.cards.quickActionDescription')}
                    icon={<TrendingUp className="size-5" />}
                    actionLabel={t('showcase.cards.run')}
                  />
                  <ProfileCard
                    name="Sofía Alvarado"
                    role={t('showcase.cards.profileRole')}
                    department={t('showcase.cards.profileDepartment')}
                    initials="SA"
                    status="online"
                    stats={[
                      { label: t('showcase.cards.statProjects'), value: 12 },
                      { label: t('showcase.cards.statTasks'), value: 48 },
                    ]}
                    primaryAction={{ label: t('showcase.cards.message') }}
                  />
                  <ProjectCard
                    title={t('showcase.cards.projectTitle')}
                    description={t('showcase.cards.projectDescription')}
                    status="active"
                    progress={progress}
                    dueDate={t('showcase.cards.dueDate')}
                    members={[
                      { name: 'Alex Rivera', initials: 'AR' },
                      { name: 'Mia Chen', initials: 'MC' },
                      { name: 'Diego Torres', initials: 'DT' },
                    ]}
                  />
                  <ActivityCard items={SAMPLE_ACTIVITY_ITEMS} maxItems={3} />
                  <NotificationCard
                    items={SAMPLE_NOTIFICATION_ITEMS}
                    unreadCount={2}
                    maxItems={3}
                  />
                </div>
                <p className="text-xs text-muted-foreground">{t('showcase.cards.footnote')}</p>
              </section>

              <Separator />

              {/* 7. Controls */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<SlidersHorizontal className="size-5" />}
                  title={t('showcase.sections.controls')}
                  description={t('showcase.controls.description')}
                />
                <Card>
                  <CardContent className="flex flex-col gap-6 pt-6 sm:flex-row sm:items-center sm:justify-between">
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-foreground">
                        {t('showcase.controls.themeMode')}
                      </p>
                      <ThemeToggle />
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-foreground">
                        {t('showcase.controls.language')}
                      </p>
                      <LanguageSelector />
                    </div>
                  </CardContent>
                  <CardFooter>
                    <p className="text-xs text-muted-foreground">
                      {t('showcase.controls.footnote')}
                    </p>
                  </CardFooter>
                </Card>
              </section>

              <Separator />

              {/* 8. Explore more */}
              <section className="space-y-4">
                <SectionHeading
                  icon={<Compass className="size-5" />}
                  title={t('showcase.sections.exploreMore')}
                  description={t('showcase.exploreMore.description')}
                />
                <Card>
                  <CardContent className="pt-6">
                    <Tabs defaultValue="feedback">
                      <TabsList className="grid w-full grid-cols-4">
                        <TabsTrigger value="feedback">
                          {t('showcase.exploreMore.tabs.feedback')}
                        </TabsTrigger>
                        <TabsTrigger value="data">
                          {t('showcase.exploreMore.tabs.data')}
                        </TabsTrigger>
                        <TabsTrigger value="navigation">
                          {t('showcase.exploreMore.tabs.navigation')}
                        </TabsTrigger>
                        <TabsTrigger value="overlays">
                          {t('showcase.exploreMore.tabs.overlays')}
                        </TabsTrigger>
                      </TabsList>

                      <TabsContent value="feedback" className="grid gap-4 pt-4 sm:grid-cols-2">
                        <Alert>
                          <AlertTitle>Alert</AlertTitle>
                          <AlertDescription>{t('showcase.exploreMore.alertBody')}</AlertDescription>
                        </Alert>
                        <div className="space-y-2">
                          <Progress value={progress} />
                          <Slider
                            value={[progress]}
                            onValueChange={([value]) => setProgress(value)}
                            max={100}
                            step={1}
                          />
                        </div>
                        <div className="space-y-2">
                          <Skeleton className="h-4 w-3/4" />
                          <Skeleton className="h-4 w-1/2" />
                        </div>
                        <Empty className="min-h-0 py-6">
                          <EmptyIcon>
                            <Bell className="size-10 text-muted-foreground" />
                          </EmptyIcon>
                          <EmptyTitle>{t('showcase.exploreMore.emptyTitle')}</EmptyTitle>
                          <EmptyDescription>
                            {t('showcase.exploreMore.emptyDescription')}
                          </EmptyDescription>
                          <EmptyAction>
                            <Button size="sm">{t('showcase.exploreMore.emptyAction')}</Button>
                          </EmptyAction>
                        </Empty>
                      </TabsContent>

                      <TabsContent value="data" className="grid gap-4 pt-4 sm:grid-cols-2">
                        <StatsCard
                          title={t('showcase.exploreMore.statsTitle')}
                          value="1,284"
                          trend={{ value: 12 }}
                          icon={<Users className="size-5" />}
                        />
                        <div className="flex items-center gap-3">
                          <Avatar>
                            <AvatarImage src="" alt="" />
                            <AvatarFallback>XA</AvatarFallback>
                          </Avatar>
                          <div className="space-y-2">
                            <Checkbox
                              id="showcase-check"
                              checked={checked}
                              onCheckedChange={value => setChecked(!!value)}
                            />
                          </div>
                          <RadioGroup
                            value={radioValue}
                            onValueChange={setRadioValue}
                            className="flex gap-3"
                          >
                            <div className="flex items-center gap-2">
                              <RadioGroupItem value="starter" id="showcase-radio-starter" />
                              <Label htmlFor="showcase-radio-starter">
                                {t('showcase.forms.planStarter')}
                              </Label>
                            </div>
                            <div className="flex items-center gap-2">
                              <RadioGroupItem value="pro" id="showcase-radio-pro" />
                              <Label htmlFor="showcase-radio-pro">
                                {t('showcase.forms.planPro')}
                              </Label>
                            </div>
                          </RadioGroup>
                          <Switch checked={switchOn} onCheckedChange={setSwitchOn} />
                        </div>
                        <Timeline className="sm:col-span-2">
                          <TimelineItem>
                            <TimelineDot variant="primary" />
                            <TimelineContent>
                              <TimelineHeading>
                                {t('showcase.exploreMore.timelineDone')}
                              </TimelineHeading>
                              <TimelineTime>Aug 2026</TimelineTime>
                              <TimelineDescription>
                                {t('showcase.exploreMore.timelineDoneBody')}
                              </TimelineDescription>
                            </TimelineContent>
                          </TimelineItem>
                          <TimelineItem>
                            <TimelineDot variant="outline" />
                            <TimelineContent>
                              <TimelineHeading>
                                {t('showcase.exploreMore.timelinePending')}
                              </TimelineHeading>
                              <TimelineDescription>
                                {t('showcase.exploreMore.timelinePendingBody')}
                              </TimelineDescription>
                            </TimelineContent>
                          </TimelineItem>
                        </Timeline>
                      </TabsContent>

                      <TabsContent value="navigation" className="grid gap-4 pt-4 sm:grid-cols-2">
                        <InputOTP maxLength={4} value={otpValue} onChange={setOtpValue}>
                          <InputOTPGroup>
                            <InputOTPSlot index={0} />
                            <InputOTPSlot index={1} />
                            <InputOTPSlot index={2} />
                            <InputOTPSlot index={3} />
                          </InputOTPGroup>
                        </InputOTP>
                        <Pagination>
                          <PaginationContent>
                            <PaginationItem>
                              <PaginationPrevious
                                href="#"
                                onClick={event => {
                                  event.preventDefault();
                                  setPaginationPage(page => Math.max(1, page - 1));
                                }}
                              />
                            </PaginationItem>
                            {[1, 2, 3].map(page => (
                              <PaginationItem key={page}>
                                <PaginationLink
                                  href="#"
                                  isActive={paginationPage === page}
                                  onClick={event => {
                                    event.preventDefault();
                                    setPaginationPage(page);
                                  }}
                                >
                                  {page}
                                </PaginationLink>
                              </PaginationItem>
                            ))}
                            <PaginationItem>
                              <PaginationNext
                                href="#"
                                onClick={event => {
                                  event.preventDefault();
                                  setPaginationPage(page => Math.min(3, page + 1));
                                }}
                              />
                            </PaginationItem>
                          </PaginationContent>
                        </Pagination>
                        <Accordion type="single" collapsible className="sm:col-span-2">
                          <AccordionItem value="item-1">
                            <AccordionTrigger>
                              {t('showcase.exploreMore.accordionQuestion')}
                            </AccordionTrigger>
                            <AccordionContent>
                              {t('showcase.exploreMore.accordionAnswer')}
                            </AccordionContent>
                          </AccordionItem>
                        </Accordion>
                        <Collapsible className="sm:col-span-2 space-y-2">
                          <div className="flex items-center justify-between">
                            <p className="text-sm font-medium text-foreground">
                              {t('showcase.exploreMore.collapsibleLabel')}
                            </p>
                            <CollapsibleTrigger asChild>
                              <Button variant="ghost" size="sm" className="w-9 p-0">
                                <ChevronsUpDown className="size-4" />
                              </Button>
                            </CollapsibleTrigger>
                          </div>
                          <CollapsibleContent className="rounded-md border border-border px-4 py-3 text-sm text-muted-foreground">
                            {t('showcase.exploreMore.collapsibleBody')}
                          </CollapsibleContent>
                        </Collapsible>
                      </TabsContent>

                      <TabsContent value="overlays" className="grid gap-4 pt-4 sm:grid-cols-2">
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button variant="outline">
                              {t('showcase.exploreMore.openDialog')}
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>{t('showcase.exploreMore.dialogTitle')}</DialogTitle>
                              <DialogDescription>
                                {t('showcase.exploreMore.dialogBody')}
                              </DialogDescription>
                            </DialogHeader>
                            <DialogFooter>
                              <Button>{t('showcase.exploreMore.dialogConfirm')}</Button>
                            </DialogFooter>
                          </DialogContent>
                        </Dialog>

                        <Popover>
                          <PopoverTrigger asChild>
                            <Button variant="outline">
                              {t('showcase.exploreMore.openPopover')}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-72 text-sm text-muted-foreground">
                            {t('showcase.exploreMore.popoverBody')}
                          </PopoverContent>
                        </Popover>

                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button variant="outline">{t('showcase.exploreMore.hoverMe')}</Button>
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{t('showcase.exploreMore.tooltipBody')}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>

                        <HoverCard>
                          <HoverCardTrigger asChild>
                            <Button variant="link">@xertica</Button>
                          </HoverCardTrigger>
                          <HoverCardContent className="w-72 text-sm text-muted-foreground">
                            {t('showcase.exploreMore.hoverCardBody')}
                          </HoverCardContent>
                        </HoverCard>

                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                              <Search className="mr-2 size-4" />
                              {t('showcase.exploreMore.openMenu')}
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent>
                            <DropdownMenuLabel>
                              {t('showcase.exploreMore.menuLabel')}
                            </DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>
                              <User className="mr-2 size-4" />
                              {t('showcase.exploreMore.menuProfile')}
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              {t('showcase.exploreMore.menuSettings')}
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                  <CardFooter>
                    <p className="text-xs text-muted-foreground">
                      {t('showcase.exploreMore.footnote')}
                    </p>
                  </CardFooter>
                </Card>
              </section>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}