'use client';

/**
 * Layout - section 3 of /design-system.
 *
 * Demos every layout primitive: AppShell, TopBar (customer + vendor),
 * BottomNav, Tabs, ScrollRow, PageHeader, Section, Stack, Row, Grid, Container.
 */

import { TopBar } from '@/components/ui/layout/TopBar';
import { BottomNav } from '@/components/ui/layout/BottomNav';
import { DesktopTopBar } from '@/components/ui/layout/DesktopTopBar';
import { Hero } from '@/components/ui/layout/Hero';
import { Tabs } from '@/components/ui/layout/Tabs';
import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { Section } from '@/components/ui/layout/Section';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { Grid } from '@/components/ui/layout/Grid';
import { Container } from '@/components/ui/layout/Container';
import { Breadcrumb } from '@/components/ui/layout/Breadcrumb';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { ProfileBadge } from '@/components/ui/layout/ProfileBadge';
import { ConstellationHero } from '@/components/ui/layout/HeroSection/ConstellationHero';
import { ManifestoHero } from '@/components/ui/layout/HeroSection/ManifestoHero';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { Icon } from '@/components/ui/icons/Icon';
import { DealCard } from '@/components/ui/domain/DealCard';
import { useT } from '@/lib/i18n/react';
import { GlassCard } from '@/components/ui/layout/GlassCard';
import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';
import {
  SAMPLE_DEAL,
  SAMPLE_VENDOR_DEAL,
  CUSTOMER_NAV_ITEMS,
  VENDOR_NAV_ITEMS,
} from '../../sample-data';

