FooterNewsletter Footer

---
/**
 * FooterNewsletter — accent nieuwsbrief-band bovenaan met inschrijfformulier,
 * daaronder een lichte link-sectie met merk en kolommen + copyright.
 *
 * Props:
 * - newsletterHeadline?: string
 * - newsletterSub?: string
 * - placeholder?: string
 * - ctaLabel?: string
 * - logo?: string
 * - logoHref?: string
 * - columns?: { title: string; links: { label: string; href: string }[] }[]
 * - copyright?: string         (default: "© {jaar}")
 * - accent?: string
 */
interface FooterColumn { title: string; links: { label: string; href: string }[] }
interface Props {
  newsletterHeadline?: string;
  newsletterSub?: string;
  placeholder?: string;
  ctaLabel?: string;
  logo?: string;
  logoHref?: string;
  columns?: FooterColumn[];
  copyright?: string;
  accent?: string;
}

const {
  newsletterHeadline = 'Marketing insights, direct in je inbox.',
  newsletterSub = 'Wekelijks de beste tips over Google Ads, Meta en SEO. Gratis, altijd opzegbaar.',
  placeholder = 'Jouw e-mailadres',
  ctaLabel = 'Inschrijven →',
  logo = 'Merk',
  logoHref = '/',
  columns = [
    { title: 'Diensten', links: [
      { label: 'Google Ads', href: '#' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
    ] },
    { title: 'Bedrijf', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Cases', href: '#' },
      { label: 'Blog', href: '#' },
    ] },
  ],
  copyright,
  accent = 'var(--color-accent, #6366f1)',
} = Astro.props;

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

<footer class="bl-section fnl" style={`--fnl-ac:${accent}`}>
  <div class="fnl-newsletter">
    <div class="bl-inner fnl-nl-inner">
      <div class="fnl-nl-text">
        <h3 class="fnl-nl-headline">{newsletterHeadline}</h3>
        {newsletterSub && <p class="fnl-nl-sub">{newsletterSub}</p>}
      </div>
      <form class="fnl-nl-form" action="#" method="post">
        <input type="email" name="email" placeholder={placeholder} class="fnl-nl-input" aria-label={placeholder} required />
        <button type="submit" class="fnl-nl-btn">{ctaLabel}</button>
      </form>
    </div>
  </div>
  <div class="fnl-main">
    <div class="bl-inner fnl-main-inner">
      <a href={logoHref} class="fnl-logo">{logo}</a>
      {columns.map(col => (
        <div class="fnl-col">
          <h4 class="fnl-col-title">{col.title}</h4>
          <ul class="fnl-col-links">
            {col.links.map(l => <li><a href={l.href} class="fnl-col-link">{l.label}</a></li>)}
          </ul>
        </div>
      ))}
    </div>
  </div>
  <div class="fnl-bottom-band">
    <div class="bl-inner fnl-bottom">
      <p class="fnl-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.fnl{background:#fff;border-top:1px solid #e5e7eb;padding-block:0}
.fnl-newsletter{background:var(--fnl-ac)}
.fnl-nl-inner{padding-block:3rem;display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.fnl-nl-headline{font-size:1.375rem;font-weight:800;color:#fff;margin:0 0 .25rem;letter-spacing:-.02em}
.fnl-nl-sub{font-size:1rem;color:#ffffffe6;margin:0}
.fnl-nl-text{flex:1;min-width:200px}
.fnl-nl-form{display:flex;gap:.5rem;flex:1;max-width:440px}
.fnl-nl-input{flex:1;padding:.75rem 1rem;font-size:.9375rem;border:none;border-radius:.5rem;outline:none}
.fnl-nl-btn{padding:.75rem 1.5rem;background:#0a0a0a;color:#fff;font-weight:600;font-size:.9375rem;border:none;border-radius:.5rem;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.fnl-nl-btn:hover{opacity:.85}
.fnl-main-inner{padding-block:2.5rem;display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:2rem}
.fnl-logo{font-weight:900;font-size:1.0625rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;align-self:start}
.fnl-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;margin:0 0 .875rem}
.fnl-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fnl-col-link{font-size:.9375rem;color:#4b5563;text-decoration:none;transition:color .15s}
.fnl-col-link:hover{color:#0a0a0a}
.fnl-bottom-band{border-top:1px solid #f1f5f9}
.fnl-bottom{padding-block:1rem 1.5rem}
.fnl-copy{font-size:.8125rem;color:#6b7280;margin:0}
@media(max-width:640px){.fnl-main-inner{grid-template-columns:1fr;gap:1.5rem}}
</style>