import React, { useMemo, useState } from "react";
import DDMenu, {
  DDSearchable,
  type MenuItem,
  type DDMenuSize,
  type DDSearchableSize,
} from "@asafarim/dd-menu";
import { ThemeToggle } from "@asafarim/react-themes";
import { PackageLinks } from "@asafarim/shared";
type Theme = "auto" | "light" | "dark";
type Placement =
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "top"
  | "top-start"
  | "top-end"
  | "right"
  | "left";

const makeNestedItems = (): MenuItem[] => [
  { id: "home", label: "Home", icon: "🏠" },
  {
    id: "products",
    label: "Products",
    icon: "📦",
    children: [
      { id: "electronics", label: "Electronics", icon: "🔌" },
      {
        id: "clothing",
        label: "Clothing",
        icon: "👕",
        children: [
          { id: "men", label: "Men" },
          { id: "women", label: "Women" },
          {
            id: "kids",
            label: "Kids",
            children: [
              { id: "toys", label: "Toys" },
              { id: "shoes", label: "Shoes" },
            ],
          },
        ],
      },
      { id: "books", label: "Books", icon: "📚" },
    ],
  },
  { id: "about", label: "About Us", icon: "ℹ️" },
  { id: "help", label: "Help", icon: "❓", disabled: true },
];

const placements: Placement[] = [
  "bottom",
  "bottom-start",
  "bottom-end",
  "top",
  "top-start",
  "top-end",
  "right",
  "left",
];

type RoadmapFeature = {
  icon: string;
  title: string;
  version: string;
  status: "In Development" | "Planned" | "Under Review";
  summary: string;
  specs: string[];
};

const roadmapFeatures: RoadmapFeature[] = [
  {
    icon: "☑",
    title: "Multi-Select & Tagged Selection",
    version: "v0.2.0",
    status: "In Development",
    summary: "Support multiple selections with inline tag chips and individual chip-removal controls.",
    specs: [
      "Add multiple?: boolean to DDSearchable",
      "Pass selected items through selectedItems?: MenuItem[]",
      "Render inline badge chips with design-token styling",
    ],
  },
  {
    icon: "↻",
    title: "Async Data Fetching & Remote Loading",
    version: "v0.2.0",
    status: "In Development",
    summary: "Built-in loader state and debounced callback support for fetching menu items on demand.",
    specs: [
      "Support onLoadOptions(searchTerm): Promise<MenuItem[]>",
      "Show a native loading spinner inside the input trigger",
      "Provide configurable loadingText?: string",
    ],
  },
  {
    icon: "☷",
    title: "Grouped Items & Section Headers",
    version: "v0.3.0",
    status: "Planned",
    summary: "Visual section headers and item dividers to organize complex navigation menus.",
    specs: [
      "Support groupHeader?: string or structured group arrays",
      "Keep keyboard navigation focused on selectable items",
      "Mark header items as aria-disabled=true",
    ],
  },
  {
    icon: "⤢",
    title: "React Portal Support",
    version: "v0.3.0",
    status: "Planned",
    summary: "Escape container boundaries and overflow constraints by mounting menus to the document root.",
    specs: [
      "Add usePortal?: boolean and portalContainer?: HTMLElement",
      "Calculate dynamic positioning relative to the viewport",
      "Prevent clipping inside modals and dense layouts",
    ],
  },
  {
    icon: "◈",
    title: "Design Tokens Ecosystem Alignment",
    version: "v0.4.0",
    status: "Under Review",
    summary: "Native support for @asafarim/design-tokens, replacing legacy standalone variables.",
    specs: [
      "Map theme states to shared surface and spacing tokens",
      "Keep light, dark, and auto modes in sync",
      "Support nested ASafariM application wrappers",
    ],
  },
];

