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

/* ---------------- Logo ---------------- */
function Logo({ small }) {
  return (
    <a href="#" className="logo" aria-label="INEX AI-Native">
      <img
        src="assets/logo-dark.png"
        alt="INEX AI-Native"
        style={{
          height: 140,
          width: 'auto',
          display: 'block',
        }}
      />
    </a>
  );
}

/* ---------------- Lang switch ---------------- */
function LangSwitch() {
  const { lang, setLang } = window.useT();
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
      <span className="sep" aria-hidden="true">/</span>
      <button className={lang === 'pt' ? 'on' : ''} onClick={() => setLang('pt')}>PT</button>
    </div>
  );
}

/* ---------------- Nav ---------------- */
function Nav() {
  const { t } = window.useT();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#shift">{t.nav.shift}</a>
          <a href="#solution">{t.nav.method}</a>
          <a href="#agents">{t.nav.agents}</a>
          <a href="#results">{t.nav.results}</a>
          <a href="#synapse">{t.nav.synapse}</a>
          <a href="#parent" style={{ color: 'var(--fg-2)' }}>{t.nav.about}</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LangSwitch />
          <a href="#cta" className="btn btn-primary nav-cta" style={{ padding: '10px 16px', fontSize: 14 }}>
            {t.nav.cta} <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ---------------- Animated Constellation (hero visual) ---------------- */
function AgentConstellation() {
  const canvasRef = useRef(null);
  const { t } = window.useT();
  useEffect(() => {
    const cnv = canvasRef.current;
    if (!cnv) return;
    const ctx = cnv.getContext('2d');
    let raf, time = 0;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    const resize = () => {
      const r = cnv.getBoundingClientRect();
      cnv.width = r.width * dpr;
      cnv.height = r.height * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(() => {
      if (window.__inex_ro_raf) return;
      window.__inex_ro_raf = requestAnimationFrame(() => { window.__inex_ro_raf = 0; resize(); });
    });
    ro.observe(cnv);

    const agentLabels = ['PM', 'REQ', 'ARCH', 'SM', 'DEV', 'QA'];
    const N = 6;

    const draw = () => {
      const w = cnv.clientWidth, h = cnv.clientHeight;
      if (w < 50 || h < 50) { raf = requestAnimationFrame(draw); return; }
      ctx.clearRect(0, 0, w, h);
      const cx = w / 2, cy = h / 2;
      const R = Math.min(w, h) * 0.36;

      ctx.strokeStyle = 'rgba(255,255,255,0.04)';
      ctx.lineWidth = 1;
      ctx.beginPath(); ctx.arc(cx, cy, R + 30, 0, Math.PI * 2); ctx.stroke();
      ctx.beginPath(); ctx.arc(cx, cy, R - 18, 0, Math.PI * 2); ctx.stroke();

      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(time * 0.0004);
      for (let i = 0; i < 60; i++) {
        const a = (i / 60) * Math.PI * 2;
        ctx.strokeStyle = i % 5 === 0 ? 'rgba(74,122,255,0.45)' : 'rgba(255,255,255,0.06)';
        ctx.beginPath();
        ctx.moveTo(Math.cos(a) * (R + 30), Math.sin(a) * (R + 30));
        ctx.lineTo(Math.cos(a) * (R + 36), Math.sin(a) * (R + 36));
        ctx.stroke();
      }
      ctx.restore();

      const positions = [];
      for (let i = 0; i < N; i++) {
        const a = (i / N) * Math.PI * 2 - Math.PI / 2 + Math.sin(time * 0.0003) * 0.05;
        positions.push([cx + Math.cos(a) * R, cy + Math.sin(a) * R, agentLabels[i], a]);
      }

      positions.forEach(([x, y], i) => {
        const phase = (time * 0.001 + i / N) % 1;
        const grad = ctx.createLinearGradient(cx, cy, x, y);
        grad.addColorStop(0, 'rgba(30,91,255,0.55)');
        grad.addColorStop(1, 'rgba(30,91,255,0.05)');
        ctx.strokeStyle = grad;
        ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(x, y); ctx.stroke();

        const px = cx + (x - cx) * phase;
        const py = cy + (y - cy) * phase;
        ctx.beginPath(); ctx.arc(px, py, 3, 0, Math.PI * 2);
        ctx.fillStyle = '#4DD8FF';
        ctx.shadowColor = '#4DD8FF'; ctx.shadowBlur = 12;
        ctx.fill(); ctx.shadowBlur = 0;
      });

      ctx.strokeStyle = 'rgba(255,255,255,0.05)';
      for (let i = 0; i < N; i++) {
        const [x1, y1] = positions[i];
        const [x2, y2] = positions[(i + 2) % N];
        ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
      }

      positions.forEach(([x, y, label], i) => {
        const breathe = 1 + Math.sin(time * 0.002 + i) * 0.06;
        const glow = ctx.createRadialGradient(x, y, 0, x, y, 30);
        glow.addColorStop(0, 'rgba(30,91,255,0.35)');
        glow.addColorStop(1, 'rgba(30,91,255,0)');
        ctx.fillStyle = glow;
        ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI * 2); ctx.fill();

        ctx.fillStyle = '#0B0F17';
        ctx.strokeStyle = 'rgba(74,122,255,0.7)';
        ctx.lineWidth = 1.5;
        ctx.beginPath(); ctx.arc(x, y, 14 * breathe, 0, Math.PI * 2); ctx.fill(); ctx.stroke();

        ctx.fillStyle = '#4A7AFF';
        ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill();

        ctx.fillStyle = 'rgba(199,204,214,0.85)';
        ctx.font = '500 10px JetBrains Mono, monospace';
        ctx.textAlign = 'center';
        const ly = y + (Math.sin((i / N) * Math.PI * 2 - Math.PI / 2) > 0 ? 36 : -28);
        ctx.fillText(label, x, ly);
      });

      const pulse = 1 + Math.sin(time * 0.003) * 0.08;
      const cglow = ctx.createRadialGradient(cx, cy, 0, cx, cy, 80 * pulse);
      cglow.addColorStop(0, 'rgba(30,91,255,0.4)');
      cglow.addColorStop(1, 'rgba(30,91,255,0)');
      ctx.fillStyle = cglow;
      ctx.beginPath(); ctx.arc(cx, cy, 80 * pulse, 0, Math.PI * 2); ctx.fill();

      ctx.fillStyle = '#04060A';
      ctx.strokeStyle = '#1E5BFF';
      ctx.lineWidth = 2;
      ctx.beginPath(); ctx.arc(cx, cy, 38, 0, Math.PI * 2); ctx.fill(); ctx.stroke();

      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(time * 0.0006);
      ctx.strokeStyle = '#4A7AFF';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const a = (i / 6) * Math.PI * 2;
        const x = Math.cos(a) * 16;
        const y = Math.sin(a) * 16;
        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
      }
      ctx.closePath(); ctx.stroke();
      ctx.fillStyle = '#4DD8FF';
      ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); ctx.fill();
      ctx.restore();

      ctx.fillStyle = 'rgba(255,255,255,0.7)';
      ctx.font = '600 9px JetBrains Mono, monospace';
      ctx.textAlign = 'center';
      ctx.fillText('ORCHESTRATOR', cx, cy + 56);

      time += 16;
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);

  return (
    <div className="hero-visual">
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%', display: 'block' }} />
    </div>
  );
}

/* ---------------- Marquee ---------------- */
function Marquee() {
  const { t } = window.useT();
  const all = [...t.marquee, ...t.marquee];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((it, i) => (
          <div className="marquee-item" key={i}>
            <span className="bar"></span>{it}
          </div>
        ))}
      </div>
    </div>
  );
}

window.Logo = Logo;
window.Nav = Nav;
window.Marquee = Marquee;
window.AgentConstellation = AgentConstellation;
window.LangSwitch = LangSwitch;