/* global React */
/* Devmy Healthcare — Chrome: Header (sticky + scroll progress) + Footer + Float CTA */

const { useState: useStateChrome, useEffect: useEffectChrome } = React;

/* ---------- Sticky header with scroll progress ---------- */
function DevHeader({ activeId }) {
  const [scrolled, setScrolled] = useStateChrome(false);
  const [progress, setProgress] = useStateChrome(0);
  const [menuOpen, setMenuOpen] = useStateChrome(false);

  useEffectChrome(() => {
    function onScroll() {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? h.scrollTop / max * 100 : 0;
      setProgress(p);
      setScrolled(h.scrollTop > 12);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Close mobile menu on Escape, lock body scroll while open
  useEffectChrome(() => {
    if (!menuOpen) return;
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [menuOpen]);

  const links = [
  { id: 'pain', label: 'Sfide' },
  { id: 'competenze', label: 'Competenze' },
  { id: 'progetti', label: 'Progetti' },
  { id: 'agevolazioni', label: 'Agevolazioni' },
  { id: 'team', label: 'Chi siamo' },
  { id: 'faq', label: 'FAQ' }];


  return (
    <header className={`dev-header ${menuOpen ? 'is-menu-open' : ''}`} style={{ background: scrolled || menuOpen ? 'rgba(255,255,255,.96)' : 'rgba(255,255,255,.78)' }}>
      <div className="dev-header__inner">
        <a className="dev-header__logo" href="#top" onClick={() => setMenuOpen(false)}>
          <img src={window.__resources && window.__resources.logoMain || "assets/logo-devmy.svg"} alt="devmy" />
          <span className="dev-header__sector">Healthcare</span>
        </a>
        <nav className="dev-header__nav">
          {links.map((l) =>
          <a
            key={l.id}
            href={`#${l.id}`}
            className={activeId === l.id ? 'is-active' : ''}>
            
              {l.label}
            </a>
          )}
        </nav>
        <div className="dev-header__actions">
          <a href="#prenota" className="dev-btn dev-btn--primary dev-btn--sm dev-header__cta-mini" onClick={() => setMenuOpen(false)}>
            <span className="live-dot" />
            <span className="dev-header__cta-text">Prenota una call</span>
            <span className="dev-header__cta-text-short">Prenota</span>
          </a>
          <button
            type="button"
            className={`dev-header__burger ${menuOpen ? 'is-open' : ''}`}
            aria-label={menuOpen ? 'Chiudi menu' : 'Apri menu'}
            aria-expanded={menuOpen}
            aria-controls="mobile-menu"
            onClick={() => setMenuOpen((v) => !v)}>
            
            <span /><span /><span />
          </button>
        </div>
        <div className="dev-header__progress" style={{ '--p': `${progress}%` }} />
      </div>

      {/* Mobile slide-down menu */}
      <div
        id="mobile-menu"
        className={`dev-header__sheet ${menuOpen ? 'is-open' : ''}`}
        aria-hidden={!menuOpen}>
        
        <nav className="dev-header__sheet__nav">
          {links.map((l) =>
          <a
            key={l.id}
            href={`#${l.id}`}
            className={activeId === l.id ? 'is-active' : ''}
            onClick={() => setMenuOpen(false)}>
            
              <span className="dev-header__sheet__nav-label">{l.label}</span>
              <span aria-hidden="true">→</span>
            </a>
          )}
        </nav>
        <div className="dev-header__sheet__foot">
          <a href="#prenota" className="dev-btn dev-btn--primary" onClick={() => setMenuOpen(false)}>
            <span className="live-dot" />Prenota una call di 15 minuti →
          </a>
          <a href="#guida" className="dev-btn dev-btn--outline" onClick={() => setMenuOpen(false)}>
            Scarica la guida 101/2020
          </a>
          <div className="dev-header__sheet__contact">
            <a href="mailto:healthcare@devmy.it">healthcare@devmy.it</a>
            <a href="tel:+393920445357">+39 392 044 5357</a>
          </div>
        </div>
      </div>
      <div className={`dev-header__sheet-backdrop ${menuOpen ? 'is-open' : ''}`} onClick={() => setMenuOpen(false)} />
    </header>);

}

/* ---------- Floating sticky CTA (appears after hero) ---------- */
function FloatCTA() {
  const [visible, setVisible] = useStateChrome(false);
  useEffectChrome(() => {
    function onScroll() {
      const y = window.scrollY;
      // Show after ~ hero height
      setVisible(y > 720 && y + window.innerHeight < document.documentElement.scrollHeight - 600);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="#prenota" className={`float-cta ${visible ? 'is-visible' : ''}`} aria-hidden={!visible}>
      <span className="live-dot" />
      Prenota una call gratuita →
    </a>);

}

/* ---------- Footer ---------- */
function DevFooter() {
  return (
    <footer className="dev-footer">
      <div className="dev-footer__inner">
        <div className="dev-footer__top">
          <div>
            <a className="dev-footer__logo" href="#top"><img src={window.__resources && window.__resources.logoWhite || "assets/logo-devmy-white.svg"} alt="devmy" /></a>
            <p style={{ marginTop: 18, fontSize: 14, color: 'rgba(255,255,255,.6)', maxWidth: 320, lineHeight: 1.6 }}>
              think. design. code. — software e AI per la sanità italiana.
              <br />Acadevmy s.r.l. · San Giovanni la Punta (CT)
            </p>
            <p style={{ marginTop: 14, font: '500 12px var(--font-mono)', color: 'rgba(255,255,255,.4)', letterSpacing: '.06em' }}>P.IVA 05537900879 · REA CT-3xxxxx

            </p>
          </div>
          <div>
            <h6>Healthcare</h6>
            <a href="#competenze">Competenze</a>
            <a href="#progetti">Progetti</a>
            <a href="#agevolazioni">Agevolazioni</a>
            <a href="#guida">Guida PDF</a>
          </div>
          <div>
            <h6>Devmy</h6>
            <a href="#team">Chi siamo</a>
            <a href="https://devmy.it" target="_blank" rel="noopener">Sito principale ↗</a>
            <a href="#">Blog / Linkeria</a>
            <a href="#">Lavora con noi</a>
          </div>
          <div>
            <h6>Contatti</h6>
            <a href="mailto:healthcare@devmy.it">healthcare@devmy.it</a>
            <a href="tel:+393920445357">+39 392 044 5357</a>
            <a href="https://linkedin.com/company/devmy" target="_blank" rel="noopener">LinkedIn ↗</a>
            <a href="#">Privacy & Cookie</a>
          </div>
        </div>
        <div className="dev-footer__bottom">
          <span>© 2026 Acadevmy s.r.l. — Tutti i diritti riservati.</span>
          <span>think. design. code.</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { DevHeader, FloatCTA, DevFooter });