@repobit/dex-system-design 0.22.11 → 0.23.1

package/src/components/footer/footer.stories.js

@@ -2,439 +2,214 @@ import { html } from 'lit';
 import './footer.js';
 
 export default {
-  title        : 'Components/Footer/BdFooter',
-  component    : 'bd-footer',
-  subcomponents: {
-    'bd-footer-nav'        : 'bd-footer-nav',
-    'bd-footer-links-group': 'bd-footer-links-group'
-  },
+  title     : 'Components/Footer',
   tags      : ['autodocs'],
   parameters: {
-    layout: 'fullscreen',
-    docs  : {
+    docs: {
       description: {
-        component: 'A comprehensive footer component with multi-language support, organized link sections, and responsive layout. Perfect for corporate websites with international audiences.'
+        component: `
+**BdFooter** is a full Lit footer component with locale detection, country selector, social links, nav slots, and responsive behavior.
+
+### Usage
+\`\`\`html
+<bd-footer current-locale="en">
+  <bd-footer-nav-menu slot="nav">...</bd-footer-nav-menu>
+  <bd-footer-links-group slot="quick-links" title="Products">
+    <bd-link href="/antivirus">Antivirus</bd-link>
+  </bd-footer-links-group>
+  <div slot="secondary-nav">...</div>
+  <div slot="address">123 Main Street, San Antonio, TX</div>
+</bd-footer>
+\`\`\`
+
+### Slots
+| Slot | Description |
+|---|---|
+| \`logo\` | Footer logo (defaults to BD logo asset) |
+| \`top-right\` | Masterbrand image area |
+| \`nav\` | Main footer navigation |
+| \`quick-links\` | Link group columns |
+| \`social-links\` | Social media icon links |
+| \`secondary-nav\` | Legal/policy links, Impressum (shown for de/de-de) |
+| \`address\` | Physical address block |
+| \`copyright\` | Copyright text |
+| \`anpc\` | Romanian ANPC compliance image |
+
+### Responsive Behavior
+| Width | Behavior |
+|---|---|
+| \`≤ 767px\` | Mobile layout, extra dividers, mobile masterbrand image |
+| \`> 767px\` | Desktop layout |
+
+### Country Selector
+- Clicking the country toggle opens a 3-column country grid
+- Selecting a country navigates to \`/{locale}/\`
+- Locale is auto-detected from \`window.location.pathname\`
+
+### Locale-specific Features
+- \`de\` / \`de-de\`: Shows Impressum link in secondary nav
+- \`ro*\`: Shows ANPC compliance image
+        `
       }
     }
   },
   argTypes: {
+    currentLocale: {
+      control    : 'text',
+      description: 'Active locale code. Affects nav link paths and locale-specific features.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'en' }, category: 'Locale' }
+    },
     maxColumnsPerRow: {
-      control    : { type: 'number', min: 1, max: 4 },
-      description: 'Maximum number of columns per row in the quick links section',
-      table      : {
-        type        : { summary: 'number' },
-        defaultValue: { summary: '3' }
-      }
+      control    : 'number',
+      description: 'Max columns per row in the quick-links grid',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: '2' }, category: 'Layout' }
     }
   }
 };
 
