/* 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/logo-horizontal-color.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>
      <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>
    </header>
  );
}

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 });