Act as a product designer and front-end engineer. Build a tabbed showcase for {{business_name}}: one tab per use case or role ({{user_roles}}), showing how {{features}} work for each. Style: {{visual_style}}. Use the existing Tabs component if there is one and check it against the pattern below. Each panel: a headline, two sentences, 3 specifics, a link, and a real screenshot or short muted video with controls and a poster. Tabs pattern: - a tablist with tabs carrying aria-selected and aria-controls; roving tabindex so Tab enters once and arrows move between tabs, with Home and End - automatic activation when panels are already rendered; manual (Enter or Space) if a panel loads content - the panel has role tabpanel and tabindex 0 so keyboard users can reach its text - the selected tab is in the URL (query or hash), so a link opens the right tab Rendering: all panels in the HTML so search engines and find-in-page see them; inactive panels hidden. Reserve the tallest panel's height with a min-height so switching doesn't jump the page. Preload the next panel's image on tab hover or focus. Layout: 1280: tabs as a row above a 12-column panel (text 5, media 7); 768: tabs row, panel stacked; 360: the tablist scrolls sideways with scroll-snap, a fade on the edge that has more, and the active tab scrolled into view. Tabs 44px tall, 15 to 16px labels, weight 500, active weight 600 with a 2px indicator. States: hover, focus-visible, selected; a long label wraps or truncates with the full name kept; one tab means no tablist at all. Motion: the indicator slides in 200ms ease-out and panels cross-fade in 150ms; instant under prefers-reduced-motion. Avoid: auto-rotating tabs, tabs that are secretly links to other pages, panels that load blank first, five tabs saying the same thing. Return the change list.