// Hero, Nav, and shared bits

const { useEffect: useEffectH, useState: useStateH, useRef: useRefH } = React;

function Nav({ t, lang, setLang }) {
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "20px 0",
      backdropFilter: "blur(14px)",
      WebkitBackdropFilter: "blur(14px)",
      background: "rgba(7,8,11,0.55)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--ff-mono)", fontSize: 13, fontWeight: 600, letterSpacing: "0.04em" }}>
          <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--accent-fg)", fontWeight: 800, fontSize: 11 }}>NR</span>
          <span>NR-INTERACTIONS<span style={{ color: "var(--accent)" }}>.</span></span>
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }} className="nav-links">
          {["services", "plans", "portfolio", "process", "contact"].map(k => (
            <a key={k} href={`#${k}`} style={{ fontSize: 13, color: "var(--fg-1)", letterSpacing: "-0.005em" }} className="nav-link">{t.nav[k]}</a>
          ))}
          <button
            onClick={() => setLang(lang === "es" ? "en" : "es")}
            style={{
              background: "transparent",
              border: "1px solid var(--line-strong)",
              color: "var(--fg-0)",
              padding: "6px 12px",
              borderRadius: 999,
              fontSize: 11,
              fontFamily: "var(--ff-mono)",
              letterSpacing: "0.1em",
              display: "flex", gap: 6, alignItems: "center",
            }}
          >
            <span style={{ color: lang === "es" ? "var(--accent)" : "var(--fg-3)" }}>ES</span>
            <span style={{ color: "var(--fg-3)" }}>/</span>
            <span style={{ color: lang === "en" ? "var(--accent)" : "var(--fg-3)" }}>EN</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ t, variant }) {
  const [time, setTime] = useStateH("");
  const wrapRef = useRefH(null);
  const [mouse, setMouse] = useStateH({ x: 0.5, y: 0.5 });

  useEffectH(() => {
    const update = () => {
      const d = new Date();
      const opts = { timeZone: "America/Santiago", hour: "2-digit", minute: "2-digit", hour12: false };
      setTime(d.toLocaleTimeString("en-GB", opts) + " SCL");
    };
    update();
    const id = setInterval(update, 30000);
    return () => clearInterval(id);
  }, []);

  useEffectH(() => {
    const onMove = (e) => {
      if (!wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section ref={wrapRef} id="top" style={{ position: "relative", paddingTop: 140, paddingBottom: 100, overflow: "hidden", minHeight: "100vh" }}>
      <div className="grid-bg" />
      {/* parallax orb */}
      <div style={{
        position: "absolute",
        top: `${20 + mouse.y * 10}%`,
        right: `${5 + mouse.x * 6}%`,
        width: 480, height: 480,
        borderRadius: "50%",
        background: "radial-gradient(circle, var(--accent-soft), transparent 70%)",
        filter: "blur(40px)",
        pointerEvents: "none",
        transition: "top 1.2s var(--ease), right 1.2s var(--ease)",
      }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="reveal in" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 40 }}>
          <span className="eyebrow"><span className="dot"></span>{t.hero.eyebrow}</span>
          <span className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ok)", boxShadow: "0 0 8px var(--ok)" }} />
            {time}
          </span>
        </div>

        <h1 className="h1 reveal in reveal--delay-1" style={{ marginBottom: 32 }}>
          {t.hero.title_a} <span className="accent-text">{t.hero.title_b}</span>
          {t.hero.title_c} <span className="italic">{t.hero.title_d}</span>.
        </h1>

        <p className="lead reveal in reveal--delay-2" style={{ marginBottom: 40 }}>{t.hero.lead}</p>

        <div className="reveal in reveal--delay-3" style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 80 }}>
          <a href="#contact" className="btn btn--primary btn--lg">
            {t.hero.cta_primary}
            <span className="arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
          </a>
          <a href="#plans" className="btn btn--ghost btn--lg">{t.hero.cta_secondary}</a>
        </div>

        {/* stats strip */}
      </div>

      {/* terminal mini */}
      <div style={{
        position: "absolute",
        right: "max(4vw, 30px)",
        top: 180,
        width: 280,
        background: "var(--bg-2)",
        border: "1px solid var(--line)",
        borderRadius: "var(--r-md)",
        fontFamily: "var(--ff-mono)",
        fontSize: 11,
        overflow: "hidden",
        boxShadow: "0 30px 60px rgba(0,0,0,0.5)",
        transform: `translate(${(mouse.x - 0.5) * -8}px, ${(mouse.y - 0.5) * -8}px)`,
        transition: "transform 0.6s var(--ease)",
        display: "var(--terminal-display, block)",
      }} className="hero-terminal">
        <div style={{ display: "flex", gap: 6, padding: "10px 12px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#ff5f56" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#ffbd2e" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#27c93f" }} />
          <span style={{ marginLeft: "auto", color: "var(--fg-3)", fontSize: 10 }}>nr-build.sh</span>
        </div>
        <div style={{ padding: "14px 14px", lineHeight: 1.7 }}>
          <div style={{ color: "var(--fg-3)" }}>$ npm run build</div>
          <div style={{ color: "var(--fg-1)" }}>compiling design...</div>
          <div style={{ color: "var(--fg-1)" }}>optimizing assets...</div>
          <div style={{ color: "var(--accent)" }}>✓ shipped in 0.42s</div>
          <div style={{ color: "var(--fg-3)", marginTop: 6 }}>$ <span style={{ borderRight: "2px solid var(--accent)", animation: "pulse 1s steps(2) infinite" }}>_</span></div>
        </div>
      </div>
    </section>
  );
}

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