// Hero + Nav + animated background
const { useEffect, useRef, useState } = React;

function HeroBackground() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const c = canvasRef.current; if (!c) return;
    const ctx = c.getContext('2d');
    let w, h, raf, t0 = performance.now();
    let visible = true;
    let reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const resize = () => {
      w = c.offsetWidth; h = c.offsetHeight;
      c.width = w * dpr; c.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener('resize', resize);

    // Pause canvas when scrolled out of view (battery + perf)
    const io = new IntersectionObserver((entries) => {
      visible = entries[0].isIntersecting;
      if (visible && !raf) raf = requestAnimationFrame(draw);
    }, { threshold: 0 });
    io.observe(c);

    // Pause when tab hidden
    const onVis = () => {
      if (document.hidden) { cancelAnimationFrame(raf); raf = null; }
      else if (visible && !raf) raf = requestAnimationFrame(draw);
    };
    document.addEventListener('visibilitychange', onVis);

    const cols = 44, rows = 22;
    const draw = (now) => {
      if (!visible || document.hidden) { raf = null; return; }
      const t = (now - t0) / 1000;
      ctx.clearRect(0, 0, w, h);
      for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
          const x = (i / (cols - 1)) * w;
          const y = (j / (rows - 1)) * h;
          const d = reduced ? 0 :
            Math.sin(x * 0.008 + t * 0.6) + Math.cos(y * 0.012 - t * 0.4) + Math.sin((x + y) * 0.006 + t * 0.9);
          const intensity = (d + 3) / 6;
          const size = 0.6 + intensity * 1.6;
          const alpha = 0.08 + intensity * 0.22;
          const cx = w / 2, cy = h / 2;
          const dist = Math.hypot(x - cx, y - cy);
          const glow = Math.max(0, 1 - dist / (Math.min(w, h) * 0.55));
          if (glow > 0.01 && Math.random() > 0.985) {
            ctx.fillStyle = `oklch(0.88 0.22 130 / ${0.3 + glow * 0.4})`;
          } else {
            ctx.fillStyle = `rgba(244,244,239,${alpha * (0.3 + glow)})`;
          }
          ctx.beginPath();
          ctx.arc(x, y, size, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      raf = requestAnimationFrame(draw);
    };
    raf = requestAnimationFrame(draw);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      document.removeEventListener('visibilitychange', onVis);
      io.disconnect();
    };
  }, []);
  return <canvas ref={canvasRef} className="hero-canvas" aria-hidden="true" />;
}

// Helper: link do WhatsApp com mensagem pré-preenchida bilíngue
function buildWhatsAppHref(t, lang) {
  const text = encodeURIComponent(lang === 'pt'
    ? 'Oi! Cheguei pelo site da Cerne. Quero conversar sobre um projeto.'
    : 'Hi! I came from the Cerne site. I\'d like to talk about a project.');
  return `https://wa.me/${t.contact.whatsapp}?text=${text}`;
}

function LangSwitch({ lang, setLang }) {
  return (
    <div className="lang-switch" data-cursor>
      <button onClick={() => setLang('pt')} className={lang === 'pt' ? 'on' : ''} aria-label="Português">PT</button>
      <span aria-hidden="true">/</span>
      <button onClick={() => setLang('en')} className={lang === 'en' ? 'on' : ''} aria-label="English">EN</button>
    </div>
  );
}

