FooterContact Footer

---
/**
 * FooterContact
 * Footer met prominente contactgegevens en kaart.
 */
interface Props {
  logo?: string;
  tagline?: string;
  address?: string;
  phone?: string;
  email?: string;
  hours?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  mapEmbed?: string;
}
const { logo = 'BLURR', tagline, address, phone, email, hours, links = [], copyright = `© ${new Date().getFullYear()}`, mapEmbed } = Astro.props;
---
<footer class="fc">
  <div class="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">Contact</h3>
      {address && <p class="fc-contact-item"><span>📍</span>{address}</p>}
      {phone && <p class="fc-contact-item"><a href={`tel:${phone.replace(/\s/g,'')}`} class="fc-contact-link"><span>📞</span>{phone}</a></p>}
      {email && <p class="fc-contact-item"><a href={`mailto:${email}`} class="fc-contact-link"><span>✉️</span>{email}</a></p>}
      {hours && <p class="fc-contact-item"><span>🕐</span>{hours}</p>}
    </div>
    {mapEmbed && (
      <div class="fc-map">
        <iframe src={mapEmbed} class="fc-map-frame" loading="lazy" title="Locatie" frameborder="0"></iframe>
      </div>
    )}
  </div>
  <div class="fc-bottom">
    <span class="fc-copy">{copyright}</span>
  </div>
</footer>
<style>
  .fc { background: #0a0a0a; }
  .fc-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; }
  .fc-logo { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -0.04em; margin-bottom: 0.875rem; }
  .fc-tagline { font-size: 0.9375rem; color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0 0 1.5rem; max-width: 280px; }
  .fc-links { display: flex; flex-direction: column; gap: 0.5rem; }
  .fc-link { font-size: 0.875rem; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.15s; }
  .fc-link:hover { color: #fff; }
  .fc-contact-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin: 0 0 1.25rem; }
  .fc-contact-item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: rgba(255,255,255,0.55); margin: 0 0 0.75rem; }
  .fc-contact-link { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
  .fc-contact-link:hover { color: #fff; }
  .fc-map-frame { width: 100%; height: 180px; border-radius: 0.5rem; opacity: 0.7; }
  .fc-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.25rem 2rem; text-align: center; }
  .fc-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.2); }
  @media (max-width: 768px) { .fc-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
</style>