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

// ===== Top info bar =====
function InfoBar({ lang, onLang }) {
  return (
    <div className="infobar">
      <div className="container" style={{ color: "rgb(255, 255, 255)" }}>
        <div className="infobar-left">
          <span className="infobar-item">
            <IconPhone size={14} />
            Standard <b>+229 01 21 400 100</b>
          </span>
          <span className="infobar-item">
            <IconCalendar size={14} />
            Prise de RDV <b>+229 01 21 400 111</b>
          </span>
          <span className="infobar-item" style={{ display: "none" }}>
            <IconMail size={14} />
            contact@chichopital.bj
          </span>
        </div>
        <div className="infobar-right">
          <span className="infobar-item">
            <IconMap size={14} />
            Abomey-Calavi, Bénin
          </span>
          <span className="infobar-item">
            <IconMail size={14} />
            contact@chichopital.bj
          </span>
          <div className="lang-switch" role="group" aria-label="Langue">
            <button className={lang === "fr" ? "active" : ""} onClick={() => onLang("fr")}>FR</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => onLang("en")}>EN</button>
          </div>
        </div>
      </div>
    </div>);

}

// ===== Menu structure =====
const MENU = [
{
  id: "connaitre",
  label: "Connaître le CHIC",
  items: [
  { label: "Mission et valeurs", href: "#/connaitre/mission", desc: "Notre vision et nos valeurs" },
  { label: "Le centre hospitalier", href: "#/connaitre/centre", desc: "Infrastructure et capacités" },
  { label: "Équipes et organisation", href: "#/connaitre/equipes", desc: "Gouvernance et équipes" }]

},
{
  id: "venir",
  label: "Venir au CHIC",
  items: [
  { label: "Prise de RDV", href: "#/rdv", desc: "Réserver en ligne", route: "rdv" },
  { label: "Parcours consultation", href: "#/venir/parcours", desc: "Étape par étape" },
  { label: "Horaires et accès", href: "#/venir/horaires", desc: "Plan et transport" },
  { label: "Modalités d’admission", href: "#/venir/admission", desc: "Documents et formalités" }]

},
{
  id: "specialites",
  label: "Nos spécialités",
  items: [
  { label: "Services disponibles", href: "#/services", desc: "Suivi temps réel", route: "services" },
  { label: "Bilan de santé", href: "#/specialites/checkup", desc: "Check-up Center" }]

},
{
  id: "opportunites",
  label: "Opportunités",
  items: [
  { label: "Recrutements", href: "#/opportunites/recrutement", desc: "Rejoindre le CHIC" },
  { label: "Appels d’offres", href: "#/opportunites/appels", desc: "Marchés publics" }]

}];


// ===== Main nav =====
function Nav({ route, onNavigate }) {
  const [mobileOpen, setMobileOpen] = useState_l(false);
  useEffect_l(() => {setMobileOpen(false);}, [route]);
  return (
    <>
      <div className="nav-wrap">
        <div className="container">
          <div className="nav">
            <a className="nav-brand" href="#/" aria-label="Accueil CHIC">
              <ChicLogo size="md" />
            </a>

            <ul className="nav-menu" role="menubar">
              {MENU.map((m) => {
                const isActive = m.items.some((it) => it.route === route);
                return (
                  <li key={m.id}>
                    <a className={`nav-link ${isActive ? "active" : ""}`} href={m.items[0].href} aria-haspopup="true">
                      {m.label}
                      <IconChevDown className="chev" size={12} />
                    </a>
                    <div className="nav-submenu" role="menu">
                      {m.items.map((it) =>
                      <a key={it.label} href={it.href} className={route && it.route === route ? "active" : ""}>
                          {it.label}
                          <small>{it.desc}</small>
                        </a>
                      )}
                    </div>
                  </li>);

              })}
            </ul>

            <div className="nav-actions">
              <a href="#/rdv" className="btn btn-primary btn-sm">
                Prendre RDV
                <IconArrowRight size={14} />
              </a>
              <button
                className="nav-burger"
                aria-label="Ouvrir le menu"
                onClick={() => setMobileOpen(true)}>
                
                <IconMenu size={20} />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className={`mobile-nav ${mobileOpen ? "open" : ""}`} onClick={(e) => {if (e.target === e.currentTarget) setMobileOpen(false);}}>
        <div className="mobile-nav-inner">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <ChicLogo size="md" />
            <button className="nav-burger" onClick={() => setMobileOpen(false)} aria-label="Fermer"><IconClose size={20} /></button>
          </div>
          {MENU.map((m) =>
          <div key={m.id} className="mobile-nav-section">
              <h5>{m.label}</h5>
              {m.items.map((it) =>
            <a key={it.label} href={it.href}>{it.label}</a>
            )}
            </div>
          )}
          <a href="#/rdv" className="btn btn-primary" style={{ justifyContent: "center" }}>
            Prendre rendez-vous
            <IconArrowRight size={14} />
          </a>
        </div>
      </div>
    </>);

}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="footer-brand-logo">
              <ChicLogo size="lg" />
            </div>
            <p>
              Centre Hospitalier International de Calavi — au sommet du 4<sup>e</sup> niveau de la pyramide sanitaire nationale, pour des soins spécialisés de classe internationale au Bénin et en Afrique de l’Ouest.
            </p>
            <div className="footer-social">
              <a href="#" aria-label="LinkedIn"><IconLinkedin size={16} /></a>
              <a href="#" aria-label="Facebook"><IconFacebook size={16} /></a>
              <a href="#" aria-label="YouTube"><IconYoutube size={16} /></a>
            </div>
          </div>

          <div>
            <h5>Contacts</h5>
            <ul>
              <li><b style={{ color: "#fff", fontWeight: 500 }}>Standard</b><br />+229 01 21 400 100</li>
              <li><b style={{ color: "#fff", fontWeight: 500 }}>Prise de RDV</b><br />+229 01 21 400 111<br /><small style={{ opacity: 0.55 }}>lun.–ven., 8h–17h</small></li>
              <li><a href="mailto:contact@chichopital.bj">contact@chichopital.bj</a></li>
              <li>Abomey-Calavi, Bénin</li>
            </ul>
          </div>

          <div>
            <h5>Navigation</h5>
            <ul>
              <li><a href="#/">Accueil</a></li>
              <li><a href="#/connaitre/mission">Mission &amp; valeurs</a></li>
              <li><a href="#/services">Services disponibles</a></li>
              <li><a href="#/specialites/checkup">Bilan de santé</a></li>
              <li><a href="#/venir/parcours">Parcours patient</a></li>
              <li><a href="#/opportunites/recrutement">Recrutements</a></li>
              <li><a href="#/opportunites/appels">Appels d’offres</a></li>
            </ul>
          </div>

          <div>
            <h5>Newsletter</h5>
            <p style={{ color: "rgba(255,255,255,0.55)", margin: 0, fontSize: 13 }}>
              Recevez les ouvertures de services et les actualités du CHIC.
            </p>
            <form className="newsletter" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="Votre adresse e-mail" aria-label="Adresse e-mail" />
              <button type="submit">S’inscrire</button>
            </form>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Centre Hospitalier International de Calavi · Tous droits réservés</span>
          <div className="legal">
            <a href="#">Mentions légales</a>
            <a href="#">Politique de confidentialité</a>
            <a href="#">Plan du site</a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { InfoBar, Nav, Footer, MENU });