<footer class="site-footer" role="contentinfo">
    <!-- Intro banner (headline + short copy + decorative images) -->
    <div class="intro">
      <div>
        <h2>Dress with clarity.</h2>
        <p>We curate capsule wardrobes that make getting dressed easy.</p>
      </div>
      <!-- Decorative polaroids (purely visual placeholders) -->
      <figure aria-hidden="true">
        <span></span><span></span>
      </figure>
    </div>

    <!-- Cocoa content card (orange border on top of this) -->
    <div class="content">
      <picture>
        <img
          src="./assets/logo/everwardrobe-white.png"
          alt="EverWardrobe"
          loading="lazy"
          decoding="async"
          width="220"
          height="110"
        />
      </picture>

      <section>
        <p><strong>Join our newsletter</strong></p>
        <form action="#" method="post" novalidate>
          <label class="sr-only" for="email">Email address</label>
          <input type="email" id="email" name="email" placeholder="Your email" required>
          <button type="submit">Subscribe</button>
        </form>
        <!-- Social icon slots — drop your SVGs inside the links -->
      </section>

      <nav aria-label="Footer navigation">
        <ul>
          <li><a href="/quiz.php">Take Quiz</a></li>
          <li><a href="/explore-personas.php">Explore Personas</a></li>
          <li><a href="/capsule-room.php">Capsule Room</a></li>
          <li><a href="/about-us.php">About Us</a></li>
        </ul>
      </nav>
    </div>

    <!-- Legal row -->
    <div class="legal">
      <nav aria-label="Legal">
        <a href="./pages/accessibility.php">Accessibility Statement</a>
        <a href="./pages/privacy.php">Privacy</a>
        <a href="./pages/terms.php">Terms</a>
        <a href="./pages/sustainability.php">Sustainability</a>
      </nav>
      <p>© 2024 <span>EverWardrobe</span></p>
    </div>
  </footer>

