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

/* ============================================================
   GÊNESIS — Logo component (G with diagonal slash)
   Recreated faithfully from the brand manual.
   ============================================================ */
function GenesisLogo({ size = 36, variant = "full", color }) {
  if (variant === "full") {
    return (
      <img
        src={(window.__resources && window.__resources.genesisLogo) || "logo-genesis.png"}
        alt="Gênesis S/A — Governança com Inteligência Operacional"
        className="gen-logo-img"
        style={{ height: Math.round(size * 1.32), width: "auto", display: "block" }}
      />
    );
  }
  if (variant === "icon") {
    return (
      <img
        src={window.__resources.genesisG}
        alt="Gênesis S/A"
        className="gen-logo-img"
        style={{ height: size, width: "auto", display: "block" }}
      />
    );
  }
  const fg = color || "currentColor";
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true" className="gen-logo-img gen-logo-mark">
      <path d="M44 18a16 16 0 1 0 4 22h-16v-6h22v8a22 22 0 1 1-2-28z" fill="var(--gen-cyan)" />
      <path d="M8 56 L56 8" stroke={fg} strokeWidth="3" strokeLinecap="square" />
    </svg>
  );
}

/* Decorative slash motif — appears in section corners */
function SlashMotif({ opacity = 0.06 }) {
  return (
    <div className="gen-slash" style={{ opacity }} aria-hidden="true">
      <svg viewBox="0 0 1200 600" preserveAspectRatio="none">
        <path d="M-50 650 L850 -50" />
        <path d="M150 700 L1100 -100" />
        <path d="M-100 720 L 600 0  L 1200 500 L 700 720 Z" strokeOpacity="0.4" />
      </svg>
    </div>
  );
}

/* ============================================================
   Reveal-on-scroll wrapper
   ============================================================ */
function Reveal({ children, stagger = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && el.classList.add("in")),
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`gen-reveal ${className}`} data-stagger={stagger} {...rest}>
      {children}
    </Tag>
  );
}

/* ============================================================
   Rotating word (hero)
   ============================================================ */
function RotatingWord({ words, interval = 2400 }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % words.length), interval);
    return () => clearInterval(t);
  }, [words.length, interval]);
  return (
    <span className="gen-rotate">
      <span key={i} className="gen-rotate__inner">{words[i]}</span>
    </span>
  );
}

/* ============================================================
   Eyebrow + structured section header
   ============================================================ */
function Eyebrow({ children, number }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
      {number && (
        <span style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: "var(--accent)", letterSpacing: "0.22em" }}>
          {number}
        </span>
      )}
      <span aria-hidden="true" style={{
        flex: "0 0 32px",
        height: 1,
        background: "var(--accent)",
        opacity: 0.6
      }} />
      <span className="gen-eyebrow" style={{ color: "var(--fg-muted)" }}>{children}</span>
    </div>
  );
}

/* ============================================================
   COUNT UP — número que sobe quando entra na tela
   ============================================================ */
function CountUp({ value, suffix = "", prefix = "", dur = 1400, decimals = 0 }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const done = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting || done.current) return;
      done.current = true;
      const t0 = performance.now();
      const tick = (now) => {
        const t = Math.min((now - t0) / dur, 1);
        const e = 1 - Math.pow(1 - t, 3);
        setN(value * e);
        if (t < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value, dur]);
  const shown = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toLocaleString("pt-BR");
  return <span ref={ref}>{prefix}{shown}{suffix}</span>;
}

/* Number badge — for "01 / 06" style */
function StepBadge({ n }) {
  return (
    <div className="gen-stepbadge" style={{
      width: 56, height: 56, borderRadius: "50%",
      border: "1px solid var(--line-strong)",
      display: "grid", placeItems: "center",
      fontFamily: "var(--ff-mono)", fontSize: 13, letterSpacing: "0.1em",
      color: "var(--accent)",
      flexShrink: 0
    }}>{n}</div>
  );
}

Object.assign(window, { GenesisLogo, SlashMotif, Reveal, RotatingWord, Eyebrow, StepBadge, CountUp });