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

/* ======================================================
   Cursor — small, mix-blend
   ====================================================== */
function Cursor() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let x = window.innerWidth / 2, y = window.innerHeight / 2;
    let tx = x, ty = y;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const onOver = (e) => {
      const t = e.target;
      if (t.closest && t.closest('a, button, .svc, .case, .contact-email')) el.classList.add('hover');
      else el.classList.remove('hover');
    };
    const tick = () => {
      x += (tx - x) * 0.2;
      y += (ty - y) * 0.2;
      el.style.transform = `translate(${x}px, ${y}px) translate(-50%,-50%)`;
      requestAnimationFrame(tick);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);
    tick();
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
    };
  }, []);
  return <div ref={ref} className="cursor" />;
}

/* ======================================================
   Live clock — São Paulo
   ====================================================== */
function Clock() {
  const [t, setT] = useState('');
  useEffect(() => {
    const fmt = () => {
      const d = new Date();
      const opts = { hour: '2-digit', minute: '2-digit', timeZone: 'America/Sao_Paulo', hour12: false };
      setT(new Intl.DateTimeFormat('pt-BR', opts).format(d));
    };
    fmt();
    const id = setInterval(fmt, 1000 * 15);
    return () => clearInterval(id);
  }, []);
  return <span className="mono" data-no-i18n style={{color:'var(--mute)'}}>RS / {t}</span>;
}

/* ======================================================
   LANGUAGE SWITCHER — BR · EN · ES (live site translation)
   ====================================================== */
function LangSwitcher() {
  const [state, setState] = React.useState({ lang: 'pt', busy: false });
  React.useEffect(() => {
    if (!window.__i18n) return;
    return window.__i18n.subscribe(setState);
  }, []);
  const LANGS = [['pt', 'BR'], ['en', 'EN'], ['es', 'ES']];
  return (
    <div className="lang-switch" data-no-i18n role="group" aria-label="Idioma">
      {LANGS.map(([code, label]) => (
        <button
          key={code}
          type="button"
          className={'lang-btn' + (state.lang === code ? ' on' : '')}
          aria-pressed={state.lang === code}
          disabled={state.busy}
          onClick={() => window.__i18n && window.__i18n.setLang(code)}
        >{label}</button>
      ))}
      {state.busy && <span className="lang-spin" aria-hidden="true" />}
    </div>
  );
}

/* ======================================================
   Reveal on scroll
   ====================================================== */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.01, rootMargin: '0px 0px 0px 0px' });
    els.forEach(el => io.observe(el));
    // Safety net: force-reveal anything still hidden after 2.5s
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => el.classList.add('in'));
    }, 2500);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

/* ======================================================
   NAV
   ====================================================== */
function Nav() {
  return (
    <nav className="nav">
      <a className="nav-brand" href="#">
        <img src="assets/morse-wordmark-white.png" alt="Morse Craft Design" className="nav-logo nav-logo--dark" />
        <img src="assets/morse-wordmark-black.png" alt="" className="nav-logo nav-logo--light" aria-hidden="true" />
      </a>
      <div className="nav-links">
        <a href="#estudio">Studio</a>
        <a href="#servicos">Capabilities</a>
        <a href="#projetos">Work</a>
        <a href="#fundador">Founder</a>
        <a href="#contato">Contact</a>
      </div>
      <div className="nav-cta">
        <LangSwitcher />
        <span className="nav-pill"><span className="live" /> Accepting Projects</span>
        <Clock />
      </div>
    </nav>
  );
}

/* ======================================================
   HERO
   ====================================================== */
function Hero() {
  return (
    <header className="hero wrap">
      <div className="hero-top">
        <div className="left">
          <span className="strong">Made in Brazil</span>
          <span>·</span>
          <span>Independent Studio</span>
        </div>
        <div className="right">
          <MorseSignal />
        </div>
      </div>

      <h1 className="hero-title reveal">
        <span className="row">Morse</span>
        <span className="row"><span className="thin mute">Craft</span></span>
        <span className="row">Design</span>
      </h1>

      <div className="hero-meta">
        <div>
          <div className="lede">
            Conectamos estratégia, design, conteúdo e tecnologia para criar
            experiências relevantes, fortalecer narrativas e construir valor
            de longo prazo.
          </div>
        </div>
        <div className="hero-meta-stats">
          <div>
            <div className="k">// Processo</div>
            <div className="v">Menos ruído. Mais intenção.</div>
          </div>
          <div>
            <div className="k">// Relações</div>
            <div className="v">Poucos clientes. Mais presença.</div>
          </div>
          <div>
            <div className="k">// Tecnologia</div>
            <div className="v">IA como ampliação criativa.</div>
          </div>
        </div>
      </div>

      <Marquee />
    </header>
  );
}

/* ======================================================
   MORSE SIGNAL — live transmitter spelling "MORSE"
   ====================================================== */
function MorseSignal() {
  // M O R S E  →  letters as dot/dash sequences
  const WORD = [
    ['dash', 'dash'],            // M
    ['dash', 'dash', 'dash'],    // O
    ['dot', 'dash', 'dot'],      // R
    ['dot', 'dot', 'dot'],       // S
    ['dot'],                     // E
  ];
  // flatten with letter index for gap logic
  const symbols = [];
  WORD.forEach((letter, li) => letter.forEach((t) => symbols.push({ type: t, li })));

  const [active, setActive] = React.useState(-1);

  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setActive(-1); return; }
    const unit = 135;
    let idx = 0;
    let timer;
    const run = () => {
      const sym = symbols[idx];
      setActive(idx);
      const onDur = sym.type === 'dash' ? unit * 3 : unit;
      timer = setTimeout(() => {
        setActive(-1);
        const next = symbols[idx + 1];
        let gap = unit;                          // inter-symbol
        if (!next) gap = unit * 7;               // word reset
        else if (next.li !== sym.li) gap = unit * 3; // inter-letter
        timer = setTimeout(() => {
          idx = (idx + 1) % symbols.length;
          run();
        }, gap);
      }, onDur);
    };
    run();
    return () => clearTimeout(timer);
  }, []);

  let gi = -1;
  return (
    <div className="hero-signal" data-no-i18n aria-hidden="true">
      <span className="sig-live" />
      <span className="sig-label">Transmitting</span>
      <div className="sig-stream">
        {WORD.map((letter, li) => (
          <span className="sig-letter" key={li}>
            {letter.map((t) => {
              gi += 1;
              const cur = gi;
              return (
                <span
                  key={cur}
                  className={`sig-${t}${cur === active ? ' on' : ''}`}
                />
              );
            })}
          </span>
        ))}
      </div>
    </div>
  );
}

function Marquee() {
  const items = [
    'Strategy', 'Brand Design',
    'Editorial & Information Design', 'Culture & Institutional Communication',
    'Digital Experience', 'Content & Social Systems',
    'AI Creative Studio',
  ];
  const row = (
    <>
      {items.map((it, i) => (
        <span key={i} className="item">
          <span className="star">✦</span>
          <span>{it}</span>
        </span>
      ))}
    </>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{row}{row}{row}</div>
    </div>
  );
}

window.Cursor = Cursor;
window.Clock = Clock;
window.Nav = Nav;
window.Hero = Hero;
window.useReveal = useReveal;