{
  "name": "feature/horizontal-tabs",
  "type": "registry:component",
  "description": "Horizontal tab layout for feature comparison",
  "files": [
    {
      "path": "example/Feature/SectionFeature_HorizontalTabs.astro",
      "type": "registry:component",
      "content": "---\nimport Card from '@@/components/ui/Card.astro';\nimport Tabs from '@@/components/ui/Tabs.astro';\nimport TabsContent from '@@/components/ui/TabsContent.astro';\nimport TabsList from '@@/components/ui/TabsList.astro';\nimport TabsTrigger from '@@/components/ui/TabsTrigger.astro';\nimport { Icon } from 'astro-icon/components';\nimport image1 from '@/assets/placeholder.png';\nimport image2 from '@/assets/placeholder.png';\nimport image3 from '@/assets/placeholder.png';\nimport image4 from '@/assets/placeholder.png';\n\ninterface FeatureTabItem {\n  id: string;\n  title: string;\n  description: string;\n  bullets: string[];\n  image: ImageMetadata;\n}\n\nconst featureTabItems: FeatureTabItem[] = [\n  {\n    id: 'strategy',\n    title: 'Content Strategy',\n    description:\n      'Define the intent behind your hero, feature, and pricing sections so Pablo can compose the right narrative and structure for each audience touchpoint.',\n    bullets: [\n      'Set the primary goal and supporting talking points for every section',\n      'Map call-to-actions to the journey stage you want visitors to take',\n    ],\n    image: image1,\n  },\n  {\n    id: 'generation',\n    title: 'Layout Generation',\n    description:\n      'Generate tailored layouts that fit your content density—switch between compact grids, storytelling tabs, or immersive split views without rewriting copy.',\n    bullets: [\n      'Preview responsive variants before committing to a direction',\n      'Apply brand colors and typography automatically from the style pack',\n    ],\n    image: image2,\n  },\n  {\n    id: 'collaboration',\n    title: 'Collaboration',\n    description:\n      'Leave inline comments, share previews, and track feedback so designers and PMs can align on launch pages without handing off Figma files.',\n    bullets: [\n      \"Assign owners to sections and lock copy when it's approved\",\n      'Export structured data to your CMS or deploy directly from Pablo',\n    ],\n    image: image3,\n  },\n  {\n    id: 'performance',\n    title: 'Performance Insights',\n    description:\n      'Understand engagement and conversion impact per section, then spin up A/B variants using the same layout primitives without rebuilding content blocks.',\n    bullets: [\n      'Track hero impressions, CTA clicks, and scroll depth by layout',\n      'Pipe data into your analytics stack or automate weekly summaries',\n    ],\n    image: image4,\n  },\n];\n---\n\n<section class=\"relative py-20 sm:py-24\" data-scheme=\"bg\">\n  <div class=\"container\">\n    <div class=\"mb-10 text-center\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Layout Gallery\n      </div>\n      <h2\n        class=\"h2 mb-4\"\n\n      >\n        Horizontal Tabs: Compare feature sets at a glance\n      </h2>\n      <p\n        class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\"\n\n      >\n        Keep navigation inline when you want to highlight parity between options\n        while saving vertical space.\n      </p>\n    </div>\n\n    <Tabs\n      defaultValue={featureTabItems[0]?.id}\n      class=\"w-full\"\n      orientation=\"horizontal\"\n    >\n      <TabsList\n        orientation=\"horizontal\"\n        class=\"flex flex-nowrap justify-start gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] lg:justify-center lg:gap-1 [&::-webkit-scrollbar]:hidden\"\n      >\n        {\n          featureTabItems.map((item) => (\n            <TabsTrigger\n              value={item.id}\n              orientation=\"horizontal\"\n              class=\"whitespace-nowrap rounded-[var(--sp-radius-card)] px-1 py-2 text-sm font-medium\"\n            >\n              {item.title}\n            </TabsTrigger>\n          ))\n        }\n      </TabsList>\n\n      {\n        featureTabItems.map((item) => (\n          <TabsContent\n            value={item.id}\n            orientation=\"horizontal\"\n            class=\"min-h-0 w-full rounded-none p-0\"\n          >\n            <Card\n              size={undefined}\n              className=\"flex flex-col gap-0 overflow-hidden p-0 lg:flex-row lg:items-stretch\"\n            >\n              <div class=\"order-1 w-full lg:order-2 lg:w-1/2 lg:flex-shrink-0\">\n                <img\n                  src={item.image.src}\n                  alt=\"Product screenshot\"\n                  class=\"h-full w-full object-cover\"\n                  style=\"aspect-ratio: 4/3; min-height: 400px;\"\n                  width={item.image.width}\n                  height={item.image.height}\n                />\n              </div>\n              <div class=\"order-2 flex flex-1 flex-col justify-center space-y-3 p-6 text-[color:var(--sp-fg)] md:p-8 lg:order-1 lg:p-10\">\n                <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                  {item.title}\n                </h3>\n                <p class=\"text-fg-sub mt-2\">{item.description}</p>\n                <ul class=\"mt-4 space-y-2\">\n                  {item.bullets.map((bullet) => (\n                    <li class=\"text-fg-sub flex items-start gap-2 text-sm\">\n                      <Icon\n                        name=\"lucide:check\"\n                        class=\"mt-0.5 h-4 w-4 flex-shrink-0 text-[color:var(--sp-accent)]\"\n                      />\n                      <span>{bullet}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </Card>\n          </TabsContent>\n        ))\n      }\n    </Tabs>\n  </div>\n</section>\n\n<script>\n  // Center active tab on mobile\n  const tabsList = document.querySelector(\n    '[data-tabs-list][data-orientation=\"horizontal\"]',\n  );\n  if (tabsList) {\n    const centerActiveTab = () => {\n      const activeTab = tabsList.querySelector(\n        '[aria-selected=\"true\"]',\n      ) as HTMLElement;\n      if (!activeTab) return;\n\n      const tabsListRect = tabsList.getBoundingClientRect();\n      const activeTabRect = activeTab.getBoundingClientRect();\n\n      // Calculate scroll position to center the active tab\n      const scrollLeft =\n        activeTab.offsetLeft - (tabsListRect.width - activeTabRect.width) / 2;\n\n      tabsList.scrollTo({\n        left: scrollLeft,\n        behavior: \"smooth\",\n      });\n    };\n\n    // Center active tab on load and resize\n    window.addEventListener(\"load\", centerActiveTab);\n    window.addEventListener(\"resize\", centerActiveTab);\n\n    // Center active tab when tabs are clicked\n    tabsList.addEventListener(\"click\", (e) => {\n      const target = e.target as HTMLElement;\n      const trigger = target.closest(\"[data-tabs-trigger]\");\n      if (trigger) {\n        setTimeout(centerActiveTab, 50); // Wait for aria-selected to update\n      }\n    });\n\n    // Initial center\n    setTimeout(centerActiveTab, 100);\n  }\n</script>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "tabs",
    "tabs-list",
    "tabs-trigger",
    "tabs-content"
  ]
}