// shared.jsx — Reusable UI primitives, header, footer, menu (IA V2)

function Arrow() {
  return <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M1 6h9.5M7 2.5l3.5 3.5L7 9.5" /></svg>;
}

function Cta({ children, href, onClick, large, target }) {
  const cls = "cta" + (large ? " cta-large" : "");
  const Tag = href ? "a" : "button";
  const props = href ? { href, target, rel: target === "_blank" ? "noreferrer" : undefined } : { type: "button", onClick };
  return (
    <Tag className={cls} {...props}>
      <span>{children}</span>
      <span className="cta-arrow"><Arrow /></span>
    </Tag>
  );
}

function MenuToggle({ onClick }) {
  return (
    <button className="menu-toggle" aria-label="Ouvrir le menu" onClick={onClick}>
      <span className="lines"><span></span><span></span><span></span></span>
    </button>
  );
}

function Header({ onDark, onMenuOpen, navigate }) {
  const nav = (e, path, hash) => { e.preventDefault(); navigate(path, hash); };
  return (
    <header className={"header " + (onDark ? "on-dark" : "on-light")}>
      <div className="header-left">
        <a className="header-logo" href="#/" onClick={(e) => nav(e, '/')}>AMVZ</a>
        <nav className="header-nav">
          <a className="nav-top" href="#/" onClick={(e) => nav(e, '/')}>Accueil</a>

          <div className="nav-group">
            <button className="nav-top nav-parent" type="button">Accompagnements<i className="caret"></i></button>
            <div className="nav-sub">
              <a href="#/kinesiologie" onClick={(e) => nav(e, '/kinesiologie')}>Kinésiologie de la santé</a>
              <a href="#/reiki" onClick={(e) => nav(e, '/reiki')}>Reiki et bols de cristal</a>
            </div>
          </div>

          <div className="nav-group">
            <a className="nav-top nav-parent" href="#/agenda" onClick={(e) => nav(e, '/agenda')}>Agenda<i className="caret"></i></a>
            <div className="nav-sub">
              <a href="#/agenda" onClick={(e) => nav(e, '/agenda', '#cercles')}>Cercles</a>
              <a href="#/agenda" onClick={(e) => nav(e, '/agenda', '#evenements')}>Événements</a>
            </div>
          </div>

          <a className="nav-top" href="#/journal" onClick={(e) => nav(e, '/journal')}>Journal</a>
          <a className="nav-top" href="#/contact" onClick={(e) => nav(e, '/contact')}>Contact</a>
        </nav>
      </div>
      <div className="header-right">
        <a className="nav-rdv" href="#/prendre-rendez-vous" onClick={(e) => nav(e, '/prendre-rendez-vous')}>
          Prendre rendez-vous<span className="cta-arrow"><Arrow /></span>
        </a>
        <MenuToggle onClick={onMenuOpen} />
      </div>
    </header>
  );
}