export function Layout() {
  const t = useT('design_system');

  return (
    <SectionShell id="layout" title={t('sidebar_layout')} description={t('section_intro')}>
      {/* AppShell */}
      <ComponentEntry
        name="AppShell"
        id="appshell-layout"
        path="src/components/ui/layout/AppShell"
        description="Page-level shell with sticky TopBar, scrollable main, sticky BottomNav, SkipLink, and AccessibilityTrigger."
        tokens={['color-surface-base', 'z-sticky', 'shadow-lg']}
        a11yNotes={[
          'data-mode attribute drives mode-aware tokens',
          'SkipLink mounted as first focusable element',
          'AccessibilityTrigger always present',
        ]}
        importSnippet={`import { AppShell } from '@/components/ui/layout/AppShell';`}
      >
        <div
          className="border-border-default h-[480px] w-72 overflow-hidden rounded-xl border"
          aria-label="AppShell preview"
        >
          <div data-mode="customer" className="bg-surface-base flex h-full flex-col">
            <TopBar variant="customer" title="מולטידיל" subtitle="עסקאות מוזלות" />
            <main id="ds-appshell-main" className="text-text-secondary flex-1 p-4">
              Main content area
            </main>
            <BottomNav mode="customer" items={CUSTOMER_NAV_ITEMS} />
          </div>
        </div>
      </ComponentEntry>

      {/* TopBar */}
      <ComponentEntry
        name="TopBar (customer + vendor)"
        id="topbar-layout"
        path="src/components/ui/layout/TopBar"
        description="Sticky top bar with brand gradient. Customer = blue, Vendor = green."
        tokens={[
          'color-brand-primary-800',
          'color-brand-primary-600',
          'color-mode-vendor-700',
          'space-4',
        ]}
        a11yNotes={[
          'Semantic <header>',
          'min-height tokenized',
          'startSlot/endSlot stay logical (RTL-safe)',
        ]}
        importSnippet={`import { TopBar } from '@/components/ui/layout/TopBar';`}
      >
        <Stack gap="3">
          <TopBar variant="customer" title="מולטידיל" subtitle="עסקאות מוזלות" />
          <TopBar
            variant="vendor"
            title="מסעדת רוטשילד 22"
            subtitle="יום ג׳, 14.4"
            endSlot={<Badge tone="success">ספק</Badge>}
          />
        </Stack>
      </ComponentEntry>

      {/* BottomNav */}
      <ComponentEntry
        name="BottomNav"
        id="bottomnav-layout"
        path="src/components/ui/layout/BottomNav"
        description="Sticky bottom nav with 4 items. Customer + vendor variants."
        tokens={['color-surface-base', 'color-border-default', 'shadow-lg']}
        a11yNotes={[
          '<nav> with aria-label',
          'aria-current=page on active item',
          'Each item is a real <a>',
        ]}
        importSnippet={`import { BottomNav } from '@/components/ui/layout/BottomNav';`}
      >
        <Stack gap="3">
          <BottomNav mode="customer" items={CUSTOMER_NAV_ITEMS} />
          <BottomNav mode="vendor" items={VENDOR_NAV_ITEMS} />
        </Stack>
      </ComponentEntry>

      {/* Tabs */}
      <ComponentEntry
        name="Tabs"
        id="tabs-layout"
        path="src/components/ui/layout/Tabs"
        description="Radix tabs with brand-color underline on the active item. Customer + vendor modes."
        tokens={['color-brand-primary-600', 'color-mode-vendor-600', 'color-border-default']}
        a11yNotes={[
          'Native arrow-key navigation',
          'Tab + Enter activates',
          'aria-selected on active tab',
        ]}
        importSnippet={`import { Tabs } from '@/components/ui/layout/Tabs';`}
      >
        <Stack gap="4">
          <Tabs
            mode="customer"
            items={[
              { value: 'active', label: 'פעיל', count: 2 },
              { value: 'history', label: 'היסטוריה' },
            ]}
            defaultValue="active"
          />
          <Tabs
            mode="vendor"
            items={[
              { value: 'summary', label: 'סיכום' },
              { value: 'notifications', label: 'התראות', count: 4 },
            ]}
            defaultValue="summary"
          />
        </Stack>
      </ComponentEntry>

      {/* ScrollRow */}
      <ComponentEntry
        name="ScrollRow"
        id="scrollrow-layout"
        path="src/components/ui/layout/ScrollRow"
        description="Horizontal snap-scroll row. Hides scrollbar, RTL-aware via logical padding."
        tokens={['space-3', 'space-4']}
        a11yNotes={['region with aria-label', 'Native horizontal scroll keyboard support']}
        importSnippet={`import { ScrollRow } from '@/components/ui/layout/ScrollRow';`}
      >
        <ScrollRow gap="3" px="4" py="2" aria-label="sample">
          {[1, 2, 3, 4, 5].map((i) => (
            <DealCard
              key={i}
              deal={{ ...SAMPLE_DEAL, id: `sample-${i}` }}
              variant="scroll"
              demo
              className="w-36"
            />
          ))}
        </ScrollRow>
      </ComponentEntry>

      {/* PageHeader */}
      <ComponentEntry
        name="PageHeader"
        id="pageheader-layout"
        path="src/components/ui/layout/PageHeader"
        description="Semantic <header> landmark with title, subtitle, and actions slot."
        tokens={['space-4', 'font-size-xl', 'color-text-primary']}
        a11yNotes={['Renders <h1>', 'Single per page (use Section h2 for nested headings)']}
        importSnippet={`import { PageHeader } from '@/components/ui/layout/PageHeader';`}
      >
        <PageHeader
          title="הקניות שלי"
          subtitle="3 פעילות · 12 בהיסטוריה"
          actions={
            <Button variant="ghost" size="sm" iconStart={<Icon name="Filter" size="sm" />}>
              סנן
            </Button>
          }
        />
      </ComponentEntry>

      {/* Section */}
      <ComponentEntry
        name="Section"
        id="section-layout"
        path="src/components/ui/layout/Section"
        description="Semantic <section> wrapper with token padding + optional heading."
        tokens={['space-2', 'space-4', 'space-6']}
        a11yNotes={['Auto h2 when heading provided', 'aria-label fallback']}
        importSnippet={`import { Section } from '@/components/ui/layout/Section';`}
      >
        <Section heading="עסקאות חמות" py="4" px="4" className="border-border-default border">
          <p className="text-text-secondary">Section body content.</p>
        </Section>
      </ComponentEntry>

      {/* Stack + Row + Grid */}
      <ComponentEntry
        name="Stack / Row / Grid"
        id="stack-row-grid-layout"
        path="src/components/ui/layout/{Stack,Row,Grid}"
        description="Token-driven flex/grid containers - never use raw gap or margin."
        tokens={['space-1', 'space-2', 'space-3', 'space-4', 'space-6']}
        a11yNotes={[
          'Pure layout - no semantics by default',
          'Pass `as` to upgrade to <ul>/<ol> when listing',
        ]}
        importSnippet={`import { Stack, Row, Grid } from '@/components/ui/layout';`}
      >
        <Stack gap="4">
          <Row gap="3" wrap>
            <Badge tone="brand">Row item</Badge>
            <Badge tone="success">Row item</Badge>
            <Badge tone="info">Row item</Badge>
          </Row>
          <Grid cols={3} gap="3">
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className="bg-brand-primary-100 text-text-primary rounded-md p-3 text-center"
              >
                Cell {i}
              </div>
            ))}
          </Grid>
        </Stack>
      </ComponentEntry>

      {/* Container */}
      <ComponentEntry
        name="Container"
        id="container-layout"
        path="src/components/ui/layout/Container"
        description="Max-width wrapper with auto inline margins + token padding."
        tokens={['space-4', 'breakpoint tokens']}
        a11yNotes={['Pure layout', 'Pass `as` to upgrade to a landmark']}
        importSnippet={`import { Container } from '@/components/ui/layout/Container';`}
      >
        <Container maxWidth="md" px="4" className="bg-brand-primary-50 rounded-md">
          <div className="text-text-secondary py-3 text-center">Container - max-width md</div>
        </Container>
      </ComponentEntry>

      {/* DesktopTopBar */}
      <ComponentEntry
        name="DesktopTopBar"
        id="desktoptopbar-layout"
        path="src/components/ui/layout/DesktopTopBar"
        description="Glass sticky horizontal nav shown only on lg+ (hidden on mobile). Uses backdrop-blur + brand-primary glass tokens. Active nav item gets a 2px secondary-300 bottom border."
        tokens={[
          'color-glass-bg-primary',
          'glass-blur-md',
          'color-glass-border-primary',
          'shadow-glass-primary',
          'height-desktop-topnav',
          'color-brand-secondary-300',
        ]}
        a11yNotes={[
          '<nav aria-label={t("desktop_nav")}> landmark wraps all links',
          'Active link: aria-current="page"',
          'RTL: logical properties only (ps-*, pe-*, ms-*, me-*)',
          'High-contrast fallback: solid brand-primary-800 background',
        ]}
        importSnippet={`import { DesktopTopBar, useCustomerDesktopNavItems } from '@/components/ui/layout/DesktopTopBar';`}
      >
        <div className="border-glass-border-primary relative w-full overflow-hidden rounded-xl border">
          <DesktopTopBar
            items={[
              { href: '/', icon: <Icon name="Check" size="sm" />, label: 'בית', active: true },
              { href: '/search', icon: <Icon name="Search" size="sm" />, label: 'חיפוש' },
              { href: '/club', icon: <Icon name="Heart" size="sm" />, label: 'מועדון' },
            ]}
            mode="customer"
          />
        </div>
      </ComponentEntry>

      {/* ProfileBadge */}
      <ComponentEntry
        name="ProfileBadge"
        id="profilebadge-layout"
        path="src/components/ui/layout/ProfileBadge"
        description="Desktop topbar profile pill — avatar circle + name + chevron trigger that opens a dropdown menu. Auth variant: Purchases, Favorites, Profile, LanguageToggle, optional My Business / Admin Dashboard, Logout. Guest variant: Login, Register, LanguageToggle."
        tokens={[
          'color-brand-primary-100',
          'color-brand-primary-700',
          'color-surface-hover',
          'color-text-primary',
        ]}
        a11yNotes={[
          'DropdownMenu uses Radix role=menu, role=menuitem semantics',
          'Trigger has aria-label={label} (name or "Guest")',
          'Avatar circle is aria-hidden — decorative',
          'LanguageToggle rendered outside DropdownMenuItem to avoid nested interactive semantics',
          'Logout item: disabled attr prevents double-submit during loading',
        ]}
        importSnippet={`import { ProfileBadge } from '@/components/ui/layout/ProfileBadge';`}
      >
        <div className="flex flex-col gap-6">
          <div>
            <p className="text-text-muted mb-2 text-sm">Authenticated — with name, vendor, admin</p>
            <ProfileBadge isGuest={false} userName="רוי" isVendor isAdmin />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-sm">Authenticated — no display name</p>
            <ProfileBadge isGuest={false} />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-sm">Guest</p>
            <ProfileBadge isGuest />
          </div>
        </div>
      </ComponentEntry>

      {/* Hero */}
      <ComponentEntry
        name="Hero"
        id="hero-layout"
        path="src/components/ui/layout/Hero"
        description="Page hero wrapper with gradient brand background. 'compact' = 8rem; 'full' = 8rem mobile / 28rem lg+."
        tokens={[
          'color-brand-primary-900',
          'color-brand-primary-800',
          'color-brand-primary-600',
          'spacing-32',
        ]}
        a11yNotes={[
          'Plain <div> - not a landmark; page heading inside provides semantics',
          'Children are positioned relative to this container',
        ]}
        importSnippet={`import { Hero } from '@/components/ui/layout/Hero';`}
      >
        <Stack gap="4">
          <Hero size="compact" className="flex items-end overflow-hidden rounded-xl">
            <div className="p-6">
              <p className="text-text-inverse text-sm font-semibold">compact (8rem)</p>
            </div>
          </Hero>
          <Hero size="full" className="flex items-end overflow-hidden rounded-xl">
            <div className="p-6">
              <p className="text-text-inverse text-sm font-semibold">full (lg: 28rem)</p>
            </div>
          </Hero>
        </Stack>
      </ComponentEntry>

      {/* ── Breadcrumb ──────────────────────────────────────────────────── */}
      <ComponentEntry
        name="Breadcrumb"
        id="breadcrumb-layout"
        path="src/components/ui/layout/Breadcrumb"
        description='Site-path navigation trail. Renders nothing when fewer than 2 items. RTL-aware `/` separator. Last item aria-current="page" and not linked. WCAG 2.4.8.'
        tokens={[
          'color-surface-base',
          'color-text-primary',
          'color-text-secondary',
          'color-text-tertiary',
        ]}
        a11yNotes={[
          'nav landmark with aria-label="breadcrumb"',
          'Last item has aria-current="page"',
          'Focus ring on all link crumbs',
          'Direction-neutral `/` separator - RTL-safe',
        ]}
        importSnippet={`import { Breadcrumb } from '@/components/ui/layout/Breadcrumb';`}
      >
        <Stack gap="4">
          <Breadcrumb
            items={[
              { label: 'בית', href: '/' },
              { label: 'רכישות', href: '/purchases' },
              { label: 'קפה בוקר + מאפה' },
            ]}
          />
          <Breadcrumb
            items={[
              { label: 'Home', href: '/' },
              { label: 'Search', href: '/search' },
              { label: 'Morning Coffee Deal' },
            ]}
          />
          <Breadcrumb items={[{ label: 'בית', href: '/' }, { label: 'רוסטרס תל אביב' }]} />
        </Stack>
      </ComponentEntry>

      {/* GlassCard */}
      <ComponentEntry
        name="GlassCard"
        id="glasscard-layout"
        path="src/components/ui/layout/GlassCard"
        description="Frosted-glass surface card for premium hero sections. Supports brand-blue (primary) and white (surface) tones, three padding sizes, and three text alignments."
        tokens={[
          'color-glass-bg-primary-medium',
          'color-surface-glass',
          'color-glass-border-white',
          'shadow-glass-primary',
          'shadow-glass',
          'glass-blur-md',
          'radius-xl',
        ]}
        a11yNotes={[
          'No interactive role — purely presentational container',
          'Ensure sufficient contrast on glass backgrounds',
        ]}
        importSnippet={`import { GlassCard } from '@/components/ui/layout/GlassCard';`}
      >
        <div className="bg-brand-primary-700 flex flex-col gap-4 p-6">
          <div className="grid grid-cols-3 gap-3">
            <GlassCard padding="md" align="center" tone="primary">
              <p className="text-text-inverse text-xl font-bold">₪450</p>
              <p className="text-brand-primary-200 text-xs">נחסך</p>
            </GlassCard>
            <GlassCard padding="md" align="center" tone="primary">
              <p className="text-text-inverse text-xl font-bold">12</p>
              <p className="text-brand-primary-200 text-xs">רכישות</p>
            </GlassCard>
            <GlassCard padding="md" align="center" tone="primary">
              <p className="text-text-inverse text-xl font-bold">5</p>
              <p className="text-brand-primary-200 text-xs">עסקים</p>
            </GlassCard>
          </div>
          <GlassCard padding="lg" align="start" tone="surface">
            <p className="text-text-primary text-sm">
              GlassCard tone=surface (white-tinted) — used for sidebar / modal panels.
            </p>
          </GlassCard>
        </div>
      </ComponentEntry>

      {/* ── VendorShell ──────────────────────────────────────────────── */}
      <ComponentEntry
        name="VendorShell"
        id="vendorshell-layout"
        path="src/components/ui/layout/VendorShell"
        description="Layout shell for vendor screens. variant='centered' (default) — full-screen centered layout for registration, welcome, pending, rejected, frozen, banned screens. variant='dashboard' — P0 stub (renders centered); real sidebar/topbar/bottom-nav layout lands in P1 (C1.4)."
        tokens={['color-surface-base', 'spacing-6', 'spacing-10']}
        a11yNotes={[
          'Shell is a presentational wrapper only — accessibility semantics live in child <main> with aria-labelledby',
          'min-h-dvh ensures full viewport coverage on mobile',
          'RTL-safe: uses px-*/py-* which apply equally in both directions',
        ]}
        importSnippet={`import { VendorShell } from '@/components/ui/layout/VendorShell';`}
      >
        <Stack gap="4">
          {/* centered variant (default) */}
          <VendorShell
            variant="centered"
            demo
            className="border-border-default min-h-[200px] rounded-xl border"
          >
            <main id="ds-vendor-shell-main" aria-label="VendorShell centered demo">
              <p className="text-text-primary text-sm">
                variant=&quot;centered&quot; (default, no textCenter)
              </p>
            </main>
          </VendorShell>
          {/* centered + textCenter */}
          <VendorShell
            variant="centered"
            textCenter
            demo
            className="border-border-default min-h-[200px] rounded-xl border"
          >
            <main aria-label="VendorShell centered textCenter demo">
              <p className="text-text-primary text-sm">
                variant=&quot;centered&quot; textCenter — welcome, rejected, frozen, banned screens
              </p>
            </main>
          </VendorShell>
          {/* dashboard variant (P0 stub) */}
          <VendorShell
            variant="dashboard"
            demo
            className="border-border-default min-h-[200px] rounded-xl border"
          >
            <main aria-label="VendorShell dashboard stub demo">
              <p className="text-text-primary text-sm">
                variant=&quot;dashboard&quot; — P0 stub (renders centered; real layout in P1)
              </p>
            </main>
          </VendorShell>
        </Stack>
      </ComponentEntry>

      {/* SectionHeader */}
      <ComponentEntry
        name="SectionHeader"
        id="sectionheader-layout"
        path="src/components/ui/layout/SectionHeader"
        description="Section title row with optional subtitle and action link. Used above deal rows and content sections on the home page."
        tokens={[
          'font-size-xl',
          'font-weight-extrabold',
          'line-height-tight',
          'color-text-primary',
          'color-text-muted',
          'color-mode-customer-700',
          'space-3',
          'space-4',
        ]}
        a11yNotes={[
          'Renders semantic <h2> — never use inside a section that already has an <h2>',
          'Action link is a real <a> with visible focus ring from global styles',
          'subtitle is <p>, no heading level — purely descriptive',
        ]}
        importSnippet={`import { SectionHeader } from '@/components/ui/layout/SectionHeader';`}
      >
        <Stack gap="4">
          <SectionHeader title="עסקאות חמות" />
          <SectionHeader title="קרוב אליך" subtitle="תל אביב · רמת גן" />
          <SectionHeader
            title="כל העסקאות"
            subtitle="120 עסקאות זמינות"
            actionHref="/search"
            actionLabel="לכולן"
          />
        </Stack>
      </ComponentEntry>

      {/* ConstellationHero */}
      <ComponentEntry
        name="ConstellationHero"
        id="constellationhero-layout"
        path="src/components/ui/layout/HeroSection/ConstellationHero"
        description="Animated star-constellation hero for the FAQ page. Canvas-drawn star network with fade-in title and subtitle."
        tokens={[
          'color-brand-primary-700',
          'color-brand-on-primary',
          'font-size-3xl',
          'font-size-lg',
          'space-6',
        ]}
        a11yNotes={[
          'Canvas animation is aria-hidden',
          'prefers-reduced-motion: animation paused',
          'title rendered as h1 with semantic markup',
        ]}
        importSnippet={`import { ConstellationHero } from '@/components/ui/layout/HeroSection/ConstellationHero';`}
      >
        <div className="overflow-hidden rounded-xl">
          <ConstellationHero title="שאלות נפוצות" subtitle="כל מה שרצית לדעת על מולטידיל" />
        </div>
      </ComponentEntry>

      {/* ManifestoHero */}
      <ComponentEntry
        name="ManifestoHero"
        id="manifestohero-layout"
        path="src/components/ui/layout/HeroSection/ManifestoHero"
        description="Animated gradient hero for the About page. Gradient background with rotating word animation in the h1 headline."
        tokens={[
          'color-brand-primary-600',
          'color-brand-primary-800',
          'color-brand-on-primary',
          'font-size-4xl',
          'font-size-lg',
          'space-6',
        ]}
        a11yNotes={[
          'Word rotator is aria-live=polite',
          'prefers-reduced-motion: animation stopped on first word',
          'title rendered as h1 with semantic markup',
        ]}
        importSnippet={`import { ManifestoHero } from '@/components/ui/layout/HeroSection/ManifestoHero';`}
      >
        <div className="overflow-hidden rounded-xl">
          <ManifestoHero
            title="אנחנו מאמינים בשקיפות"
            subtitle="המשימה שלנו: לחבר עסקים ולקוחות בצורה הוגנת"
          />
        </div>
      </ComponentEntry>

      {/* PublicAppShell */}
      <ComponentEntry
        name="PublicAppShell"
        id="publicappshell-layout"
        path="src/layouts/PublicAppShell.astro"
        description="Astro layout for public customer-facing pages. Composes BaseLayout with PublicChromeIsland (mobile + desktop SiteNav) and BottomNavIsland (sticky mobile bottom nav). SiteFooter rendered via BaseLayout internally."
        tokens={['color-surface-base', 'height-desktop-topnav', 'z-sticky']}
        a11yNotes={[
          'Astro layout — SSR only, no client JS at layout level',
          'PublicChromeIsland hydrated client:idle — deferred after paint',
          'BottomNavIsland wrapped in lg:hidden — hidden on desktop',
          'BaseLayout provides <html lang dir> live updates via locale prop',
          'SkipLink + AccessibilityTrigger inherited from BaseLayout',
        ]}
        importSnippet={`// Astro layout — use in .astro page files only
---
import PublicAppShell from '@/layouts/PublicAppShell.astro';
const { locale, currentPath, isGuest, isAdmin, isVendor } = Astro.locals;
---
<PublicAppShell
  title="כל הדילים"
  description="מחירים מוזלים לכל המוצרים"
  locale={locale}
  currentPath={currentPath}
  isGuest={isGuest}
  isAdmin={isAdmin}
  isVendor={isVendor}
>
  <main id="main">...</main>
</PublicAppShell>`}
      >
        {/* Static layout diagram — Astro layout cannot be rendered in a React island */}
        <div className="border-border-default flex flex-col gap-0.5 overflow-hidden rounded-xl border text-xs">
          <div className="bg-brand-primary-600 text-text-on-brand px-4 py-2 font-medium">
            PublicChromeIsland (client:idle) — TopBar / DesktopTopBar
          </div>
          <div className="bg-surface-raised text-text-secondary px-4 py-6 text-center italic">
            {'<slot /> — SSR page body (lg:pt-[--height-desktop-topnav])'}
          </div>
          <div className="bg-surface-inset text-text-secondary px-4 py-2 text-center">
            SiteFooter (via BaseLayout)
          </div>
          <div className="bg-brand-primary-50 text-brand-primary-700 px-4 py-2 text-center font-medium">
            BottomNavIsland (client:idle, lg:hidden)
          </div>
        </div>
      </ComponentEntry>

      {/* PublicChromeIsland */}
      <ComponentEntry
        name="PublicChromeIsland"
        id="publicchromeiselond-layout"
        path="src/components/ui/layout/PublicChromeIsland/PublicChromeIsland.tsx"
        description="React island hosting SiteNav for public pages. Renders mobile SiteNav (lg:hidden) and desktop SiteNav (hidden lg:block) inside HydratedIsland (QueryClientProvider + LocaleProvider + ErrorBoundary). Used in PublicAppShell with client:idle."
        tokens={[
          'color-surface-base',
          'color-brand-primary-600',
          'color-text-on-brand',
          'z-sticky',
        ]}
        a11yNotes={[
          'HydratedIsland wraps with ErrorBoundary — nav failure non-fatal',
          'Mobile nav: lg:hidden, desktop nav: hidden lg:block',
          'SiteNav receives currentPath for active-state highlighting',
          'LocaleProvider enables useT() in all child nav components',
          'Keyboard: Tab navigates links; Escape closes mobile menu',
          'Focus trap active when mobile menu open',
        ]}
        importSnippet={`import { PublicChromeIsland } from '@/components/ui/layout/PublicChromeIsland/PublicChromeIsland';

// In an Astro template:
<PublicChromeIsland
  client:idle
  locale={locale}
  isGuest={isGuest}
  isAdmin={isAdmin}
  isVendor={isVendor}
  userName={userName}
  currentPath={currentPath}
/>`}
      >
        {/* Static mirror — live render requires HydratedIsland + QCP + LocaleProvider; use client:idle in Astro */}
        <div className="border-border-default flex flex-col gap-1 overflow-hidden rounded-xl border text-xs">
          <div className="bg-surface-base flex items-center justify-between border-b px-4 py-2">
            <span className="text-text-muted">lg:hidden →</span>
            <span className="text-text-secondary font-medium">
              SiteNav variant=mobile (TopBar style)
            </span>
            <span className="text-brand-primary-600 font-mono text-xs">PublicChromeIsland</span>
          </div>
          <div className="bg-surface-raised flex items-center justify-between px-4 py-2">
            <span className="text-text-muted">hidden lg:block →</span>
            <span className="text-text-secondary font-medium">
              SiteNav variant=desktop (DesktopTopBar style)
            </span>
            <span className="text-brand-primary-600 font-mono text-xs">PublicChromeIsland</span>
          </div>
          <div className="text-text-muted px-4 py-1 text-center italic">
            Hydrates client:idle via HydratedIsland (QCP + LocaleProvider + ErrorBoundary)
          </div>
        </div>
      </ComponentEntry>

      {/* BottomNavIsland */}
      <ComponentEntry
        name="BottomNavIsland"
        id="bottomnavisland-layout"
        path="src/components/ui/layout/BottomNavIsland/BottomNavIsland.tsx"
        description="React island wrapping BottomNav for public pages. Resolves customer nav items via useCustomerNavItems, marking the active tab from activePath. Wrapped in HydratedIsland. Used in PublicAppShell inside lg:hidden div."
        tokens={[
          'color-surface-base',
          'color-border-default',
          'color-brand-primary-500',
          'color-text-muted',
          'color-text-primary',
          'z-sticky',
          'shadow-lg',
        ]}
        a11yNotes={[
          'BottomNav renders as `<nav aria-label>` with `<ul>` item list',
          'Active tab: aria-current="page" on active link',
          'Icons are aria-hidden — labels visible beneath icon',
          'isGuest hides account-gated nav items',
          'focus-visible rings on all nav anchors',
          'HydratedIsland ErrorBoundary prevents nav crash from propagating',
        ]}
        importSnippet={`import { BottomNavIsland } from '@/components/ui/layout/BottomNavIsland/BottomNavIsland';

// In an Astro template:
<div class="lg:hidden">
  <BottomNavIsland
    client:idle
    activePath={currentPath}
    locale={locale}
    isGuest={isGuest}
  />
</div>`}
      >
        {/* Static mirror using sample-data nav items — live render uses client:idle in Astro */}
        <Stack gap="4">
          <p className="text-text-secondary text-xs font-medium tracking-wide uppercase">
            activePath=/deals/all — uses CUSTOMER_NAV_ITEMS from sample-data
          </p>
          <div className="border-border-default overflow-hidden rounded-xl border">
            <BottomNav mode="customer" items={CUSTOMER_NAV_ITEMS} />
          </div>
          <p className="text-text-secondary text-xs font-medium tracking-wide uppercase">
            isGuest=true → profile tab resolves to /login (handled inside BottomNavIsland via
            useCustomerNavItems)
          </p>
          <div className="text-text-muted bg-surface-raised rounded-lg px-4 py-3 text-sm italic">
            Guest variant: useCustomerNavItems swaps profile href to /login client-side — not
            previewable in SSR gallery.
          </div>
        </Stack>
      </ComponentEntry>

      {/* keep ESLint happy on unused import */}
      <span hidden>{SAMPLE_VENDOR_DEAL.id}</span>
    </SectionShell>
  );
}