/* ===== Shared navigation + footer — Mobile-first ===== */

const { useState, useEffect, useRef } = React;

const siteContact = () => window.SiteConfig || {
  email: 'contact@maisonsereine.ca',
  phoneTel: null,
  phoneLabel: null,
};

/* —————————————————————————————————————————————————————
   Logo Maison Sereine — maison + ECG (inline SVG)
   currentColor pour s'adapter aux fonds clair/foncé.
   ————————————————————————————————————————————————————— */
const BrandLogo = ({ size = 34, color }) => (
  <svg
    width={size} height={size} viewBox="0 0 64 64"
    fill="none" stroke={color || "currentColor"}
    strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
    aria-hidden="true" style={{ flexShrink: 0, display: 'block' }}
  >
    {/* Maison */}
    <path d="M12 30 L32 12 L52 30 L52 52 L12 52 Z" />
    {/* Tracé ECG qui traverse la maison */}
    <path d="M12 30 L22 30 L26 22 L31 40 L36 18 L40 34 L44 30 L52 30"
          strokeWidth="2.6" />
  </svg>
);

const navLinks = [
  { label: "Sécurité",       scrollTo: "securite" },
  { label: "Tarifs",         href: "#faq?tab=famille" }, // détail tarifaire complet sur la page FAQ
  { label: "Urgence",        scrollTo: "urgence" },
  { label: "Espace famille", href: "#dashboard" },
  { label: "FAQ",            href: "#faq" },
];

