/* atoms.jsx — icons, badges, small primitives shared across sections */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Inline icons (line-style, gamer/tech) ---------- */
const Icon = ({ name, size = 18, stroke = 1.6, className = "", style = {} }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
    className, style,
  };
  switch (name) {
    case "bolt":
      return <svg {...props}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></svg>;
    case "cpu":
      return <svg {...props}><rect x="5" y="5" width="14" height="14" rx="1"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>;
    case "gauge":
      return <svg {...props}><path d="M3 14a9 9 0 0118 0"/><path d="M12 14l4-4"/><circle cx="12" cy="14" r="1.2" fill="currentColor"/></svg>;
    case "shield":
      return <svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "rotate":
      return <svg {...props}><path d="M21 12a9 9 0 11-3-6.7"/><path d="M21 4v5h-5"/></svg>;
    case "chip":
      return <svg {...props}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg>;
    case "list":
      return <svg {...props}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/></svg>;
    case "drivers":
      return <svg {...props}><rect x="3" y="6" width="18" height="12" rx="1"/><path d="M7 10v4M11 10v4M15 10v4M19 10v4"/></svg>;
    case "grid":
      return <svg {...props}><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></svg>;
    case "spark":
      return <svg {...props}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></svg>;
    case "users":
      return <svg {...props}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.2"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2 2-4 4-4s4 1.5 4 4"/></svg>;
    case "play":
      return <svg {...props}><path d="M6 4l14 8-14 8V4z" fill="currentColor" stroke="none"/></svg>;
    case "arrow":
      return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "check":
      return <svg {...props}><path d="M5 12l4 4L19 6"/></svg>;
    case "x":
      return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "plus":
      return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case "minus":
      return <svg {...props}><path d="M5 12h14"/></svg>;
    case "windows":
      return <svg {...props}><path d="M3 5l8-1v8H3V5zM13 4l8-1v10h-8V4zM3 13h8v8l-8-1v-7zM13 13h8v9l-8-1v-8z" fill="currentColor" stroke="none"/></svg>;
    case "memory":
      return <svg {...props}><rect x="3" y="8" width="18" height="9" rx="1"/><path d="M7 8v9M11 8v9M15 8v9M19 8v9"/></svg>;
    case "disk":
      return <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>;
    case "gpu":
      return <svg {...props}><rect x="2" y="7" width="20" height="10" rx="1"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/></svg>;
    case "process":
      return <svg {...props}><rect x="3" y="4" width="18" height="4"/><rect x="3" y="10" width="14" height="4"/><rect x="3" y="16" width="10" height="4"/></svg>;
    case "lightning":
      return <svg {...props}><path d="M11 2L4 14h6l-1 8 8-12h-6l0-8z" fill="currentColor" stroke="none"/></svg>;
    case "lock":
      return <svg {...props}><rect x="5" y="11" width="14" height="9" rx="1"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case "ai":
      return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M12 4v3M12 17v3M4 12h3M17 12h3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg>;
    case "search":
      return <svg {...props}><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>;
    case "discord":
      return <svg {...props}><path d="M19 6c-1.5-.7-3-1-4.5-1.2l-.2.4c1.4.4 2.5.9 3.6 1.6-1.5-.7-3-1-4.5-1-1.5 0-3 .3-4.5 1 1.1-.7 2.2-1.2 3.6-1.6l-.2-.4C10.8 5 9.3 5.3 7.8 6 5.4 9 4.7 12 5 15c1.5 1 3 1.6 4.6 2l.6-1c-1-.3-2-.7-2.8-1.3.2.1.5.3.8.4 2.4 1.1 5.3 1.1 7.7 0 .3-.1.5-.3.8-.4-.8.6-1.8 1-2.8 1.3l.6 1c1.6-.4 3.1-1 4.6-2 .3-3-.4-6-2.1-9zM10 13c-.7 0-1.3-.6-1.3-1.5S9.3 10 10 10c.7 0 1.3.7 1.3 1.5S10.7 13 10 13zm5 0c-.7 0-1.3-.6-1.3-1.5S14.3 10 15 10c.7 0 1.3.7 1.3 1.5S15.7 13 15 13z" fill="currentColor" stroke="none"/></svg>;
    case "youtube":
      return <svg {...props}><path d="M21.6 7.2a3 3 0 00-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5a3 3 0 00-2.1 2.1A31.2 31.2 0 002 12a31.2 31.2 0 00.4 4.8 3 3 0 002.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 002.1-2.1A31.2 31.2 0 0022 12a31.2 31.2 0 00-.4-4.8z"/><path d="M10 15.2V8.8l5.6 3.2L10 15.2z" fill="currentColor" stroke="none"/></svg>;
    case "instagram":
      return <svg {...props}><rect x="4" y="4" width="16" height="16" rx="5"/><circle cx="12" cy="12" r="3.2"/><circle cx="16.8" cy="7.2" r=".9" fill="currentColor" stroke="none"/></svg>;
    case "tiktok":
      return <svg {...props}><path d="M14 4v9.2a4.4 4.4 0 11-4-4.38"/><path d="M14 4c.5 2.8 2.2 4.5 5 4.8"/></svg>;
    default:
      return <svg {...props}><circle cx="12" cy="12" r="6"/></svg>;
  }
};

