/* global React */

function Footer() {
  const cols = [
  {
    category: "Produit",
    titles: ["Comment ça marche", "Tarifs", "Exemple de journal"],
    links: ["#how", "#pricing", "assets/pdf/Journal Juillet 2023 Marie Petit.pdf"]
  },
  {
    category: "Entreprise",
    titles: ["Notre histoire", "Presse"],
    links: ["https://www.mymilyapp.com/ressources/notre-histoire", "https://www.mymilyapp.com/ressources/espace-presse"]
  },
  {
    category: "Aide",
    titles: ["Besoin d'aide - FAQ", "Nous contacter"],
    links: ["https://www.mymilyapp.com/assistance/faq", "https://www.mymilyapp.com/assistance/contact"]
  },
  {
    category: "Légal",
    titles: ["CGU / CGV", "Confidentialité"],
    links: ["https://www.mymilyapp.com/ressources/cgu-cgv", "assets/pdf/MILY_-_Politique_de_confidentialite.pdf"]
  }];


  return (
    <footer className="site-footer" id="help" data-screen-label="10 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand-logo" href="#" aria-label="Mily">
              <img src="assets/images/mily - m.png" alt="Mily" />
            </a>
            <p>
              Le journal photo familial imprimé en France qui réunit les familles, mois après mois.
            </p>
            <div className="footer-stores">
              <a className="store-badge" href="https://apps.apple.com/app/id6443755446" aria-label="Disponible sur l'App Store" target="_blank" rel="noopener noreferrer">
                <IconApple size={20} />
                <span>
                  <span className="label">Télécharger sur</span>
                  <span className="name">App Store</span>
                </span>
              </a>
              <a className="store-badge" href="https://play.google.com/store/apps/details?id=com.mymilyapp" aria-label="Disponible sur le Google Play store" target="_blank" rel="noopener noreferrer">
                <IconGoogle size={20} />
                <span>
                  <span className="label">Disponible sur</span>
                  <span className="name">Google Play</span>
                </span>
              </a>
            </div>
          </div>

          {cols.map((c) =>
          <div className="footer-col" key={c.category}>
              <h4>{c.category}</h4>
              <ul>
                {c.titles.map((title, i) =>
              <li key={title}><a href={c.links[i] ?? "#"}>{title}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>

        <div className="footer-bottom">
          <div className="footer-love">
            Imprimé avec <span className="heart">♥</span> dans l'Hérault & en Côte-d'Or
          </div>
          <div className="links">
            <span>© 2026 Mily</span>
            <a href="#">FR</a>
            <a href="#">Contact</a>
            <div className="footer-socials">
              <a href="https://www.instagram.com/mymilyappofficiel" aria-label="Instagram" target="_blank" rel="noopener"><IconInstagram /></a>
              <a href="https://www.facebook.com/mymilyappofficiel" aria-label="Facebook" target="_blank" rel="noopener"><IconFacebook /></a>
              <a href="https://fr.linkedin.com/company/milyapp" aria-label="LinkedIn" target="_blank" rel="noopener"><IconLinkedIn /></a>
            </div>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Footer });