const NavBar = ({ current = "home" }) => {
  const [open, setOpen] = React.useState(false);
  const contact = siteContact();

  // Bloquer le scroll du body quand le menu plein écran est ouvert
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const goTo = (l) => {
    setOpen(false);
    if (l.scrollTo) {
      if (location.hash && location.hash !== '#home' && location.hash !== '') {
        location.hash = '#home';
        setTimeout(() => {
          const el = document.getElementById(l.scrollTo);
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: "smooth" });
        }, 80);
      } else {
        const el = document.getElementById(l.scrollTo);
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: "smooth" });
      }
    } else if (l.href) {
      location.hash = l.href.replace('#', '');
    }
  };

  const onLink = (e, l) => {
    if (l.scrollTo) e.preventDefault();
    goTo(l);
  };

  return (
    <>
      <header className="nav">
        <div className="container nav-inner">
          <a className="brand" href="#home" onClick={() => setOpen(false)}>
            <BrandLogo size={34} color="var(--primary)" />
            <span>Maison Sereine</span>
          </a>
          <nav className="nav-links" aria-label="Principal">
            {navLinks.map((l, i) => (
              <a key={i} href={l.href || '#home'} onClick={(e) => onLink(e, l)}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="nav-actions">
            {contact.phoneTel ? (
              <a href={`tel:${contact.phoneTel}`} className="row nav-phone" style={{ fontSize: 14, color: 'var(--ink-2)' }}>
                <Icon name="phone" size={16} /> {contact.phoneLabel || contact.phoneTel}
              </a>
            ) : (
              <a href={`mailto:${contact.email}`} className="row nav-phone" style={{ fontSize: 14, color: 'var(--ink-2)' }}>
                <Icon name="mail" size={16} /> {contact.email}
              </a>
            )}
            <a href="#booking" className="btn btn-primary nav-cta">Réserver</a>
            <button
              className="hamburger"
              aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <span className={"hb-line " + (open ? 'is-open-1' : '')}/>
              <span className={"hb-line " + (open ? 'is-open-2' : '')}/>
              <span className={"hb-line " + (open ? 'is-open-3' : '')}/>
            </button>
          </div>
        </div>
      </header>

      {/* Menu mobile plein écran */}
      <div className={"mobile-menu " + (open ? 'is-open' : '')} role="dialog" aria-modal="true">
        <nav className="mobile-menu-inner" aria-label="Menu mobile">
          <ul>
            {navLinks.map((l, i) => (
              <li key={i}>
                <a href={l.href || '#home'} onClick={(e) => onLink(e, l)}>
                  <span>{l.label}</span>
                  <Icon name="arrow-right" size={22} />
                </a>
              </li>
            ))}
          </ul>
          <div className="mobile-menu-foot">
            {contact.phoneTel ? (
              <a href={`tel:${contact.phoneTel}`} className="btn btn-ghost mobile-call">
                <Icon name="phone" size={18} /> {contact.phoneLabel || contact.phoneTel}
              </a>
            ) : (
              <a href={`mailto:${contact.email}`} className="btn btn-ghost mobile-call">
                <Icon name="mail" size={18} /> {contact.email}
              </a>
            )}
            <a href="#booking" className="btn btn-primary" onClick={() => setOpen(false)}>
              Réserver une visite <Icon name="arrow-right" size={18} />
            </a>
          </div>
        </nav>
      </div>
    </>
  );
};

const Footer = () => {
  const contact = siteContact();
  return (
  <footer style={{ background: 'var(--primary)', color: '#E7EDE8', marginTop: 96 }}>
    <div className="container footer-inner">
      <div className="footer-grid">
        <div>
          <div className="brand" style={{ color: '#fff' }}>
            <BrandLogo size={34} color="#fff" />
            <span>Maison Sereine</span>
          </div>
          <p style={{ marginTop: 16, color: '#BCCCC3', maxWidth: 320 }}>
            Services d’aide à domicile pour les personnes aînées et leurs proches, au Québec.
          </p>
          {/*
            NEQ — Numéro d'entreprise du Québec.
            ⚠️ Confirmer la valeur exacte avant le lancement officiel.
          */}
          <div className="row" style={{ marginTop: 20, gap: 8 }}>
            <span className="chip" style={{ background:'rgba(255,255,255,0.08)', borderColor:'rgba(255,255,255,0.14)', color:'#D4E0D9' }}>
              <Icon name="shield" size={14} /> Entreprise inscrite au REQ · NEQ 2282131632
            </span>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 14, color: '#fff' }}>Services</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: '#BCCCC3', lineHeight: 2 }}>
            <li>Compagnie &amp; répit</li>
            <li>Aide à la vie quotidienne</li>
            <li>Aide personnelle (PAB)</li>
            <li>Transport accompagné</li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 14, color: '#fff' }}>Étudiants</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: '#BCCCC3', lineHeight: 2 }}>
            <li><a href="#booking?role=student" style={{ color:'#BCCCC3', textDecoration:'none' }}>Devenir étudiant</a></li>
            <li><a href="#faq?tab=etudiants" style={{ color:'#BCCCC3', textDecoration:'none' }}>Programmes reconnus</a></li>
            <li><a href="#faq?tab=etudiants" style={{ color:'#BCCCC3', textDecoration:'none' }}>Paye chaque vendredi</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 14, color: '#fff' }}>Aide</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: '#BCCCC3', lineHeight: 2 }}>
            {contact.phoneTel ? (
              <li><a href={`tel:${contact.phoneTel}`} style={{ color:'#BCCCC3', textDecoration:'none' }}>{contact.phoneLabel || contact.phoneTel}</a></li>
            ) : null}
            <li><a href={`mailto:${contact.email}`} style={{ color:'#BCCCC3', textDecoration:'none' }}>{contact.email}</a></li>
            <li><a href="#faq" style={{ color:'#BCCCC3', textDecoration:'none' }}>FAQ</a></li>
            {/* Conditions et Confidentialité séparées — exigence Loi 25 (Québec) */}
            <li><a href="#privacy" style={{ color:'#BCCCC3', textDecoration:'none' }}>Conditions d'utilisation</a></li>
            <li><a href="#privacy" style={{ color:'#BCCCC3', textDecoration:'none' }}>Politique de confidentialité</a></li>
          </ul>
        </div>
      </div>
      <hr style={{ border: 0, height: 1, background: 'rgba(255,255,255,0.12)', margin: '48px 0 24px' }} />
      <div className="footer-meta">
        <span>© 2026 Maison Sereine inc. · Tous droits réservés · NEQ 2282131632</span>
        <span>
          Sainte-Foy · Sillery · Montcalm
          {/* Lien discret vers l'espace d'administration (protégé par mot de passe). */}
          <a
            href="#admin"
            title="Espace administration"
            aria-label="Espace administration"
            style={{ color: 'rgba(231,237,232,0.35)', textDecoration: 'none', marginLeft: 10 }}
          >
            ·&nbsp;Admin
          </a>
        </span>
      </div>
      <p style={{ margin: '20px 0 0', fontSize: 12, color: 'rgba(231,237,232,0.78)', lineHeight: 1.55, maxWidth: 820 }}>
        Maison Sereine s'engage pour la sécurité : chaque mise en relation inclut une vérification complète des antécédents pour le bien-être de votre famille.
      </p>
    </div>
  </footer>
  );
};

window.NavBar = NavBar;
window.Footer = Footer;
window.BrandLogo = BrandLogo;