/* ---------- Animated counter ---------- */
const Counter = ({ to = 100, duration = 1400, suffix = "", prefix = "", className = "" }) => {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref} className={className}>{prefix}{val.toLocaleString("pt-BR")}{suffix}</span>;
};

/* ---------- Bar (animated) ---------- */
const Bar = ({ value = 50, max = 100, color = "var(--accent)", height = 6, label, sub, animated = true }) => {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--font-mono)", fontSize: 11 }}>
      {(label || sub) && (
        <div style={{ display: "flex", justifyContent: "space-between", color: "var(--fg-dim)" }}>
          <span style={{ letterSpacing: "0.05em", textTransform: "uppercase" }}>{label}</span>
          <span style={{ color: "var(--fg)" }}>{sub}</span>
        </div>
      )}
      <div style={{ height, background: "var(--bg-3)", border: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
        <div style={{
          width: `${pct}%`, height: "100%",
          background: `linear-gradient(90deg, ${color}aa, ${color})`,
          boxShadow: `0 0 8px ${color}55`,
          transition: animated ? "width 1.2s cubic-bezier(.2,.7,.2,1)" : "none",
        }} />
      </div>
    </div>
  );
};

/* ---------- Badges: risk / reversibility ---------- */
const RiskBadge = ({ level }) => {
  const map = {
    low:    { tag: "OK",  cls: "ok",   label: "Baixo risco" },
    med:    { tag: "!!",  cls: "warn", label: "Médio risco" },
    high:   { tag: "!!!", cls: "bad",  label: "Avançado" },
  };
  const it = map[level] || map.low;
  return <span className={`tag ${it.cls}`}><span className="dot"></span>{it.label}</span>;
};

/* ---------- Sparkline (cosmetic) ---------- */
const Sparkline = ({ data = [], color = "var(--accent)", height = 28, width = 100 }) => {
  const max = Math.max(...data, 1);
  const min = Math.min(...data, 0);
  const range = max - min || 1;
  const step = width / (data.length - 1 || 1);
  const points = data.map((v, i) => `${i * step},${height - ((v - min) / range) * height}`).join(" ");
  return (
    <svg width={width} height={height} style={{ overflow: "visible" }}>
      <polyline points={points} fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
      <polyline points={`${points} ${width},${height} 0,${height}`} fill={color} opacity="0.12"/>
    </svg>
  );
};

/* ---------- Bracketed frame wrapper ---------- */
const Brackets4 = ({ children, className = "", style = {} }) => (
  <div className={`brackets-4 ${className}`} style={{ position: "relative", ...style }}>
    <span className="bk bk-tl"></span>
    <span className="bk bk-tr"></span>
    <span className="bk bk-bl"></span>
    <span className="bk bk-br"></span>
    {children}
  </div>
);

/* ---------- Section header ---------- */
const SectionHead = ({ eyebrow, title, lead, align = "left", id }) => (
  <div className="section-head" style={{ alignItems: align === "center" ? "center" : "flex-start", textAlign: align, margin: align === "center" ? "0 auto 56px" : undefined }}>
    {id && <div className="mono" style={{ fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.2em" }}>{id}</div>}
    {eyebrow && <span className="eyebrow">{eyebrow}</span>}
    <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
    {lead && <p className="lead">{lead}</p>}
  </div>
);

Object.assign(window, { Icon, Counter, Bar, RiskBadge, Sparkline, Brackets4, SectionHead });