-export const Default = () => html`
-  <bd-footer maxColumnsPerRow="3">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/en/consumer/">For Consumer</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/small-business/">For Small Business</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/business/">For Enterprise</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/partners/">For Partners</a>
-    </bd-footer-nav>
-    <bd-footer-links-group slot="quick-links" title="Quick links">
-      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
-      <a href="https://www.bitdefender.com/en-us/cyberpedia/">Bitdefender Cyberpedia</a>
-      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
-      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
-    </bd-footer-links-group>
-
-    <bd-footer-links-group slot="quick-links">
-      <a href="https://www.bitdefender.com/consumer/support/">Support for Home Products</a>
-      <a href="https://www.bitdefender.com/business/support/">Support for Business Products</a>
-      <a href="/company/">Investors</a>
-      <a href="/company/job-opportunities/">Careers</a>
-      <a href="/business/infozone/">InfoZone</a>
-    </bd-footer-links-group>
-
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/sitemap/">Site Map</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/company/">Company</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="#">Privacy Settings</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="#" class="impressum-link">Impressum</a>
-    </bd-footer-nav>
-  </bd-footer>
+const quickLinks = html`
+  <bd-footer-links-group slot="quick-links" title="Products">
+    <bd-link href="/antivirus" kind="light">Antivirus</bd-link>
+    <bd-link href="/total-security" kind="light">Total Security</bd-link>
+    <bd-link href="/vpn" kind="light">VPN</bd-link>
+  </bd-footer-links-group>
+  <bd-footer-links-group slot="quick-links" title="Support">
+    <bd-link href="/support" kind="light">Help Center</bd-link>
+    <bd-link href="/contact" kind="light">Contact Us</bd-link>
+    <bd-link href="/community" kind="light">Community</bd-link>
+  </bd-footer-links-group>
 `;
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default English footer with complete navigation structure. Includes main audience navigation, quick links sections, and secondary legal links with proper vertical dividers.'
-    }
-  }
-};
 
-export const Romanian = () => html`
-  <bd-footer maxColumnsPerRow="3">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/ro-ro/consumer/">Pentru Consumatori</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/ro-ro/small-business/">Pentru Afaceri Mici</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/ro-ro/business/">Pentru Întreprinderi</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/ro-ro/partners/">Pentru Parteneri</a>
-    </bd-footer-nav>
-    
-    <bd-footer-links-group slot="quick-links" title="Linkuri rapide">
-      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
-      <a href="https://www.bitdefender.com/ro-ro/cyberpedia/">Bitdefender Cyberpedia</a>
-      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
-      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
-    </bd-footer-links-group>
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-    <bd-footer-links-group slot="quick-links">
-      <a href="https://www.bitdefender.com/consumer/support/">Suport pentru Produse Casnice</a>
-      <a href="https://www.bitdefender.com/business/support/">Suport pentru Produse Business</a>
-      <a href="/company/">Investitori</a>
-      <a href="/company/job-opportunities/">Cariere</a>
-      <a href="/business/infozone/">InfoZone</a>
-    </bd-footer-links-group>
-
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Informații Legale</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Politica de Confidențialitate</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/sitemap/">Harta Site</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/company/">Companie</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="https://www.bitdefender.com/consumer/support/">Contactați-ne</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="#">Setări Confidențialitate</a>
-    </bd-footer-nav>
-  </bd-footer>
-`;
-Romanian.parameters = {
-  docs: {
-    description: {
-      story: 'Romanian language footer with localized content. Demonstrates internationalization support with proper Romanian translations for all navigation items and link groups.'
-    }
-  }
+export const Default = {
+  name  : 'Default (English)',
+  render: () => html`
+    <bd-footer current-locale="en">
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Default English locale footer with quick links. Social links use default slot values.' } } }
 };
 
