/* ==========================================================================
   Nav + Hero
   ========================================================================== */

function ElvaioNav() {
  const { useState, useEffect, useRef } = React;
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      if (y > 200 && y > lastY.current + 10) setHidden(true);
      else if (y < lastY.current - 5) setHidden(false);
      lastY.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <div className="nav-spacer"></div>
      <div className={`nav-wrap${hidden ? ' nav-hidden' : ''}`}>
        <nav className="nav-bar">
          <a className="nav-brand" href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            <img src={window.ELVAIO_IMAGES['logo-clean-dark']} alt="Elvaio" />
          </a>
          <div className="nav-links">
            <a href="#systems" onClick={scrollTo('systems')}>Solutions</a>
            <a href="#process" onClick={scrollTo('process')}>How it works</a>
            <a href="#results" onClick={scrollTo('results')}>Results</a>
            <a href="#faq" onClick={scrollTo('faq')}>FAQ</a>
          </div>
          <a className="nav-cta" href="#cta" onClick={scrollTo('cta')}>
            Book a call <span className="nav-cta-dot" aria-hidden="true"></span>
          </a>
        </nav>
      </div>
    </>
  );
}

function ElvaioHero() {
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section className="hero" id="hero">
      <div className="hero-eyebrow-row reveal vis">
        <span className="hero-eyebrow-dot"></span>
        <span className="hero-eyebrow-text">DONE-FOR-YOU AI SYSTEMS FOR COACHES · EST. 2024</span>
      </div>
      <h1 className="hero-title reveal vis">
        More clients.<br />
        Less admin.<br />
        <span className="editorial-italic accent-text">
          All on{' '}
          <span className="hero-accent-underline">
            autopilot.
            <svg className="hero-underline-svg" viewBox="0 0 300 16" preserveAspectRatio="none" aria-hidden="true">
              <path pathLength="1" d="M 10,9 Q 80,5 150,9 Q 220,13 290,9" />
            </svg>
          </span>
        </span>
      </h1>
      <div className="hero-bottom reveal vis" style={{ transitionDelay: '0.08s' }}>
        <p className="hero-bottom-sub">
          Elvaio builds done-for-you AI systems that handle lead generation,
          client follow-up, and content production — so you can focus on coaching.
        </p>
        <div className="hero-bottom-stat">
          <div className="hero-stat-value">15+</div>
          <div className="hero-stat-label">hours per week saved on admin &amp; follow-up</div>
        </div>
        <div className="hero-bottom-ctas">
          <a className="btn btn-primary btn-icon-pill" href="#cta" onClick={scrollTo('cta')}>
            <span className="btn-pill-text">Get your audit</span>
            <span className="btn-pill-icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M7 17L17 7"/>
                <polyline points="7 7 17 7 17 17"/>
              </svg>
            </span>
          </a>
          <a className="btn-link-arrow" href="#systems" onClick={scrollTo('systems')}>
            See the work
            <svg className="btn-link-arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="5" y1="12" x2="19" y2="12" />
              <polyline points="12 5 19 12 12 19" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}

window.ElvaioNav = ElvaioNav;
window.ElvaioHero = ElvaioHero;