FooterContact Footer

---
/**
 * FooterContact — donkere footer met merk + links links en een contact-kolom
 * (adres, telefoon, e-mail, openingstijden) rechts. Copyright onderaan.
 *
 * Props:
 * - logo?: string
 * - tagline?: string
 * - links?: { label: string; href: string }[]
 * - contactTitle?: string
 * - address?: string
 * - phone?: string
 * - email?: string
 * - hours?: string
 * - copyright?: string         (default: "© {jaar}")
 */
interface Props {
  logo?: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  contactTitle?: string;
  address?: string;
  phone?: string;
  email?: string;
  hours?: string;
  copyright?: string;
}

const {
  logo = 'Merk',
  tagline = 'Data-gedreven online marketing voor ambitieuze bedrijven in Nederland.',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Blog', href: '#' },
    { label: 'Privacy', href: '#' },
  ],
  contactTitle = 'Contact',
  address,
  phone,
  email,
  hours,
  copyright,
} = Astro.props;

const year = new Date().getFullYear();
const copyrightText = copyright ?? `© ${year}`;
const telHref = phone ? `tel:${phone.replace(/[^\d+]/g, '')}` : '#';
const mailHref = email ? `mailto:${email}` : '#';
---

<footer class="bl-section fc">
  <div class="bl-inner fc-inner">
    <div class="fc-brand">
      <div class="fc-logo">{logo}</div>
      {tagline && <p class="fc-tagline">{tagline}</p>}
      {links.length > 0 && (
        <nav class="fc-links">
          {links.map(l => <a href={l.href} class="fc-link">{l.label}</a>)}
        </nav>
      )}
    </div>
    <div class="fc-contact">
      <h3 class="fc-contact-title">{contactTitle}</h3>
      {address && <p class="fc-contact-item"><span aria-hidden="true">→</span>{address}</p>}
      {phone && <p class="fc-contact-item"><a href={telHref} class="fc-contact-link"><span aria-hidden="true">→</span>{phone}</a></p>}
      {email && <p class="fc-contact-item"><a href={mailHref} class="fc-contact-link"><span aria-hidden="true">→</span>{email}</a></p>}
      {hours && <p class="fc-contact-item"><span aria-hidden="true">→</span>{hours}</p>}
    </div>
  </div>
  <div class="fc-bottom">
    <div class="bl-inner fc-bottom-inner">
      <span class="fc-copy">{copyrightText}</span>
    </div>
  </div>
</footer>

<style>
.fc{background:#0a0a0a;padding-block:0}
.fc-inner{padding-block:4rem;display:grid;grid-template-columns:2fr 1fr;gap:4rem}
.fc-logo{font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:-.04em;margin-bottom:.875rem}
.fc-tagline{font-size:1rem;color:#aaa;line-height:1.6;margin:0 0 1.5rem;max-width:320px}
.fc-links{display:flex;flex-direction:column;gap:.5rem}
.fc-link{font-size:.9375rem;color:#aaa;text-decoration:none;transition:color .15s}
.fc-link:hover{color:#fff}
.fc-contact-title{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#999;margin:0 0 1.25rem}
.fc-contact-item{display:flex;align-items:flex-start;gap:.625rem;font-size:.9375rem;color:#e8e8e8;margin:0 0 .75rem}
.fc-contact-item span{color:#999;flex-shrink:0}
.fc-contact-link{display:inline-flex;align-items:flex-start;gap:.625rem;color:#e8e8e8;text-decoration:none;transition:color .15s}
.fc-contact-link:hover{color:#fff}
.fc-bottom{border-top:1px solid rgba(255,255,255,.08)}
.fc-bottom-inner{padding-block:1.25rem;text-align:center}
.fc-copy{font-size:.8125rem;color:#999}
@media(max-width:640px){.fc-inner{grid-template-columns:1fr;gap:2.5rem}}
</style>