function MenuOverlay({ open, onClose, navigate }) {
  const [sub, setSub] = React.useState(null);
  const go = (path, hash) => { onClose(); setSub(null); setTimeout(() => navigate(path, hash), 50); };
  return (
    <div className={"menu-overlay" + (open ? " open" : "")}>
      <div className="menu-overlay-header">
        <a className="header-logo" href="#/" onClick={(e) => { e.preventDefault(); go('/'); }} style={{ color: 'var(--brown)' }}>AMVZ</a>
        <button className="menu-toggle" aria-label="Fermer" onClick={onClose} style={{ color: 'var(--brown)' }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1"><path d="M2 2L10 10M10 2L2 10" /></svg>
        </button>
      </div>
      <div className="menu-left">
        <span className="t-label" style={{ color: 'var(--b500)' }}>AMVZ — Etterbeek, Bruxelles</span>
        <p className="menu-left-text">
          Praticienne indépendante en kinésiologie de la santé, Reiki et soins par les bols de cristal. Cercles de femmes mensuels.
        </p>
        <p className="menu-left-quote">« Le corps sait avant la tête. »</p>
      </div>
      <div className="menu-right">
        <span className="menu-right-label">Naviguer</span>
        <a className="menu-link" href="#/" onClick={(e) => { e.preventDefault(); go('/'); }}><span className="dot"></span>Accueil</a>

        <button className={"menu-link menu-parent" + (sub === 'acc' ? " open" : "")} onClick={() => setSub(sub === 'acc' ? null : 'acc')}>
          <span className="dot"></span>Accompagnements<i className="caret"></i>
        </button>
        {sub === 'acc' && (
          <div className="menu-sublinks">
            <a href="#/kinesiologie" onClick={(e) => { e.preventDefault(); go('/kinesiologie'); }}>Kinésiologie de la santé</a>
            <a href="#/reiki" onClick={(e) => { e.preventDefault(); go('/reiki'); }}>Reiki et bols de cristal</a>
          </div>
        )}

        <button className={"menu-link menu-parent" + (sub === 'ag' ? " open" : "")} onClick={() => setSub(sub === 'ag' ? null : 'ag')}>
          <span className="dot"></span>Agenda<i className="caret"></i>
        </button>
        {sub === 'ag' && (
          <div className="menu-sublinks">
            <a href="#/agenda" onClick={(e) => { e.preventDefault(); go('/agenda', '#cercles'); }}>Cercles</a>
            <a href="#/agenda" onClick={(e) => { e.preventDefault(); go('/agenda', '#evenements'); }}>Événements</a>
          </div>
        )}

        <a className="menu-link" href="#/journal" onClick={(e) => { e.preventDefault(); go('/journal'); }}><span className="dot"></span>Journal</a>
        <a className="menu-link" href="#/contact" onClick={(e) => { e.preventDefault(); go('/contact'); }}><span className="dot"></span>Contact</a>
        <a className="menu-link menu-rdv-link" href="#/prendre-rendez-vous" onClick={(e) => { e.preventDefault(); go('/prendre-rendez-vous'); }}>Prendre rendez-vous</a>
      </div>
    </div>
  );
}

function Footer({ navigate }) {
  const nav = (e, path) => { e.preventDefault(); navigate(path); };
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <h3 className="footer-title">AMVZ</h3>
          <p className="footer-tag">
            Amandine Martinez Vazquez. Kinésiologie de la santé, soins énergétiques et cercles de femmes — Bruxelles.
          </p>
          <p className="footer-quote">« Le corps sait avant la tête. » — Amandine</p>
        </div>
        <div className="footer-col">
          <h6>Contact</h6>
          <a href="#/contact" onClick={(e) => nav(e, '/contact')}>Page contact</a>
          <a href="mailto:martinez.vazquez.amandine@gmail.com">martinez.vazquez.amandine@gmail.com</a>
          <a href="https://instagram.com/amvz__" target="_blank" rel="noreferrer">Instagram @amvz__</a>
        </div>
        <div className="footer-col">
          <h6>Lieux</h6>
          <span className="footer-place">Etterbeek</span>
          <span>Muse — 20 Avenue de l'Armée</span>
          <span>1040 Etterbeek, Bruxelles</span>
          <span className="footer-place" style={{ marginTop: 14 }}>Linkebeek</span>
          <span>Adresse à venir</span>
        </div>
        <div className="footer-col">
          <h6>Découvrir</h6>
          <a href="#/temoignages" onClick={(e) => nav(e, '/temoignages')}>Témoignages</a>
          <a href="#/agenda" onClick={(e) => nav(e, '/agenda')}>Agenda</a>
          <a href="#/journal" onClick={(e) => nav(e, '/journal')}>Journal</a>
        </div>
      </div>
      <div className="footer-license">
        <div className="footer-license-links">
          <a href="#/mentions-legales" onClick={(e) => nav(e, '/mentions-legales')}>Mentions légales</a>
          <a href="#/cgv-annulation" onClick={(e) => nav(e, '/cgv-annulation')}>CGV / Annulation</a>
          <a href="#/confidentialite" onClick={(e) => nav(e, '/confidentialite')}>Confidentialité</a>
        </div>
        <span>© 2026 Amandine Martinez Vazquez</span>
      </div>
    </footer>
  );
}

// Reveal-on-scroll wrapper
function Reveal({ children, as: Tag = 'div', className = '', ...rest }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } });
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return <Tag ref={ref} className={"reveal " + (visible ? "is-visible " : "") + className} {...rest}>{children}</Tag>;
}

Object.assign(window, { Arrow, Cta, MenuToggle, Header, MenuOverlay, Footer, Reveal });