-export const German = () => html`
-  <bd-footer maxColumnsPerRow="3">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/de-de/consumer/">Für Verbraucher</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/de-de/small-business/">Für Kleinunternehmen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/de-de/business/">Für Unternehmen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/de-de/partners/">Für Partner</a>
-    </bd-footer-nav>
-    
-    <bd-footer-links-group slot="quick-links" title="Schnelllinks">
-      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
-      <a href="https://www.bitdefender.com/de-de/cyberpedia/">Bitdefender Cyberpedia</a>
-      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
-      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
-    </bd-footer-links-group>
-
-    <bd-footer-links-group slot="quick-links">
-      <a href="https://www.bitdefender.com/consumer/support/">Support für Home-Produkte</a>
-      <a href="https://www.bitdefender.com/business/support/">Support für Business-Produkte</a>
-      <a href="/company/">Investoren</a>
-      <a href="/company/job-opportunities/">Karriere</a>
-      <a href="/business/infozone/">InfoZone</a>
-    </bd-footer-links-group>
-
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Rechtliche Informationen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Datenschutzrichtlinie</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/sitemap/">Sitemap</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/company/">Unternehmen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="https://www.bitdefender.com/consumer/support/">Kontakt</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="#">Datenschutzeinstellungen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="#" class="impressum-link">Impressum</a>
-    </bd-footer-nav>
-  </bd-footer>
-`;
-German.parameters = {
-  docs: {
-    description: {
-      story: 'German language footer with complete localization. Includes German-specific legal requirements like Impressum and proper translations for all user-facing text.'
-    }
-  }
+export const RomanianLocale = {
+  name  : 'Romanian Locale (ro)',
+  render: () => html`
+    <bd-footer current-locale="ro">
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: '`current-locale="ro"` — ANPC compliance image is shown in the footer extras.' } } }
 };
 
-export const WithDividers = () => html`
-  <div>
-    <bd-footer maxColumnsPerRow="3">
-      <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-        <a href="/en/consumer/">For Consumer</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/en/small-business/">For Small Business</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/en/business/">For Enterprise</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/en/partners/">For Partners</a>
-      </bd-footer-nav>
-      
-      <bd-footer-links-group slot="quick-links" title="Quick links">
-        <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-        <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
-      </bd-footer-links-group>
-
-      <bd-footer-nav slot="secondary-nav">
-        <a href="/legal/">Legal Information</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/privacy/">Privacy Policy</a>
-      </bd-footer-nav>
+export const GermanLocale = {
+  name  : 'German Locale (de)',
+  render: () => html`
+    <bd-footer current-locale="de">
+      ${quickLinks}
+      <div slot="secondary-nav">
+        <bd-link href="/privacy" kind="secondary">Privacy Policy</bd-link>
+        <bd-divider-vertical></bd-divider-vertical>
+        <bd-link href="/terms" kind="secondary">Terms</bd-link>
+        <bd-divider-vertical class="impressum-link"></bd-divider-vertical>
+        <bd-link href="/impressum" kind="secondary" class="impressum-link">Impressum</bd-link>
+      </div>
     </bd-footer>
-
-    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
-    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
-    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
-    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
-  </div>
-`;
-WithDividers.parameters = {
-  docs: {
-    description: {
-      story: 'Footer demonstration with additional horizontal dividers. Shows how the footer integrates with other divider components to create visual separation in page layouts.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: '`current-locale="de"` — Impressum link is visible in the secondary nav.' } } }
 };
 
-export const MinimalFooter = () => html`
-  <bd-footer maxColumnsPerRow="2">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/en/consumer/">For Consumer</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/business/">For Business</a>
-    </bd-footer-nav>
-    
-    <bd-footer-links-group slot="quick-links" title="Resources">
-      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-      <a href="https://www.bitdefender.com/consumer/support/">Support</a>
-    </bd-footer-links-group>
-
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Legal</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/privacy/">Privacy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/contact/">Contact</a>
-    </bd-footer-nav>
-  </bd-footer>
-`;
-MinimalFooter.parameters = {
-  docs: {
-    description: {
-      story: 'Minimal footer variant with reduced content. Ideal for landing pages or simpler site sections where a full footer is not required.'
-    }
-  }
+export const WithCustomLogo = {
+  name  : 'Custom Logo Slot',
+  render: () => html`
+    <bd-footer current-locale="en">
+      <span slot="logo">
+        <img src="/assets/custom-logo.png" alt="Custom Logo" style="height:32px;">
+      </span>
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Custom logo injected via the `logo` slot.' } } }
 };
 
-export const SingleColumnLayout = () => html`
-  <bd-footer maxColumnsPerRow="1">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/en/consumer/">For Consumer</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/small-business/">For Small Business</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/business/">For Enterprise</a>
-    </bd-footer-nav>
-    
-    <bd-footer-links-group slot="quick-links" title="All Links">
-      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-      <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
-      <a href="https://www.bitdefender.com/consumer/support/">Support for Home</a>
-      <a href="https://www.bitdefender.com/business/support/">Support for Business</a>
-      <a href="/company/">Company</a>
-      <a href="/careers/">Careers</a>
-    </bd-footer-links-group>
-
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/contact/">Contact Us</a>
-    </bd-footer-nav>
-  </bd-footer>
-`;
-SingleColumnLayout.parameters = {
-  docs: {
-    description: {
-      story: 'Single column footer layout. Forces all quick links into one column, useful for narrow layouts or mobile-optimized designs.'
-    }
-  }
+export const WithCustomAddress = {
+  name  : 'Custom Address Slot',
+  render: () => html`
+    <bd-footer current-locale="en">
+      ${quickLinks}
+      <div slot="address">
+        Bd. Dimitrie Pompeiu 6A, Bucharest, Romania
+      </div>
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Address slot overridden with a custom Romanian office address.' } } }
 };
 
-export const FourColumnLayout = () => html`
-  <bd-footer maxColumnsPerRow="4">
-    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
-      <a href="/en/consumer/">For Consumer</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/small-business/">For Small Business</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/business/">For Enterprise</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/partners/">For Partners</a>
-    </bd-footer-nav>
-    
-    <bd-footer-links-group slot="quick-links" title="Platforms">
-      <a href="https://central.bitdefender.com/">Central</a>
-      <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
-      <a href="https://www.bitdefender.com/cyberpedia/">Cyberpedia</a>
-    </bd-footer-links-group>
-
-    <bd-footer-links-group slot="quick-links" title="Support">
-      <a href="https://www.bitdefender.com/consumer/support/">Home Products</a>
-      <a href="https://www.bitdefender.com/business/support/">Business Products</a>
-    </bd-footer-links-group>
+export const WithCustomCopyright = {
+  name  : 'Custom Copyright Slot',
+  render: () => html`
+    <bd-footer current-locale="en">
+      ${quickLinks}
+      <span slot="copyright">© 2025 Bitdefender. All rights reserved.</span>
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Copyright text replaced via the `copyright` slot.' } } }
+};
 
-    <bd-footer-links-group slot="quick-links" title="Company">
-      <a href="/company/">About</a>
-      <a href="/careers/">Careers</a>
-      <a href="/investors/">Investors</a>
-    </bd-footer-links-group>
+export const WithCustomSocialLinks = {
+  name  : 'Custom Social Links',
+  render: () => html`
+    <bd-footer current-locale="en">
+      ${quickLinks}
+      <div slot="social-links" style="display:flex; gap:12px;">
+        <a href="https://facebook.com/bitdefender" aria-label="Facebook">FB</a>
+        <a href="https://twitter.com/bitdefender" aria-label="Twitter">TW</a>
+        <a href="https://linkedin.com/company/bitdefender" aria-label="LinkedIn">LI</a>
+      </div>
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Social links replaced with custom content via the `social-links` slot.' } } }
+};
 
-    <bd-footer-links-group slot="quick-links" title="Resources">
-      <a href="/blog/">Blog</a>
-      <a href="/news/">News</a>
-      <a href="/events/">Events</a>
-    </bd-footer-links-group>
+export const NoQuickLinks = {
+  name  : 'No Quick Links',
+  render: () => html`
+    <bd-footer current-locale="en"></bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Footer with no `quick-links` slot content — the grid area is empty.' } } }
+};
 
-    <bd-footer-nav slot="secondary-nav">
-      <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/sitemap/">Site Map</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/contact/">Contact</a>
-    </bd-footer-nav>
-  </bd-footer>
-`;
-FourColumnLayout.parameters = {
-  docs: {
-    description: {
-      story: 'Four column footer layout. Maximizes horizontal space usage for wide screens with multiple categorized link groups in a dense but organized arrangement.'
-    }
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-footer current-locale="en">
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Footer at 375px. Mobile masterbrand image is used, extra dividers are rendered, and layout switches to single-column.' } }
   }
 };
 
-export const CustomizableFooter = (args) => html`
-  <bd-footer maxColumnsPerRow="${args.maxColumnsPerRow}">
-    <bd-footer-nav slot="nav" class="footer-nav-main" ?bold="${args.boldNav}">
-      <a href="/en/consumer/">For Consumer</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-      <a href="/en/small-business/">For Small Business</a>
-      ${args.showEnterprise
-        ? html`
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/en/business/">For Enterprise</a>
-      `
-        : ''}
-      ${args.showPartners
-        ? html`
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/en/partners/">For Partners</a>
-      `
-        : ''}
-    </bd-footer-nav>
-    
-    ${args.showQuickLinks
-      ? html`
-      <bd-footer-links-group slot="quick-links" title="${args.quickLinksTitle}">
-        <a href="https://central.bitdefender.com/">Bitdefender Central</a>
-        <a href="https://gravityzone.bitdefender.com/">GravityZone</a>
-        ${args.showCyberpedia ? html`<a href="https://www.bitdefender.com/cyberpedia/">Cyberpedia</a>` : ''}
-      </bd-footer-links-group>
-    `
-      : ''}
-
-    ${args.showSecondaryNav
-      ? html`
-      <bd-footer-nav slot="secondary-nav">
-        <a href="/legal/">Legal Information</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-        <a href="/privacy/">Privacy Policy</a>
-        ${args.showContact
-          ? html`
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="/contact/">Contact Us</a>
-        `
-          : ''}
-      </bd-footer-nav>
-    `
-      : ''}
-  </bd-footer>
-`;
-CustomizableFooter.args = {
-  maxColumnsPerRow: 3,
-  boldNav         : true,
-  showEnterprise  : true,
-  showPartners    : true,
-  showQuickLinks  : true,
-  quickLinksTitle : 'Quick Links',
-  showCyberpedia  : true,
-  showSecondaryNav: true,
-  showContact     : true
-};
-CustomizableFooter.argTypes = {
-  maxColumnsPerRow: {
-    control: { type: 'number', min: 1, max: 4 }
-  },
-  boldNav: {
-    control: 'boolean'
-  },
-  showEnterprise: {
-    control: 'boolean'
-  },
-  showPartners: {
-    control: 'boolean'
-  },
-  showQuickLinks: {
-    control: 'boolean'
-  },
-  quickLinksTitle: {
-    control: 'text'
-  },
-  showCyberpedia: {
-    control: 'boolean'
-  },
-  showSecondaryNav: {
-    control: 'boolean'
-  },
-  showContact: {
-    control: 'boolean'
-  }
+export const CountrySelector = {
+  name  : 'Country Selector (open state)',
+  render: () => html`
+    <p style="font-size:14px; margin-bottom:8px;">Click the country toggle button at the bottom of the footer to open the country selector.</p>
+    <bd-footer current-locale="en">
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Click the country dropdown toggle to open the 3-column country selector grid. Selecting a country navigates to `/{locale}/`.' } } }
 };
-CustomizableFooter.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive footer with customizable options. Use the controls panel to toggle different sections and adjust the layout to see how the footer adapts to various configurations.'
-    }
-  }
+
+export const Playground = {
+  name  : '🛝 Playground',
+  args  : { currentLocale: 'en', maxColumnsPerRow: 2 },
+  render: (args) => html`
+    <bd-footer current-locale="${args.currentLocale}" max-columns-per-row="${args.maxColumnsPerRow}">
+      ${quickLinks}
+    </bd-footer>
+  `,
+  parameters: { docs: { description: { story: 'Interactive playground. Change `currentLocale` to `ro` or `de` to see locale-specific features.' } } }
 };