FooterMega Footer

---
/**
 * FooterMega
 * Multi-koloms footer met featured section bovenaan, newsletter, social links.
 * Modern Retail — gestructureerd, professioneel.
 */
interface FooterLink { label: string; href: string; }
interface FooterColumn { heading: string; links: FooterLink[]; }

interface Props {
  logo?: string;
  logoText?: string;
  tagline?: string;
  featured?: { label: string; description: string; ctaLabel: string; ctaHref: string; };
  columns: FooterColumn[];
  newsletterHeading?: string;
  newsletterPlaceholder?: string;
  socials?: { platform: string; href: string; }[];
  bottomLinks?: FooterLink[];
  copyright?: string;
}

const {
  logo,
  logoText = 'Brand',
  tagline,
  featured,
  columns = [],
  newsletterHeading,
  newsletterPlaceholder = 'Jouw e-mailadres',
  socials = [],
  bottomLinks = [],
  copyright = `© ${new Date().getFullYear()} All rights reserved.`,
} = Astro.props;

const socialIcons: Record<string, string> = {
  instagram: `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>`,
  linkedin: `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>`,
  twitter: `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.633 5.905-5.633zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
  facebook: `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>`,
};
---

<footer class="fm" data-component="footer-mega">
  <!-- Featured strip -->
  {featured && (
    <div class="fm__featured">
      <div class="fm__featured-inner">
        <div class="fm__featured-text">
          <p class="fm__featured-label">{featured.label}</p>
          <p class="fm__featured-desc">{featured.description}</p>
        </div>
        <a href={featured.ctaHref} class="fm__featured-cta">{featured.ctaLabel} →</a>
      </div>
    </div>
  )}

  <div class="fm__body">
    <div class="fm__inner">
      <!-- Brand col -->
      <div class="fm__brand">
        <a href="/" class="fm__logo">
          {logo ? <img src={logo} alt={logoText} class="fm__logo-img" /> : (
            <span class="fm__logo-text">{logoText}</span>
          )}
        </a>
        {tagline && <p class="fm__tagline">{tagline}</p>}

        {socials.length > 0 && (
          <div class="fm__socials">
            {socials.map(s => (
              <a href={s.href} class="fm__social" target="_blank" rel="noopener" aria-label={s.platform}>
                <Fragment set:html={socialIcons[s.platform] ?? s.platform} />
              </a>
            ))}
          </div>
        )}

        {newsletterHeading && (
          <div class="fm__newsletter">
            <p class="fm__newsletter-label">{newsletterHeading}</p>
            <form class="fm__newsletter-form" onsubmit="return false">
              <input type="email" placeholder={newsletterPlaceholder} class="fm__newsletter-input" />
              <button type="submit" class="fm__newsletter-btn">→</button>
            </form>
          </div>
        )}
      </div>

      <!-- Link columns -->
      {columns.map(col => (
        <div class="fm__col">
          <h3 class="fm__col-heading">{col.heading}</h3>
          <ul class="fm__col-links">
            {col.links.map(link => (
              <li><a href={link.href} class="fm__col-link">{link.label}</a></li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>

  <!-- Bottom bar -->
  <div class="fm__bottom">
    <div class="fm__bottom-inner">
      <p class="fm__copyright">{copyright}</p>
      {bottomLinks.length > 0 && (
        <div class="fm__bottom-links">
          {bottomLinks.map(link => (
            <a href={link.href} class="fm__bottom-link">{link.label}</a>
          ))}
        </div>
      )}
    </div>
  </div>
</footer>

<style>
  .fm {
    background: var(--color-primary, #0a0a0a);
    color: rgba(255,255,255,0.7);
  }

  /* Featured */
  .fm__featured {
    background: var(--color-accent, #6366f1);
    padding: 1.25rem 1.5rem;
  }

  .fm__featured-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .fm__featured-label {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
  }

  .fm__featured-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
  }

  .fm__featured-cta {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius, 0.5rem);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background 0.2s;
  }

  .fm__featured-cta:hover { background: rgba(255,255,255,0.3); }

  /* Body */
  .fm__body {
    padding: 4rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .fm__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.75fr 1fr 1fr 1fr;
    gap: 3rem;
  }

  /* Brand */
  .fm__logo { text-decoration: none; display: inline-block; margin-bottom: 1rem; }
  .fm__logo-img { height: 28px; }
  .fm__logo-text { font-size: 1.125rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; }

  .fm__tagline {
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 26ch;
  }

  .fm__socials {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
  }

  .fm__social {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }

  .fm__social:hover {
    background: var(--color-accent, #6366f1);
    color: #fff;
  }

  /* Newsletter */
  .fm__newsletter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .fm__newsletter-form {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius, 0.5rem);
    overflow: hidden;
  }

  .fm__newsletter-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: none;
    padding: 0.625rem 0.875rem;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
  }

  .fm__newsletter-input::placeholder { color: rgba(255,255,255,0.3); }

  .fm__newsletter-btn {
    background: var(--color-accent, #6366f1);
    border: none;
    color: #fff;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    transition: filter 0.15s;
  }

  .fm__newsletter-btn:hover { filter: brightness(1.15); }

  /* Columns */
  .fm__col-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1rem;
  }

  .fm__col-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fm__col-link {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.15s;
  }

  .fm__col-link:hover { color: #fff; }

  /* Bottom */
  .fm__bottom { padding: 1.25rem 1.5rem; }

  .fm__bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .fm__copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.3); }

  .fm__bottom-links { display: flex; gap: 1.5rem; }

  .fm__bottom-link {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    transition: color 0.15s;
  }

  .fm__bottom-link:hover { color: rgba(255,255,255,0.7); }

  @media (max-width: 768px) {
    .fm__inner {
      grid-template-columns: 1fr 1fr;
    }

    .fm__brand {
      grid-column: 1 / -1;
    }

    .fm__bottom-inner { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 480px) {
    .fm__inner { grid-template-columns: 1fr; }
  }
</style>