/* global React, PalmMark */
// ====================================================================
// Animated sunset-oasis scene for the hero.
// Layered: sky gradient · rising sun · dunes · swaying palms · motes.
// ====================================================================

function SunsetScene() {
  const motes = Array.from({ length: 14 });
  return (
    <div className="scene" aria-hidden="true">
      <div className="scene-sky" />
      <div className="scene-sun" />
      <div className="scene-haze" />

      {/* floating light motes */}
      <div className="motes">
        {motes.map((_, i) => (
          <span
            key={i}
            className="mote"
            style={{
              left: `${(i * 37 + 9) % 100}%`,
              bottom: `${(i * 23 + 15) % 70 + 12}%`,
              animationDelay: `${(i % 7) * 0.9}s`,
              animationDuration: `${6 + (i % 5)}s`,
              opacity: 0.25 + (i % 4) * 0.12,
            }}
          />
        ))}
      </div>

      {/* dunes */}
      <div className="dune dune-3" />
      <div className="dune dune-2" />
      <div className="dune dune-1" />

      {/* palms */}
      <div className="palm-stage palm-back">
        <PalmMark size={120} color="oklch(0.30 0.06 160 / 0.55)" trunk="oklch(0.30 0.06 160 / 0.55)" animated />
      </div>
      <div className="palm-stage palm-front">
        <PalmMark size={210} color="var(--palm-deep)" trunk="var(--sunset-deep)" animated />
      </div>

      {/* water glint */}
      <div className="oasis-water" />
    </div>
  );
}

function Hero({ go }) {
  const words = ["Apps", "móviles", "con", "alma", "de", "oasis."];
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 60);
    return () => clearTimeout(t);
  }, []);
  return (
    <header className={"hero" + (loaded ? " hero-loaded" : "")}>
      <div className="hero-glow" />
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="eyebrow hero-eyebrow">Estudio móvil · iOS &amp; Android</span>
          <h1 className="hero-title">
            {words.map((w, i) => (
              <span className="word-mask" key={i}>
                <span
                  className={"word" + (w === "oasis." ? " word-serif" : "")}
                  style={{ transitionDelay: `${0.12 + i * 0.075}s` }}
                >
                  {w}
                </span>
              </span>
            ))}
          </h1>
          <p className="hero-sub">
            Oasis Dev Labs diseña y construye aplicaciones móviles que resuelven
            problemas reales — con un cuidado por el detalle que se siente desde
            el primer toque.
          </p>
          <div className="hero-cta">
            <button className="btn btn-sun" onClick={() => go("productos")}>
              Ver nuestro trabajo <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => go("contacto")}>
              Hablemos
            </button>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <strong>Mexicali, BC</strong>
              <span>Baja California, MX</span>
            </div>
            <div className="hero-meta-divider" />
            <div className="hero-meta-item">
              <strong>Desde 2026</strong>
              <span>Construyendo para el mundo</span>
            </div>
          </div>
        </div>

        <div className="hero-scene-col">
          <SunsetScene />
        </div>
      </div>

      <button className="scroll-cue" onClick={() => go("nosotros")} aria-label="Conocer más">
        <span>Descubre Oasis</span>
        <span className="scroll-dot" />
      </button>
    </header>
  );
}

window.SunsetScene = SunsetScene;
window.Hero = Hero;