function MobileMenu({ open, onClose, t, lang, setLang }) {
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  if (!open) return null;
  const close = () => onClose();
  return (
    <div className="mobile-menu" role="dialog" aria-modal="true">
      <div className="mobile-menu-head">
        <span className="logo mono">CERNE<span className="logo-dot">·</span>AI</span>
        <button className="mobile-close" onClick={close} aria-label="Fechar menu">✕</button>
      </div>
      <nav className="mobile-menu-links">
        <a href="#work" onClick={close}>{t.nav.work}</a>
        <a href="#services" onClick={close}>{t.nav.services}</a>
        <a href="#process" onClick={close}>{t.nav.process}</a>
        <a href="#lab" onClick={close}>{t.nav.lab}</a>
        <a href="#contact" onClick={close}>{t.nav.contact}</a>
      </nav>
      <div className="mobile-menu-foot">
        <LangSwitch lang={lang} setLang={(l) => { setLang(l); }} />
        <a
          href={buildWhatsAppHref(t, lang)}
          target="_blank"
          rel="noopener noreferrer"
          className="btn primary"
          onClick={close}
        >
          {t.hero.cta} <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}

function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="#top" className="logo" data-cursor aria-label="Cerne AI — início">
            <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true">
              <circle cx="16" cy="16" r="15" stroke="currentColor" strokeWidth="1.5"/>
              <circle cx="16" cy="16" r="5" fill="currentColor"/>
              <line x1="16" y1="1" x2="16" y2="11" stroke="currentColor" strokeWidth="1.5"/>
              <line x1="16" y1="21" x2="16" y2="31" stroke="currentColor" strokeWidth="1.5"/>
              <line x1="1" y1="16" x2="11" y2="16" stroke="currentColor" strokeWidth="1.5"/>
              <line x1="21" y1="16" x2="31" y2="16" stroke="currentColor" strokeWidth="1.5"/>
            </svg>
            <span>CERNE<span className="logo-dot">·</span>AI</span>
          </a>
          <div className="nav-links mono">
            <a href="#work" data-cursor>{t.nav.work}</a>
            <a href="#services" data-cursor>{t.nav.services}</a>
            <a href="#process" data-cursor>{t.nav.process}</a>
            <a href="#lab" data-cursor>{t.nav.lab}</a>
            <a href="#contact" data-cursor>{t.nav.contact}</a>
          </div>
          <div className="nav-right">
            <LangSwitch lang={lang} setLang={setLang} />
            <a
              href={buildWhatsAppHref(t, lang)}
              target="_blank"
              rel="noopener noreferrer"
              className="btn primary"
              data-cursor
            >
              {t.hero.cta} <span className="arrow">→</span>
            </a>
            <button
              className="hamburger"
              aria-label="Abrir menu"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(true)}
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
      </nav>
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} t={t} lang={lang} setLang={setLang} />
    </>
  );
}

function Hero({ t, lang }) {
  const [time, setTime] = useState('');
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, '0');
      const mm = String(d.getMinutes()).padStart(2, '0');
      const ss = String(d.getSeconds()).padStart(2, '0');
      setTime(`${hh}:${mm}:${ss}`);
    };
    tick(); const iv = setInterval(tick, 1000);
    return () => clearInterval(iv);
  }, []);
  return (
    <section id="top" className="hero">
      <HeroBackground />
      <div className="container hero-inner">
        <div className="hero-meta mono">
          <span className="eyebrow">{t.hero.eyebrow}</span>
          <span className="hero-time">PALMAS · {time}</span>
        </div>
        <h1 className="hero-title">
          {t.hero.title.map((line, i) => {
            if (typeof line === 'string') {
              return <span key={i} className="line">{line}</span>;
            }
            // Objeto { accent, plain } → linha com parte destacada inline
            return (
              <span key={i} className="line">
                <span className="serif accent">{line.accent}</span>{' '}{line.plain}
              </span>
            );
          })}
        </h1>
        <div className="hero-foot">
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-ctas">
            <a
              href={buildWhatsAppHref(t, lang)}
              target="_blank"
              rel="noopener noreferrer"
              className="btn primary"
              data-cursor
            >
              {t.hero.cta} <span className="arrow">→</span>
            </a>
            <a href="#work" className="btn" data-cursor>
              {t.hero.ctaAlt} <span className="arrow">↓</span>
            </a>
          </div>
        </div>
      </div>
      <div className="ticker" aria-hidden="true">
        <div className="ticker-track">
          {[...t.hero.ticker, ...t.hero.ticker, ...t.hero.ticker].map((x, i) => (
            <span key={i} className="ticker-item"><span className="bullet">◆</span> {x}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

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