/* global React */
const { useState, useEffect } = React;

function StoreBadges({ variant = "dark" }) {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <a className="store-badge" href="https://apps.apple.com/app/id6443755446" target="_blank" rel="noopener noreferrer" aria-label="Télécharger sur l'App Store">
        <IconApple size={22} />
        <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" target="_blank" rel="noopener noreferrer" aria-label="Télécharger sur Google Play Store">
        <IconGoogle size={22} />
        <span>
          <span className="label">Disponible sur</span>
          <span className="name">Google Play</span>
        </span>
      </a>
    </div>
  );
}

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <header className={`site-header ${scrolled ? "scrolled" : ""}`} data-screen-label="01 Header">
        <div className="container inner">
          <a className="brand-logo" href="./#" aria-label="Mily — accueil">
            <img src="assets/images/mily_horizontal_logo-01.png" alt="Mily" />
          </a>
          <nav className="main-nav" aria-label="Navigation principale">
            <a href="./#service">Le service</a>
            <a href="./#how">Comment ça marche</a>
            <a href="assets/pdf/Journal_Juillet_2023_Marie_Petit.pdf" target="_blank" rel="noopener noreferrer">Exemple</a>
            <a href="./#pricing">Tarifs</a>
            <a href="./#help">Aide</a>
          </nav>
          <div className="header-actions">
            <a className="btn btn-ghost desktop-only" href="https://web.mymilyapp.com" target="_blank" rel="noopener noreferrer">Se connecter</a>
            <a className="btn btn-primary" href="https://web.mymilyapp.com" target="_blank" rel="noopener noreferrer">Essayer Mily</a>
            <button
              className="burger"
              aria-label={mobileOpen ? "Fermer le menu" : "Ouvrir le menu"}
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen((o) => !o)}
            >
              {mobileOpen ? <IconClose /> : <IconBurger />}
            </button>
          </div>
        </div>
      </header>
      <div className={`mobile-nav ${mobileOpen ? "open" : ""}`} onClick={() => setMobileOpen(false)}>
        <a href="./#service">Le service</a>
        <a href="./#how">Comment ça marche</a>
        <a href="assets/pdf/Journal_Juillet_2023_Marie_Petit.pdf" target="_blank" rel="noopener noreferrer">Exemple</a>
        <a href="./#pricing">Tarifs</a>
        <a href="./#help">Aide</a>
        <a href="https://web.mymilyapp.com" target="_blank" rel="noopener noreferrer">Se connecter</a>
      </div>
    </>
  );
}

function Masthead() {
  const now = new Date();
  const month = now.toLocaleDateString('fr-FR', { month: 'long' });
  const monthLabel = month.charAt(0).toUpperCase() + month.slice(1);
  const dateLabel = `${monthLabel} ${now.getFullYear()}`;

  const origin = new Date(2022, 3, 1); // 01/04/2022
  const issueMonths = (now.getFullYear() - origin.getFullYear()) * 12 + (now.getMonth() - origin.getMonth());
  const issueNumber = String(issueMonths).padStart(3, '0');

  return (
    <div className="masthead" data-screen-label="02 Masthead">
      <div className="container inner">
        <div className="col left">
          <span className="dot" />
          <span>N° {issueNumber} — {dateLabel}</span>
        </div>
        <div className="col center">
          <span>Le journal photo familial</span>
        </div>
        <div className="col right">
          <span>Imprimé en France — 5,50 € / mois</span>
          <span className="dot" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Masthead, StoreBadges });