world-game/src/components/layout/Footer.svelte

<script>
  import { site } from '@state/site.svelte'
  import { t } from '@i18n'

  const logo    = $derived(site.logo)
  const title   = $derived(site.title || 'World Game')
  const contact = $derived(site.contact || {})
  const socials = $derived(contact.socials ?? [])
  const year    = new Date().getFullYear()

  let email  = $state('')
  let status = $state(null)

  async function handleSubscribe(e) {
    e.preventDefault()
    if (!email) return
    try {
      const res = await fetch('/newsletter.json', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      })
      if (res.ok) {
        status = { type: 'success', message: t('newsletter_success') }
        email = ''
      } else {
        status = { type: 'error', message: t('newsletter_error') }
      }
    } catch {
      status = { type: 'error', message: t('newsletter_error') }
    }
  }
</script>

<footer class="site-footer">
  <div class="footer-main">

    <!-- Logo -->
    {#if logo}
      <div class="footer-brand">
        <img src={logo} alt={title} />
      </div>
    {/if}

    <!-- Location -->
    {#if contact.address}
      <div class="footer-col">
        <h3>{t('location')}</h3>
        <address>{@html contact.address}</address>
      </div>
    {/if}

    <!-- Contact -->
    {#if contact.email}
      <div class="footer-col">
        <h3>{t('contact')}</h3>
        <a href="mailto:{contact.email}">{contact.email}</a>
      </div>
    {/if}

    <!-- Follow us -->
    {#if socials.length > 0}
      <div class="footer-col">
        <h3>{t('follow_us')}</h3>
        <ul class="footer-socials" role="list">
          {#each socials as social}
            <li>
              <a href={social.url} target="_blank" rel="noopener noreferrer" aria-label={social.label}>
                {#if social.picto}
                  {@html social.picto}
                {:else}
                  {social.label}
                {/if}
              </a>
            </li>
          {/each}
        </ul>
      </div>
    {/if}

    <!-- Newsletter -->
    <div class="footer-newsletter">
      <h3>{t('newsletter_heading')}</h3>
      <form class="footer-newsletter-form" onsubmit={handleSubscribe}>
        <input
          class="footer-newsletter-input"
          type="email"
          placeholder={t('newsletter_placeholder')}
          bind:value={email}
          required
        />
        <button type="submit" class="button">{t('newsletter_submit')}</button>
      </form>
      {#if status}
        <p class="footer-newsletter-status footer-newsletter-status--{status.type}">
          {status.message}
        </p>
      {/if}
    </div>

  </div>

  <!-- Copyright bar -->
  <div class="footer-bottom">
    <p>{t('copyright', { year })}</p>
    <div class="footer-divider" aria-hidden="true"></div>
    <a href="/cookies">{t('cookies')}</a>
    <div class="footer-divider" aria-hidden="true"></div>
    {#if contact.legalNotice}
      <a href={contact.legalNotice} target="_blank" rel="noopener noreferrer">{t('legal')}</a>
    {:else}
      <a href="/privacy">{t('privacy')}</a>
    {/if}
  </div>
</footer>

<style>
  .site-footer {
    width: 100vw;
    background: #0d0e22;
  }

  /* --- Main row --- */
  .footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 45px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* --- Brand --- */
  .footer-brand img {
    height: 40px;
    width: auto;
  }

  /* --- Info columns --- */
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 136px;
  }

  .footer-col h3 {
    color: #fff;
    font-family: "Danzza", sans-serif;
    font-size: var(--font-size-paragraph);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 16px;
  }

  .footer-col address,
  .footer-col address a,
  .footer-col a {
    color: #4dfca1;
    font-family: "Danzza", sans-serif;
    font-size: var(--font-size-paragraph-small);
    font-style: normal;
    line-height: 20px;
    text-decoration: none;
  }

  /* --- Socials --- */
  .footer-socials {
    display: flex;
    gap: 24px;
    list-style: none;
  }

  .footer-socials a {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-socials :global(svg),
  .footer-socials img {
    width: 24px;
    height: 24px;
  }

  /* --- Newsletter --- */
  .footer-newsletter {
    width: 493px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer-newsletter h3 {
    color: #fff;
    font-family: "Danzza", sans-serif;
    font-size: var(--font-size-paragraph);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 16px;
  }

  .footer-newsletter-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .footer-newsletter-input {
    width: 315px;
    height: 45px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    font-family: "Danzza", sans-serif;
  }

  .footer-newsletter-input::placeholder {
    opacity: 0.7;
    color: #fff;
  }

  /* Override .button width for footer context */
  .footer-newsletter-form :global(.button) {
    width: auto;
    min-width: unset;
    position: static;
    height: 45px;
  }

  .footer-newsletter-status {
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
  }

  .footer-newsletter-status--success {
    background: #4dfca1;
    color: #1e1938;
  }

  .footer-newsletter-status--error {
    background: #ff6b6b;
    color: #fff;
  }

  /* --- Copyright bar --- */
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 45px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .footer-bottom p,
  .footer-bottom a {
    color: #fff;
    font-family: "Danzza", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
  }

  .footer-divider {
    width: 1px;
    height: 24px;
    background: #4dfca1;
  }

  /* --- Mobile (≤700px) --- */
  @media (max-width: 700px) {
    .footer-main {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      padding: 16px 20px;
    }

    .footer-newsletter {
      width: 100%;
    }

    .footer-newsletter-input {
      width: 100%;
      flex-grow: 1;
    }

    .footer-newsletter-form :global(.button) {
      width: 100%;
      margin-top: 10px;
    }

    .footer-bottom {
      flex-direction: column;
      gap: 16px;
      text-align: center;
      padding: 16px 20px;
    }

    .footer-divider {
      width: 100%;
      height: 1px;
    }
  }

  /* --- Tablet (701px–912px) --- */
  @media (min-width: 701px) and (max-width: 912px) {
    .footer-main {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      padding: 20px 30px;
    }

    .footer-newsletter {
      width: 100%;
    }

    .footer-newsletter-input {
      width: 60%;
    }

    .footer-bottom {
      flex-direction: column;
      gap: 16px;
      text-align: center;
      padding: 20px 30px;
    }

    .footer-divider {
      width: 100%;
      height: 1px;
    }
  }
</style>