FooterBrand Footer

---
/**
 * FooterBrand
 * Footer met groot visueel merkmoment en kleur als achtergrond.
 */
interface Props {
  logo: string;
  slogan: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  bg?: string;
}
const { logo, slogan, links = [], copyright, bg = '#6366f1' } = Astro.props;
---
<footer class="fbrand" style={`background:${bg}`}>
  <div class="fbrand-inner">
    <a href="/" class="fbrand-logo">{logo}</a>
    <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">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
  </div>
</footer>
<style>
  .fbrand { }
  .fbrand-inner { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; 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: -0.04em; }
  .fbrand-slogan { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; color: rgba(255,255,255,0.9); line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
  .fbrand-links { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
  .fbrand-link { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.15s; }
  .fbrand-link:hover { color: #fff; }
  .fbrand-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.4); margin: 0; }
</style>