function RoadmapView() {
  return (
    <section className="roadmap" aria-labelledby="roadmap-title">
      <div className="roadmap-intro">
        <div>
          <p className="eyebrow">The next chapter</p>
          <h2 id="roadmap-title">Roadmap &amp; Upcoming Features</h2>
          <p className="note">
            Planned enhancements for @asafarim/dd-menu, informed by common dropdown and filter workflows.
          </p>
        </div>
        <div className="roadmap-progress" aria-label="Five roadmap initiatives">
          <strong>05</strong>
          <span>initiatives</span>
        </div>
      </div>

      <div className="roadmap-preview card">
        <div>
          <p className="eyebrow">Preview props</p>
          <h3>See the direction</h3>
          <p className="note">These controls illustrate proposed API behavior and are intentionally disabled.</p>
        </div>
        <div className="preview-controls">
          <label className="preview-toggle">
            <input type="checkbox" checked={false} disabled readOnly />
            <span>multiple</span>
          </label>
          <label className="preview-toggle">
            <input type="checkbox" checked={false} disabled readOnly />
            <span>usePortal</span>
          </label>
          <button className="roadmap-trigger" type="button" disabled>
            Search with remote data <span aria-hidden="true">⌄</span>
          </button>
        </div>
        <div className="preview-chips" aria-label="Example selected items">
          <span className="preview-chip">Design <span aria-hidden="true">×</span></span>
          <span className="preview-chip">Engineering <span aria-hidden="true">×</span></span>
          <span className="preview-chip preview-chip-muted">+ more</span>
        </div>
      </div>

      <div className="roadmap-grid">
        {roadmapFeatures.map((feature, index) => (
          <article className="roadmap-card card" key={feature.title}>
            <div className="roadmap-card-topline">
              <span className="roadmap-icon" aria-hidden="true">{feature.icon}</span>
              <span className={`roadmap-status roadmap-status-${feature.status.toLowerCase().replace(" ", "-")}`}>
                {feature.status}
              </span>
            </div>
            <div className="roadmap-card-heading">
              <span className="roadmap-number">0{index + 1}</span>
              <h3>{feature.title}</h3>
            </div>
            <span className="roadmap-version">Target {feature.version}</span>
            <p>{feature.summary}</p>
            <ul>
              {feature.specs.map((spec) => <li key={spec}>{spec}</li>)}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

export default function App() {
  const [theme] = useState<Theme>("auto");
  const [view, setView] = useState<"live" | "roadmap">("live");
  const [size, setSize] = useState<DDMenuSize>("md");
  const [hoverDelay, setHoverDelay] = useState<number>(150);
  const [closeOnClick, setCloseOnClick] = useState<boolean>(true);
  const [selectedSearchItem, setSelectedSearchItem] = useState<MenuItem | null>(null);

  const baseItems = useMemo(() => makeNestedItems(), []);
  const onItemClick = (item: MenuItem) => alert(`Clicked: ${item.label}`);

  const minimalTrigger = <button className="pill">Action Menu</button>;

  const profileTrigger = (
    <div className="pill">
      <div className="avatar">JD</div>
      <span>John Doe</span>
    </div>
  );

  return (
    <div className="container">
      <div className="intro-section">
        <div className="hero-topline">
          <div className="brand-lockup" aria-label="ASafariM DD Menu">
            <span className="brand-mark" aria-hidden="true">
              <svg viewBox="0 0 32 32" role="img">
                <path d="M7 8h18M7 13h13M7 18h10" />
                <path d="m20 22 3 3 3-3M23 25V17" />
              </svg>
            </span>
            <span className="brand-copy">
              <strong>ASafariM</strong>
              <span>DD Menu</span>
            </span>
          </div>
          <TT />
        </div>
        <div className="hero-copy">
          <p className="hero-kicker">React dropdown primitives</p>
          <h1 className="main-title">Dropdowns, beautifully composed.</h1>
          <p className="subtitle">
            A minimal, elegant, and highly customizable dropdown menu React component.
          </p>
        </div>
        <PackageLinks
          packageName={"@asafarim/dd-menu"}
          githubPath={"https://github.com/AliSafari-IT/dd-menu"}
          demoPath="https://alisafari-it.github.io/dd-menu/"
        />
        <div className="features">
          <div className="feature">
            <span className="feature-icon">🎨</span>
            <span>Beautiful theming with dark/light modes</span>
          </div>
          <div className="feature">
            <span className="feature-icon">📱</span>
            <span>Fully responsive and accessible</span>
          </div>
          <div className="feature">
            <span className="feature-icon">🔧</span>
            <span>TypeScript support with full type safety</span>
          </div>
          <div className="feature">
            <span className="feature-icon">⚡</span>
            <span>Lightweight with smooth animations</span>
          </div>
        </div>
        <div className="quick-install">
          <h3>Quick Installation</h3>
          <div className="install-commands">
            <code>npm install @asafarim/dd-menu</code>
            <span className="or">or</span>
            <code>pnpm add @asafarim/dd-menu</code>
          </div>
        </div>
      </div>

      <div className="demo-nav">
        <span className="demo-nav-label">Explore the package</span>
        <div className="view-switch" role="tablist" aria-label="Demo views">
          <button
            className={view === "live" ? "view-tab active" : "view-tab"}
            type="button"
            role="tab"
            aria-selected={view === "live"}
            onClick={() => setView("live")}
          >
            Live Components
          </button>
          <button
            className={view === "roadmap" ? "view-tab active" : "view-tab"}
            type="button"
            role="tab"
            aria-selected={view === "roadmap"}
            onClick={() => setView("roadmap")}
          >
            Coming Soon Roadmap
          </button>
        </div>
      </div>

      <div className="header">
        <div className="title">{view === "live" ? "Interactive Demo & Tutorial" : "Roadmap & Upcoming Features"}</div>
        {view === "live" && <div className="controls">
          <div className="control">
            <TT />
          </div>
          <div className="control">
            <label className="note">Size</label>
            <select
              value={size}
              onChange={(e) => setSize(e.target.value as DDMenuSize)}
            >
              <option value="xs">xs</option>
              <option value="sm">sm</option>
              <option value="md">md</option>
              <option value="lg">lg</option>
              <option value="xl">xl</option>
              <option value="2xl">2xl</option>
            </select>
          </div>
          <div className="control">
            <label className="note">Hover delay: {hoverDelay}ms</label>
            <input
              type="range"
              min={0}
              max={800}
              step={50}
              value={hoverDelay}
              onChange={(e) => setHoverDelay(Number(e.target.value))}
            />
          </div>
          <div className="control">
            <label className="note">Close on click</label>
            <input
              type="checkbox"
              checked={closeOnClick}
              onChange={(e) => setCloseOnClick(e.target.checked)}
            />
          </div>
        </div>}
      </div>

      {view === "live" ? <div className="grid">
        <div className="card">
          <h3>1. Default Variant</h3>
          <p className="note">
            The most basic dropdown menu with a simple "Menu" button trigger.
            Perfect for general-purpose dropdowns.
          </p>
          <DDMenu
            items={baseItems}
            theme={theme}
            size={size}
            variant="default"
            onItemClick={onItemClick}
            closeOnClick={closeOnClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`import DDMenu from "@asafarim/dd-menu";

const items = [
  { id: "home", label: "Home", icon: "🏠" },
  { id: "about", label: "About", icon: "ℹ️" }
];

<DDMenu
  items={items}
  variant="default"
  onItemClick={(item) => console.log(item)}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>2. Minimal Variant (Custom Trigger)</h3>
          <p className="note">
            Use your own custom trigger element. Great for action buttons,
            context menus, or when you need full control over the trigger
            appearance.
          </p>
          <DDMenu
            items={baseItems}
            theme={theme}
            size={size}
            variant="minimal"
            className="dd-menu--minimal"
            trigger={minimalTrigger}
            onItemClick={onItemClick}
            closeOnClick={closeOnClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const customTrigger = (
  <button className="my-button">
    Action Menu
  </button>
);

<DDMenu
  items={items}
  variant="minimal"
  trigger={customTrigger}
  onItemClick={(item) => console.log(item)}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>3. Navbar Variant (Profile Menu)</h3>
          <p className="note">
            Designed for navigation bars and headers. Typically used for user
            profile menus, account settings, or top-level navigation.
          </p>
          <div className="nav-demo">
            <div className="nav-demo-bar">
              <div className="nav-brand">
                <span className="nav-brand-mark" aria-hidden="true">D</span>
                <span>
                  <strong>Dashboard</strong>
                  <small>Workspace</small>
                </span>
              </div>
              <div className="nav-links" aria-label="Preview navigation">
                <span className="nav-link nav-link-active">Overview</span>
                <span className="nav-link">Activity</span>
                <span className="nav-link">Settings</span>
              </div>
              <DDMenu
                items={baseItems}
                theme={theme}
                size={size}
                variant="navbar"
                className="dd-menu--navbar"
                trigger={profileTrigger}
                placement="bottom-end"
                onItemClick={onItemClick}
                closeOnClick={closeOnClick}
                hoverDelay={hoverDelay}
              />
            </div>
            <div className="nav-demo-footer">
              <span>Team workspace</span>
              <span className="nav-demo-indicator"><span aria-hidden="true" /> All systems operational</span>
            </div>
          </div>
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const profileTrigger = (
  <div className="profile-trigger">
    <div className="avatar">JD</div>
    <span>John Doe</span>
  </div>
);

<DDMenu
  items={profileItems}
  variant="navbar"
  trigger={profileTrigger}
  placement="bottom-end"
  onItemClick={handleProfileAction}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>4. Sidebar Variant (Collapsible Navigation)</h3>
          <p className="note">
            Perfect for vertical navigation menus. Supports nested items that
            expand/collapse on click. Ideal for admin panels and dashboards.
          </p>
          <div className="sidebar">
            <div className="sidebar-panel sidebar-navigation">
              <div className="sidebar-panel-header">
                <div>
                  <span className="sidebar-panel-kicker">Workspace</span>
                  <strong>Navigation</strong>
                </div>
                <span className="sidebar-status">Live</span>
              </div>
              <DDMenu
                items={baseItems}
                theme={theme}
                size={size}
                variant="sidebar"
                placement="right"
                onItemClick={onItemClick}
                closeOnClick={closeOnClick}
                hoverDelay={hoverDelay}
              />
              <p className="sidebar-hint">Expand items to explore nested navigation.</p>
            </div>
            <div className="sidebar-panel sidebar-content-preview">
              <div className="content-preview-topline">
                <span className="sidebar-panel-kicker">Content area</span>
                <span className="content-dots" aria-hidden="true">•••</span>
              </div>
              <div className="content-preview-lines" aria-hidden="true">
                <span />
                <span />
                <span />
              </div>
              <p className="note">Your page content appears here.</p>
            </div>
          </div>
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const sidebarItems = [
  { id: "dashboard", label: "Dashboard", icon: "📊" },
  {
    id: "products",
    label: "Products",
    icon: "📦",
    children: [
      { id: "list", label: "Product List" },
      { id: "add", label: "Add Product" }
    ]
  }
];

<DDMenu
  items={sidebarItems}
  variant="sidebar"
  onItemClick={handleNavigation}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>5. Placement Options</h3>
          <p className="note">
            Control where the dropdown appears relative to the trigger. Choose
            from 8 different positions to fit your layout needs.
          </p>
          <div className="row">
            {placements.map((p) => (
              <DDMenu
                key={p}
                items={baseItems}
                theme={theme}
                size={size}
                placement={p as Placement}
                trigger={<button className="pill">{p}</button>}
                onItemClick={onItemClick}
                closeOnClick={closeOnClick}
                hoverDelay={hoverDelay}
              />
            ))}
          </div>
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`// Available placements:
// "bottom" | "bottom-start" | "bottom-end"
// "top" | "top-start" | "top-end"
// "right" | "left"

<DDMenu
  items={items}
  placement="bottom-end"  // Dropdown appears at bottom-right
  trigger={<button>Options</button>}
/>

<DDMenu
  items={items}
  placement="top-start"    // Dropdown appears at top-left
  trigger={<button>More</button>}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>6. Item States (Active & Disabled)</h3>
          <p className="note">
            Show current selection with active states and prevent interaction
            with disabled items. Perfect for navigation menus and conditional
            actions.
          </p>
          <DDMenu
            items={[
              { id: "dashboard", label: "Dashboard", icon: "📊", active: true },
              { id: "settings", label: "Settings", icon: "⚙️" },
              { id: "billing", label: "Billing", icon: "💳", disabled: true },
              {
                id: "team",
                label: "Team",
                icon: "👥",
                children: [
                  { id: "members", label: "Members" },
                  { id: "invites", label: "Invites", disabled: true },
                ],
              },
            ]}
            theme={theme}
            size={size}
            onItemClick={onItemClick}
            closeOnClick={closeOnClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const menuItems = [
  {
    id: "current",
    label: "Current Page",
    icon: "📍",
    active: true        // Highlights as current/selected
  },
  {
    id: "restricted",
    label: "Premium Feature",
    icon: "🔒",
    disabled: true      // Grayed out, not clickable
  },
  {
    id: "normal",
    label: "Available Option",
    icon: "✅"
  }
];

<DDMenu items={menuItems} />`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>7. Persistent Menu (closeOnClick = false)</h3>
          <p className="note">
            Keep the menu open after clicking items. Perfect for multi-select
            scenarios, filter menus, or menus with checkboxes and toggles.
          </p>
          <DDMenu
            items={baseItems}
            theme={theme}
            size={size}
            closeOnClick={false}
            trigger={<button className="pill">closeOnClick = false</button>}
            onItemClick={onItemClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const [selectedFilters, setSelectedFilters] = useState([]);

const filterItems = [
  { id: "category1", label: "Electronics" },
  { id: "category2", label: "Clothing" },
  { id: "category3", label: "Books" }
];

const handleFilterClick = (item) => {
  setSelectedFilters(prev => 
    prev.includes(item.id)
      ? prev.filter(id => id !== item.id)
      : [...prev, item.id]
  );
};

<DDMenu
  items={filterItems}
  closeOnClick={false}    // Menu stays open
  onItemClick={handleFilterClick}
  trigger={<button>Filters</button>}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>8. Advanced: Event Handlers</h3>
          <p className="note">
            Listen to hover and font size changes with custom event handlers.
            Perfect for analytics, tooltips, or dynamic UI updates.
          </p>
          <DDMenu
            items={baseItems}
            theme={theme}
            size={size}
            onItemClick={onItemClick}
            onHoverChange={(isHovering) => {
              console.log("Menu hover state:", isHovering);
            }}
            onFontSizeChange={(fontSize) => {
              console.log("Font size changed to:", fontSize);
            }}
            closeOnClick={closeOnClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`<DDMenu
  items={items}
  onItemClick={(item) => {
    console.log('Item clicked:', item);
    // Handle navigation, state updates, etc.
  }}
  onHoverChange={(isHovering) => {
    console.log('Menu hover state:', isHovering);
    // Show/hide tooltips, track engagement, etc.
  }}
  onFontSizeChange={(fontSize) => {
    console.log('Font size changed to:', fontSize);
    // Update related UI elements, save preferences, etc.
  }}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>9. Advanced: Custom Styling</h3>
          <p className="note">
            Apply custom CSS classes and inline styles for complete visual
            control. Combine with theme variables for consistent styling.
          </p>
          <DDMenu
            items={baseItems}
            theme={theme}
            size={size}
            className="my-custom-menu"
            style={
              {
                "--dd-accent": "#ff6b6b",
                "--dd-radius-md": "12px",
              } as React.CSSProperties
            }
            onItemClick={onItemClick}
            closeOnClick={closeOnClick}
            hoverDelay={hoverDelay}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`// Custom CSS class
.my-custom-menu {
  --dd-accent: #ff6b6b;
  --dd-radius-md: 12px;
  border: 2px solid var(--dd-accent);
}

// Apply custom styling
<DDMenu
  items={items}
  className="my-custom-menu"
  style={{
    '--dd-accent': '#ff6b6b',
    '--dd-radius-md': '12px'
  } as React.CSSProperties}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>3. Custom Search Configuration</h3>
          <p className="note">
            Configure search behavior: case sensitivity, minimum search length, 
            debounce timing, and custom search keys.
          </p>
          <DDSearchable
            items={baseItems}
            placeholder="Case-sensitive search (min 2 chars)"
            caseSensitive={true}
            minSearchLength={2}
            debounceMs={500}
            searchKeys={["label", "id"]}
            onSearchChange={(term: string) => console.log("Search term:", term)}
            theme={theme}
            size={size as DDSearchableSize}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`<DDSearchable
  items={items}
  caseSensitive={true}
  minSearchLength={2}
  debounceMs={500}
  searchKeys={["label", "id"]}
  onSearchChange={(term: string) => console.log("Search:", term)}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>4. Allow Custom Values</h3>
          <p className="note">
            Enable users to add custom values that don't exist in the predefined list.
          </p>
          <DDSearchable
            items={baseItems.slice(0, 3)}
            placeholder="Type anything, even custom values"
            allowCustomValue={true}
            onCustomValue={(value: string) => alert(`Custom value added: "${value}"`)}
            onItemSelect={(item: MenuItem | null) => alert(`Selected: ${item?.label}`)}
            theme={theme}
            size={size as DDSearchableSize}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`<DDSearchable
  items={items}
  allowCustomValue={true}
  onCustomValue={(value) => {
    // Handle custom value
    console.log('Custom value:', value);
    // You could add it to your items list
  }}
  placeholder="Type anything..."
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>5. Controlled Component</h3>
          <p className="note">
            Control the selected item externally and clear the selection.
          </p>
          <div style={{ marginBottom: "1rem" }}>
            <button 
              onClick={() => setSelectedSearchItem(baseItems[0])}
              style={{ marginRight: "0.5rem" }}
            >
              Select "Home"
            </button>
            <button onClick={() => setSelectedSearchItem(null)}>
              Clear Selection
            </button>
          </div>
          <DDSearchable
            items={baseItems}
            selectedItem={selectedSearchItem}
            placeholder="Controlled searchable dropdown"
            onItemSelect={setSelectedSearchItem}
            clearable={true}
            theme={theme}
            size={size as DDSearchableSize}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const [selectedItem, setSelectedItem] = useState(null);

<DDSearchable
  items={items}
  selectedItem={selectedItem}
  onItemSelect={setSelectedItem}
  clearable={true}
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>6. Nested Items Support</h3>
          <p className="note">
            Search through nested menu structures with hierarchical display.
          </p>
          <DDSearchable
            items={baseItems}
            placeholder="Search nested items..."
            maxHeight={250}
            noResultsText="No matching items found"
            theme={theme}
            size={size as DDSearchableSize}
          />
          <div className="spacer" />
          <details className="code-sample">
            <summary>📝 Usage Code</summary>
            <pre>
              <code>{`const nestedItems = [
  {
    id: "products",
    label: "Products",
    children: [
      { id: "electronics", label: "Electronics" },
      { id: "clothing", label: "Clothing" }
    ]
  }
];

<DDSearchable
  items={nestedItems}
  maxHeight={250}
  noResultsText="No matches found"
/>`}</code>
            </pre>
          </details>
        </div>

        <div className="card">
          <h3>🚀 Getting Started</h3>
          <div className="getting-started">
            <div className="step">
              <div className="step-number">1</div>
              <div className="step-content">
                <h4>Install the package</h4>
                <pre>
                  <code>npm install @asafarim/dd-menu</code>
                </pre>
              </div>
            </div>
            <div className="step">
              <div className="step-number">2</div>
              <div className="step-content">
                <h4>Import the components</h4>
                <pre>
                  <code>{`import DDMenu, { DDSearchable } from "@asafarim/dd-menu";`}</code>
                </pre>
              </div>
            </div>
            <div className="step">
              <div className="step-number">3</div>
              <div className="step-content">
                <h4>Define your menu items</h4>
                <pre>
                  <code>{`const items = [
  { id: "home", label: "Home", icon: "🏠" },
  { id: "about", label: "About", icon: "ℹ️" }
];`}</code>
                </pre>
              </div>
            </div>
            <div className="step">
              <div className="step-number">4</div>
              <div className="step-content">
                <h4>Use the components</h4>
                <pre>
                  <code>{`<DDMenu
  items={items}
  onItemClick={(item) => console.log(item)}
/>

<DDSearchable
  items={items}
  onItemSelect={(item) => console.log(item)}
/>`}</code>
                </pre>
              </div>
            </div>
          </div>
        </div>
      </div> : <RoadmapView />}
    </div>
  );

  function TT() {
    return (
      <ThemeToggle
        size={
          size === "xs"
            ? "sm"
            : size === "2xl"
            ? "lg"
            : size === "xl"
            ? "lg"
            : size
        }
        key={theme}
        showLabels={true}
        className="dd-menu--theme-toggle"
        style={{
          fontSize:
            size === "xs"
              ? "12px"
              : size === "sm"
              ? "14px"
              : size === "md"
              ? "16px"
              : size === "lg"
              ? "18px"
              : size === "xl"
              ? "20px"
              : "22px",
        }}
      />
    );
  }
}