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

window.smoothScroll = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
};

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Sobre Mí', 'sobre'],
    ['Destinos', 'destinos'],
    ['Cómo Trabajo', 'pasos'],
    ['Cotizar', 'cotizar'],
    ['FAQ', 'faq'],
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : 'is-light'}`}>
      <div className="container nav-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({top: 0, behavior: 'smooth'}); }}>
          <img src="assets/logo-magic-plans.png" alt="Magic Plans with Martu" className="nav-logo" />
        </a>
        <div className="nav-links">
          {links.map(([label, id]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); window.smoothScroll(id); }}>{label}</a>
          ))}
          <a className="nav-cta" href="#cotizar" onClick={(e) => { e.preventDefault(); window.smoothScroll('cotizar'); }}>
            Cotizá tu viaje
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const sparkles = Array.from({length: 22}, (_, i) => ({
    left: Math.random() * 100,
    top: Math.random() * 90,
    size: Math.random() * 3 + 2,
    delay: Math.random() * 3,
  }));

  return (
    <section className="hero hero-single">
      <div className="hero-slide active">
        <div className="hero-slide-img" style={{backgroundImage: `url(assets/hero-castle.jpg)`}}></div>
        <div className="hero-slide-overlay"></div>
      </div>

      <div className="hero-sparkles">
        {sparkles.map((s, i) => (
          <div key={i} className="s" style={{
            left: `${s.left}%`, top: `${s.top}%`,
            width: `${s.size}px`, height: `${s.size}px`,
            animationDelay: `${s.delay}s`,
          }} />
        ))}
      </div>

      <div className="hero-content container">
        <div className="hero-fade">
          <div className="hero-eyebrow">
            <span style={{color: 'var(--sun)'}}>✦</span>
            AGENTE DE VIAJES ESPECIALIZADA
            <span style={{color: 'var(--sun)'}}>✦</span>
          </div>
          <h1 className="hero-title">
            <span style={{display: 'block'}}>Tu destino soñado,</span>
            <span style={{display: 'block'}}><span className="accent">hecho realidad.</span></span>
          </h1>
          <p className="hero-sub">Soy Martu, agente de viajes especializada en experiencias mágicas. Te ayudo a planear tu próximo viaje con todo organizado y a tu medida.</p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" href="#cotizar" onClick={(e) => { e.preventDefault(); window.smoothScroll('cotizar'); }}>
              Cotizar mi viaje <span>→</span>
            </a>
            <a className="btn btn-ghost" href="#destinos" onClick={(e) => { e.preventDefault(); window.smoothScroll('destinos'); }}>
              Ver destinos
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;