FooterBrand Footer

---
/**
 * FooterBrand — gecentreerde merk-footer op een volvlak accent-achtergrond:
 * logo, korte slogan, links en copyright. Eén krachtig kleurblok.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - slogan?: string
 * - links?: { label: string; href: string }[]
 * - copyright?: string         (default: "© {jaar}")
 * - background?: string        achtergrondkleur (default merk-accent)
 */
interface Props {
  logo?: string;
  logoHref?: string;
  slogan?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  background?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  slogan = 'Groei die je kunt bewijzen.',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  copyright,
  background = 'var(--color-accent, #6366f1)',
} = Astro.props;

const year = new Date().getFullYear();
const copyrightText = copyright ?? `© ${year}`;
---

<footer class="bl-section fbrand" style={`background:${background}`}>
  <div class="bl-inner bl-inner--narrow fbrand-inner">
    <a href={logoHref} class="fbrand-logo">{logo}</a>
    {slogan && <p class="fbrand-slogan">{slogan}</p>}
    {links.length > 0 && (
      <nav class="fbrand-links">
        {links.map(l => <a href={l.href} class="fbrand-link">{l.label}</a>)}
      </nav>
    )}
    <p class="fbrand-copy">{copyrightText}</p>
  </div>
</footer>

<style>
.fbrand-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
.fbrand-logo{font-weight:900;font-size:1.5rem;color:#fff;text-decoration:none;letter-spacing:-.04em}
.fbrand-slogan{font-size:clamp(1.25rem,3vw,2rem);font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.02em;margin:0}
.fbrand-links{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.fbrand-link{font-size:.9375rem;font-weight:500;color:#ffffffd9;text-decoration:none;transition:color .15s}
.fbrand-link:hover{color:#fff}
.fbrand-copy{font-size:.8125rem;color:#ffffffcc;margin:0}
</style>