// Variation F — "System / Lab" aesthetic. Live system-monitor hero,
// constellation stack graph, git-log experience, magnetic project cards,
// marquee dividers, layered blueprint grid, oversized mixed typography.

const { useState: useStateF, useEffect: useEffectF, useRef: useRefF, useMemo: useMemoF } = React;

// ─── Animated counter ───────────────────────────────────────────────────────
function useCounterF(target, opts = {}) {
  const { duration = 1400, decimals = 0, suffix = "" } = opts;
  const [val, setVal] = useStateF(0);
  const ref = useRefF(null);
  useEffectF(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const num = parseFloat(target);
          const tick = (t) => {
            const k = Math.min(1, (t - t0) / duration);
            const eased = 1 - Math.pow(1 - k, 3);
            setVal(num * eased);
            if (k < 1) requestAnimationFrame(tick);
            else setVal(num);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration]);
  return [ref, val.toFixed(decimals) + suffix];
}

// ─── Magnetic / spotlight card ──────────────────────────────────────────────
function MagCardF({ children, accent, style = {}, ...rest }) {
  const ref = useRefF(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;
    el.style.setProperty("--mx", `${x}px`);
    el.style.setProperty("--my", `${y}px`);
    const cx = r.width / 2;
    const cy = r.height / 2;
    const tx = (x - cx) / cx * 4;
    const ty = (y - cy) / cy * 4;
    el.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.transform = "translate3d(0,0,0)";
  };
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{
        position: "relative",
        transition: "transform .25s cubic-bezier(.2,.7,.2,1)",
        background: `radial-gradient(380px circle at var(--mx, -200px) var(--my, -200px), ${accent}1c, transparent 60%), var(--surface)`,
        ...style,
      }}
      {...rest}
    >
      {children}
    </div>
  );
}

// ─── MarqueeF ────────────────────────────────────────────────────────────────
function MarqueeF({ items, accent, speed = 60, reverse = false }) {
  const dup = [...items, ...items, ...items];
  return (
    <div style={{ overflow: "hidden", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", padding: "18px 0", background: "var(--bg)", position: "relative" }}>
      <div style={{
        display: "flex", gap: 48, whiteSpace: "nowrap",
        animation: `fMarqueeF ${speed}s linear infinite ${reverse ? "reverse" : "normal"}`,
        fontFamily: "var(--mono)", fontSize: 13, color: "var(--fg-dim)",
        // mq
      }}>
        {dup.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
            <span style={{ color: accent }}>◆</span>
            <span style={{ color: i % 3 === 0 ? "var(--fg)" : "var(--fg-dim)" }}>{it}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── AI Agent Terminal (Claude Code feel) ──────────────────────────────────
function AgentTerminalF({ accent, lang }) {
  const script = useMemoF(() => lang === "pt" ? [
    { kind: "user", t: "Vamos shippar billing multi-tenant. Spec-driven, do zero." },
    { kind: "thinking", t: "Lendo specs · derivando contratos · planejando testes antes do código…" },
    { kind: "tool", name: "read_spec", arg: "specs/billing/v1.md", out: "✓ 18 reqs" },
    { kind: "tool", name: "derive_contracts", arg: "openapi.yaml", out: "✓ 7 endpoints" },
    { kind: "agent", t: "Spec → contrato → testes → código. Gero os testes primeiro a partir das ACs (acceptance criteria) e implemento contra eles. Posso começar?" },
    { kind: "user", t: "Vai." },
    { kind: "tool", name: "write_tests", arg: "tests/Feature/Billing/*.php", out: "✓ 31 cases" },
    { kind: "tool", name: "implement", arg: "app/Domain/Billing", out: "✓ 6 files" },
    { kind: "tool", name: "run_tests", arg: "pest --coverage", out: "✓ 31/31 · 96% cov" },
    { kind: "agent", t: "Spec satisfeita · 31/31 verdes · cobertura 96% · pronto pra review." },
  ] : [
    { kind: "user", t: "Let's ship multi-tenant billing. Spec-driven, from scratch." },
    { kind: "thinking", t: "Reading specs · deriving contracts · planning tests before code…" },
    { kind: "tool", name: "read_spec", arg: "specs/billing/v1.md", out: "✓ 18 reqs" },
    { kind: "tool", name: "derive_contracts", arg: "openapi.yaml", out: "✓ 7 endpoints" },
    { kind: "agent", t: "Spec → contract → tests → code. I generate tests first from the ACs and implement against them. Shall I start?" },
    { kind: "user", t: "Go." },
    { kind: "tool", name: "write_tests", arg: "tests/Feature/Billing/*.php", out: "✓ 31 cases" },
    { kind: "tool", name: "implement", arg: "app/Domain/Billing", out: "✓ 6 files" },
    { kind: "tool", name: "run_tests", arg: "pest --coverage", out: "✓ 31/31 · 96% cov" },
    { kind: "agent", t: "Spec satisfied · 31/31 green · 96% coverage · ready for review." },
  ], [lang]);

  const [step, setStep] = useStateF(0);
  const [typed, setTyped] = useStateF("");

  useEffectF(() => {
    if (step >= script.length) {
      const id = setTimeout(() => { setStep(0); setTyped(""); }, 5000);
      return () => clearTimeout(id);
    }
    const cur = script[step];
    const text = cur.t || (cur.name + "(" + cur.arg + ")");
    let i = 0;
    const speed = cur.kind === "thinking" ? 18 : cur.kind === "tool" ? 12 : 22;
    const id = setInterval(() => {
      i++;
      setTyped(text.slice(0, i));
      if (i >= text.length) {
        clearInterval(id);
        setTimeout(() => { setStep((s) => s + 1); setTyped(""); }, cur.kind === "tool" ? 320 : 700);
      }
    }, speed);
    return () => clearInterval(id);
  }, [step, script]);

  const past = script.slice(0, step);
  const cur = script[step];

  const Line = ({ p, typing }) => {
    if (p.kind === "user") return (
      <div style={{ marginBottom: 12 }}>
        <span style={{ color: "var(--fg-dim)", marginRight: 8 }}>›</span>
        <span style={{ color: "var(--fg)" }}>{p.t}</span>
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    );
    if (p.kind === "thinking") return (
      <div style={{ marginBottom: 10, color: "var(--fg-dim)", fontStyle: "italic", opacity: .75 }}>
        <span style={{ color: accent }}>◌</span> {p.t || ""}
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    );
    if (p.kind === "tool") {
      const text = p._tool !== undefined ? p._tool : (p.name + "(" + p.arg + ")");
      return (
        <div style={{ marginBottom: 8, marginLeft: 14, padding: "6px 12px", background: "var(--surface-2)", borderLeft: `2px solid ${accent}`, borderRadius: 3 }}>
          <span style={{ color: accent, fontSize: 11, marginRight: 8 }}>⚒ tool</span>
          <span style={{ color: "var(--fg-dim)" }}>{text}</span>
          {!typing && p.out && <span style={{ color: "#5fd47a", marginLeft: 10 }}>{p.out}</span>}
          {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
        </div>
      );
    }
    return (
      <div style={{ marginBottom: 14 }}>
        <span style={{ color: accent, marginRight: 8, fontWeight: 600 }}>◆ Claude</span>
        <div style={{ color: "var(--fg)", marginTop: 4 }}>
          {p.t || ""}
          {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
        </div>
      </div>
    );
  };

  return (
    <div style={{
      border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden",
      background: "var(--surface)", height: 620, minHeight: 620, maxHeight: 620,
      display: "flex", flexDirection: "column",
      boxShadow: `0 0 0 1px var(--border), 0 30px 80px rgba(0,0,0,.5)`,
    }} className="f-agent-terminal">
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderBottom: "1px solid var(--border)", background: "var(--surface-2)", fontFamily: "var(--mono)", fontSize: 11 }}>
        <span style={{ display: "flex", gap: 5 }}>
          {["#ff5f57","#febc2e","#28c840"].map((c) => (
            <span key={c} style={{ width: 10, height: 10, borderRadius: "50%", background: c }} />
          ))}
        </span>
        <span style={{ color: "var(--fg)", marginLeft: 8 }}>~/maxwell-agent</span>
        <span style={{ color: "var(--fg-dim)" }}>· claude-code · sonnet-4.5</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--fg-dim)" }}>
          <span data-f-blink style={{ width: 6, height: 6, borderRadius: "50%", background: accent, boxShadow: `0 0 6px ${accent}` }} />
          live
        </span>
      </div>
      <div style={{ flex: 1, padding: "18px 20px", fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.7, color: "var(--fg)", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
        <div style={{ overflow: "hidden" }}>
          {past.map((p, i) => <AgentLineF key={i} p={p} accent={accent} />)}
          {cur && <AgentLineF p={{ ...cur, t: cur.t ? typed : null, _tool: cur.name && typed ? typed : null }} accent={accent} typing />}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--border)" }}>
        {[
          { k: "users", v: "3.04M" },
          { k: "tenants", v: "712" },
          { k: "p95", v: "84ms" },
          { k: "errors / 24h", v: "0" },
        ].map((m, i) => (
          <div key={i} style={{ padding: "12px 14px", borderRight: i < 3 ? "1px solid var(--border)" : "none" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 9, color: "var(--fg-dim)", textTransform: "uppercase", letterSpacing: ".15em" }}>{m.k}</div>
            <div style={{ fontFamily: "var(--display)", fontSize: 20, color: accent, fontWeight: 600, marginTop: 2, letterSpacing: "-0.01em" }}>{m.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AgentLineF({ p, accent, typing }) {
  if (p.kind === "user") {
    return (
      <div style={{ marginBottom: 12 }}>
        <span style={{ color: "var(--fg-dim)", marginRight: 8 }}>›</span>
        <span style={{ color: "var(--fg)" }}>{p.t}</span>
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    );
  }
  if (p.kind === "thinking") {
    return (
      <div style={{ marginBottom: 10, color: "var(--fg-dim)", fontStyle: "italic", opacity: 0.75 }}>
        <span style={{ color: accent }}>◌</span> {p.t || ""}
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    );
  }
  if (p.kind === "tool") {
    const text = p._tool !== undefined ? p._tool : (p.name + "(" + p.arg + ")");
    return (
      <div style={{ marginBottom: 8, marginLeft: 14, padding: "6px 12px", background: "var(--surface-2)", borderLeft: `2px solid ${accent}`, borderRadius: 3 }}>
        <span style={{ color: accent, fontSize: 11, marginRight: 8 }}>⚒ tool</span>
        <span style={{ color: "var(--fg-dim)" }}>{text}</span>
        {!typing && p.out && <span style={{ color: "#5fd47a", marginLeft: 10 }}>{p.out}</span>}
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    );
  }
  return (
    <div style={{ marginBottom: 14 }}>
      <span style={{ color: accent, marginRight: 8, fontWeight: 600 }}>◆ Claude</span>
      <div style={{ color: "var(--fg)", marginTop: 4 }}>
        {p.t || ""}
        {typing && <span style={{ color: accent, marginLeft: 2, animation: "fGlow 1s steps(2) infinite" }}>▊</span>}
      </div>
    </div>
  );
}

// ─── System monitor (kept available, unused in F hero) ───────────────────────
function SystemMonitorF({ copy, accent }) {
  const [cpu, setCpu] = useStateF(42);
  const [mem, setMem] = useStateF(68);
  const [net, setNet] = useStateF(31);
  const [seconds, setSeconds] = useStateF(0);
  const [trace, setTrace] = useStateF([]);

  useEffectF(() => {
    const id = setInterval(() => {
      setCpu((c) => Math.max(8, Math.min(96, c + (Math.random() - 0.45) * 18)));
      setMem((m) => Math.max(20, Math.min(92, m + (Math.random() - 0.5) * 6)));
      setNet((n) => Math.max(2, Math.min(98, n + (Math.random() - 0.45) * 22)));
      setSeconds((s) => s + 1);
    }, 1100);
    return () => clearInterval(id);
  }, []);

  const traceLines = useMemoF(() => [
    { c: "var(--fg-dim)", t: "[INFO]  app.boot       laravel/framework 12.x" },
    { c: "var(--fg-dim)", t: "[INFO]  http.server    listening on 0.0.0.0:8080" },
    { c: accent,           t: "[OK]    db.connect     postgres://prod-1 (pool=25)" },
    { c: accent,           t: "[OK]    redis.connect  redis://cache-1 (db=0)" },
    { c: "var(--fg-dim)", t: "[INFO]  queue.work     horizon supervisor up" },
    { c: "var(--fg-dim)", t: "[INFO]  mq.subscribe   chargebacks.events.v3 → 4 consumers" },
    { c: accent,           t: "[OK]    ai.warm        anthropic://claude-haiku-4-5" },
    { c: "var(--fg-dim)", t: "[INFO]  rag.index      78,412 docs · 256-dim" },
    { c: accent,           t: "[OK]    deploy         build #" + (1208 + (seconds % 4)).toString() + " green · zero-downtime" },
  ], [accent, seconds]);

  useEffectF(() => {
    setTrace((t) => {
      const next = [...t, traceLines[t.length % traceLines.length]];
      return next.slice(-9);
    });
  }, [seconds]);

  const Bar = ({ label, value, sub }) => (
    <div style={{ display: "grid", gridTemplateColumns: "78px 1fr 56px", gap: 12, alignItems: "center" }}>
      <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)" }}>{label}</span>
      <div style={{ position: "relative", height: 8, background: "var(--surface-2)", borderRadius: 2, overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, width: `${value}%`, background: `linear-gradient(90deg, ${accent}aa, ${accent})`, transition: "width .8s cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.06) 14px 15px)" }} />
      </div>
      <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg)", fontVariantNumeric: "tabular-nums", textAlign: "right" }}>
        {value.toFixed(0)}<span style={{ color: "var(--fg-dim)" }}>%</span>
      </span>
    </div>
  );

  return (
    <div style={{
      border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden",
      background: "var(--surface)", height: "100%", minHeight: 460,
      display: "flex", flexDirection: "column",
      boxShadow: `0 0 0 1px var(--border), 0 30px 80px rgba(0,0,0,.5)`,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderBottom: "1px solid var(--border)", background: "var(--surface-2)", fontFamily: "var(--mono)", fontSize: 11 }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: accent, boxShadow: `0 0 6px ${accent}` }} />
        <span style={{ color: "var(--fg)" }}>maxwell.systems</span>
        <span style={{ color: "var(--fg-dim)" }}>· production</span>
        <span style={{ marginLeft: "auto", color: "var(--fg-dim)" }}>uptime 99.99% · {new Date().toISOString().slice(11, 19)} UTC</span>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
        <Bar label="cpu" value={cpu} />
        <Bar label="memory" value={mem} />
        <Bar label="throughput" value={net} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--border)" }}>
        {[
          { k: "users", v: "3.04M" },
          { k: "tenants", v: "712" },
          { k: "p95", v: "84ms" },
          { k: "errors / 24h", v: "0" },
        ].map((m, i) => (
          <div key={i} style={{ padding: "14px 16px", borderRight: i < 3 ? "1px solid var(--border)" : "none" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", textTransform: "uppercase", letterSpacing: ".15em" }}>{m.k}</div>
            <div style={{ fontFamily: "var(--display)", fontSize: 22, color: accent, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>{m.v}</div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1, padding: "14px 16px", borderTop: "1px solid var(--border)", fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1.7, overflow: "hidden" }}>
        {trace.map((l, i) => (
          <div key={i} style={{ color: l.c, opacity: i === trace.length - 1 ? 1 : 0.55 + i * 0.05 }}>{l.t}</div>
        ))}
      </div>
    </div>
  );
}

// ─── Constellation stack graph (SVG) ────────────────────────────────────────
function StackConstellationF({ copy, accent }) {
  const W = 1000, H = 520;
  // Hand-laid coordinates so it reads nicely — grouped in 4 rings
  const nodes = [
    // Top ring — frontend
    { id: "PHP",        x: 180, y: 110, r: 28, group: "lang" },
    { id: "Laravel",    x: 320, y: 70,  r: 34, group: "framework", primary: true },
    { id: "Livewire",   x: 460, y: 120, r: 20, group: "framework" },
    { id: "Vue 3",      x: 600, y: 80,  r: 30, group: "ui", primary: true },
    { id: "TypeScript", x: 740, y: 130, r: 24, group: "lang" },
    { id: "Tailwind",   x: 860, y: 80,  r: 18, group: "ui" },

    // Mid ring — data
    { id: "PostgreSQL", x: 230, y: 260, r: 26, group: "data", primary: true },
    { id: "Redis",      x: 370, y: 300, r: 22, group: "data" },
    { id: "MySQL",      x: 110, y: 320, r: 18, group: "data" },

    // Mid ring — messaging
    { id: "RabbitMQ",   x: 520, y: 260, r: 24, group: "msg" },
    { id: "Kafka",      x: 660, y: 310, r: 26, group: "msg", primary: true },
    { id: "SNS/SQS",    x: 810, y: 270, r: 22, group: "msg" },

    // Bottom ring — ops + ai
    { id: "Docker",     x: 160, y: 450, r: 24, group: "ops" },
    { id: "GCP",        x: 300, y: 430, r: 22, group: "ops" },
    { id: "AWS",        x: 440, y: 460, r: 24, group: "ops" },

    { id: "Anthropic",  x: 600, y: 450, r: 32, group: "ai", primary: true },
    { id: "MCP",        x: 760, y: 430, r: 22, group: "ai" },
    { id: "RAG",        x: 890, y: 460, r: 22, group: "ai" },
  ];
  const edges = [
    ["PHP","Laravel"],["Laravel","Livewire"],["Laravel","PostgreSQL"],["Laravel","Redis"],
    ["Laravel","RabbitMQ"],["Laravel","Kafka"],["Laravel","SNS/SQS"],["Laravel","Anthropic"],
    ["Vue 3","TypeScript"],["Vue 3","Tailwind"],["Vue 3","Laravel"],
    ["PostgreSQL","Redis"],["MySQL","PostgreSQL"],
    ["Kafka","RabbitMQ"],["RabbitMQ","SNS/SQS"],
    ["Docker","GCP"],["Docker","AWS"],["AWS","Laravel"],["GCP","Laravel"],
    ["Anthropic","MCP"],["MCP","RAG"],["RAG","Anthropic"],["Anthropic","Vue 3"],
  ];
  const map = Object.fromEntries(nodes.map((n) => [n.id, n]));
  const [hover, setHover] = useStateF(null);
  const isLit = (id) => !hover || hover === id || edges.some(([a, b]) => (a === hover && b === id) || (b === hover && a === id));

  return (
    <div className="f-galaxy" style={{
      border: "1px solid var(--border)", borderRadius: 14, padding: 0, background: "radial-gradient(ellipse at 50% 50%, var(--surface) 0%, var(--bg) 100%)",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(circle at 30% 30%, ${accent}10, transparent 60%), radial-gradient(circle at 70% 70%, ${accent}08, transparent 60%)`,
        pointerEvents: "none",
      }} />
      {/* Star field */}
      <svg aria-hidden viewBox={`0 0 ${W} ${H}`} width="100%" style={{ position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none" }}>
        {Array.from({ length: 40 }).map((_, i) => {
          const x = (i * 137.5) % W;
          const y = (i * 71.3) % H;
          const r = (i % 3) * 0.4 + 0.4;
          return <circle key={i} cx={x} cy={y} r={r} fill="#ffffff" opacity={0.15 + (i % 4) * 0.08} />;
        })}
      </svg>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block", maxHeight: 540, position: "relative" }} preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id="dHalo" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={accent} stopOpacity="0.55" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </radialGradient>
          <radialGradient id="dNode" cx="40%" cy="35%" r="60%">
            <stop offset="0%" stopColor={accent} stopOpacity="1" />
            <stop offset="100%" stopColor={accent} stopOpacity="0.7" />
          </radialGradient>
          <linearGradient id="dEdge" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stopColor={accent} stopOpacity="0.1" />
            <stop offset="50%" stopColor={accent} stopOpacity="0.6" />
            <stop offset="100%" stopColor={accent} stopOpacity="0.1" />
          </linearGradient>
          <filter id="dGlowFilter" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
        {/* Edges */}
        {edges.map(([a, b], i) => {
          const A = map[a], B = map[b];
          if (!A || !B) return null;
          const lit = !hover || hover === a || hover === b;
          return (
            <line key={i} x1={A.x} y1={A.y} x2={B.x} y2={B.y}
              stroke={lit && hover ? accent : "url(#dEdge)"}
              strokeOpacity={lit ? (hover ? 0.85 : 0.35) : 0.08}
              strokeWidth={lit && hover ? 1.6 : 1}
              strokeLinecap="round"
              style={{ transition: "all .25s" }} />
          );
        })}
        {/* Nodes */}
        {nodes.map((n) => {
          const lit = isLit(n.id);
          return (
            <g key={n.id}
              onMouseEnter={() => setHover(n.id)}
              onMouseLeave={() => setHover(null)}
              style={{ cursor: "pointer", transition: "opacity .25s" }}
              opacity={lit ? 1 : 0.2}>
              {n.primary && <circle cx={n.x} cy={n.y} r={n.r + 18} fill="url(#dHalo)" />}
              <circle cx={n.x} cy={n.y} r={n.r + 2}
                fill={n.primary ? accent : "var(--bg)"}
                opacity={n.primary ? 0.25 : 1} />
              <circle cx={n.x} cy={n.y} r={n.r}
                fill={n.primary ? "url(#dNode)" : "var(--surface-2)"}
                stroke={n.primary ? accent : "var(--border)"}
                strokeWidth={n.primary ? 0 : 1.2}
                filter={n.primary ? "url(#dGlowFilter)" : undefined} />
              <text x={n.x} y={n.y + 4} textAnchor="middle"
                fill={n.primary ? "#ffffff" : "var(--fg)"}
                style={{ fontFamily: "var(--mono)", fontSize: n.r > 24 ? 12 : n.r > 20 ? 11 : 9, fontWeight: 600, pointerEvents: "none", letterSpacing: "-0.01em" }}>
                {n.id}
              </text>
            </g>
          );
        })}
      </svg>
      {/* Legend */}
      <div style={{ position: "absolute", bottom: 12, left: 14, display: "flex", gap: 18, fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent }} />primary
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--surface-2)", border: "1px solid var(--border)" }} />production
        </span>
      </div>
      <div style={{ position: "absolute", top: 12, right: 14, fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)" }}>
        graph.v3 · hover to trace
      </div>
    </div>
  );
}

// ─── Main variation ─────────────────────────────────────────────────────────
function VariationF({ tweaks, accent, lang, onTheme, onLang }) {
  const copy = window.MAX_COPY[lang];
  const dense = tweaks.density === "compact";
  const padX = dense ? 56 : 72;
  const padY = dense ? 80 : 110;

  // Hero parallax
  const [scrollY, setScrollY] = useStateF(0);
  useEffectF(() => {
    const root = document.querySelector('[data-variation="F"]');
    if (!root) return;
    const sc = root.closest("[data-dc-scroll]") || window;
    const onScroll = () => setScrollY(sc === window ? window.scrollY : sc.scrollTop);
    sc.addEventListener("scroll", onScroll, { passive: true });
    return () => sc.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.querySelector(`[data-variation="F"] #F-${id}`);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const [m1Ref, m1Val] = useCounterF("6", { suffix: "+", duration: 900 });
  const [m2Ref, m2Val] = useCounterF("3.04", { decimals: 2, suffix: "M", duration: 1600 });
  const [m3Ref, m3Val] = useCounterF("712", { duration: 1400 });
  const [m4Ref, m4Val] = useCounterF("99.99", { decimals: 2, suffix: "%", duration: 1400 });

  // Git log style commits
  const commits = useMemoF(() => copy.experience.map((e, i) => ({
    hash: ["a3f8c91","7d2e1bc","9f01d8a","c5b6740"][i] || "deadbee",
    branch: ["main","release/3.x","release/2.x","release/1.x"][i] || "legacy",
    ...e
  })), [copy]);

  return (
    <div data-variation="F" style={{
      minHeight: "100%",
      background: "var(--bg)",
      color: "var(--fg)",
      fontFamily: "var(--sans)",
      position: "relative",
      maxWidth: 1680,
      margin: "0 auto",
      borderLeft: "1px solid var(--border)",
      borderRight: "1px solid var(--border)",
    }}>
      {/* Embedded keyframes + responsive */}
      <style>{`
        @keyframes fMarqueeF { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
        @keyframes fGlow { 0%,100% { opacity:.5 } 50% { opacity:1 } }
        @keyframes fScan { 0% { transform: translateY(-100%) } 100% { transform: translateY(100%) } }
        @keyframes fPulse { 0%,100% { transform: scale(1); opacity: .6 } 50% { transform: scale(1.6); opacity: 0 } }
        [data-variation="F"] [data-f-blink] { animation: fGlow 2s ease-in-out infinite; }
        @media (max-width: 1100px) {
          [data-variation="F"] .f-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          [data-variation="F"] .f-about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          [data-variation="F"] .f-ai-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          [data-variation="F"] .f-contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          [data-variation="F"] .f-projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
          [data-variation="F"] .f-projects-grid > * { grid-column: span 1 !important; }
        }
        @media (max-width: 720px) {
          [data-variation="F"] .f-pad { padding-left: 20px !important; padding-right: 20px !important; }
          [data-variation="F"] .f-nav-links a { display: none !important; }
          [data-variation="F"] .f-nav-links > span { display: none !important; }
          [data-variation="F"] .f-coord { display: none !important; }
          [data-variation="F"] .f-meta-strip { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 20px !important; }
          [data-variation="F"] .f-counters { grid-template-columns: repeat(2, 1fr) !important; }
          [data-variation="F"] .f-counters > div:nth-child(2) { border-right: none !important; }
          [data-variation="F"] .f-counters > div:nth-child(1), [data-variation="F"] .f-counters > div:nth-child(2) { border-bottom: 1px solid var(--border); }
          [data-variation="F"] .f-projects-grid { grid-template-columns: 1fr !important; }
          [data-variation="F"] .f-stack-list { grid-template-columns: 1fr !important; }
          [data-variation="F"] .f-section-head { grid-template-columns: 1fr !important; gap: 8px !important; }
          [data-variation="F"] .f-section-head > span:nth-child(2) { display: none !important; }
          [data-variation="F"] h1.f-headline { font-size: clamp(38px, 11vw, 64px) !important; }
          [data-variation="F"] h2.f-h2-big { font-size: clamp(40px, 12vw, 64px) !important; }
          [data-variation="F"] .f-agent-terminal { height: 480px !important; min-height: 480px !important; max-height: 480px !important; }
          [data-variation="F"] .f-marquee-text { font-size: 12px !important; gap: 32px !important; }
        }
        [data-variation="F"] .f-noise::before {
          content: ""; position: absolute; inset: 0; pointer-events: none;
          background-image: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.4) 100%);
          mix-blend-mode: multiply; opacity: .35;
        }
      `}</style>

      {/* Top utility bar — hidden, controls integrated into nav */}

      {/* Top status / nav */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: `12px ${padX}px`, fontFamily: "var(--mono)", fontSize: 11,
        color: "var(--fg-dim)", borderBottom: "1px solid var(--border)",
        position: "sticky", top: 0, background: "var(--bg-alpha)", backdropFilter: "blur(10px)", zIndex: 50,
      }} className="f-pad">
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span data-f-blink style={{ width: 8, height: 8, borderRadius: "50%", background: accent, boxShadow: `0 0 8px ${accent}` }} />
          <span style={{ color: "var(--fg)" }}>MM/// LAB</span>
          <span>build #1209 · main</span>
          <span style={{ color: accent }}>● green</span>
        </div>
        <div style={{ display: "flex", gap: 22 }} className="f-nav-links">
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("about"); }} data-cursor="hover" style={navLinkF}>00 · readme</a>
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("stack"); }} data-cursor="hover" style={navLinkF}>01 · graph</a>
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("experience"); }} data-cursor="hover" style={navLinkF}>02 · log</a>
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("projects"); }} data-cursor="hover" style={navLinkF}>03 · vault</a>
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("ai"); }} data-cursor="hover" style={navLinkF}>04 · agent</a>
          <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("contact"); }} data-cursor="hover" style={{ ...navLinkF, color: accent }}>05 · ping →</a>
          <span style={{ width: 1, height: 12, background: "var(--border)", alignSelf: "center" }} />
          <button onClick={() => onLang && onLang(lang === "en" ? "pt" : "en")} data-cursor="hover"
            style={{ ...navLinkF, background: "none", border: 0, padding: 0, cursor: "pointer", letterSpacing: ".06em" }}>
            {lang === "en" ? "PT" : "EN"}
          </button>
          <button onClick={() => onTheme && onTheme()} data-cursor="hover"
            style={{ ...navLinkF, background: "none", border: 0, padding: 0, cursor: "pointer", fontSize: 14, lineHeight: 1 }}
            title={tweaks.theme === "dark" ? "Light mode" : "Dark mode"}>
            {tweaks.theme === "dark" ? "☀" : "☾"}
          </button>
        </div>
      </div>

      {/* HERO */}
      <section id="F-home" style={{
        padding: `${padY * 0.6}px ${padX}px ${padY * 0.6}px`,
        position: "relative", overflow: "hidden",
      }}>
        {/* Blueprint grid background */}
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `
            linear-gradient(var(--border) 1px, transparent 1px),
            linear-gradient(90deg, var(--border) 1px, transparent 1px)
          `,
          backgroundSize: "120px 120px",
          opacity: 0.35,
          maskImage: "radial-gradient(circle at 50% 30%, black 30%, transparent 75%)",
          pointerEvents: "none",
        }} />

        {/* Coordinate marks */}
        <div aria-hidden style={{
          position: "absolute", top: 30, left: padX - 30,
          fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", opacity: 0.5,
          transform: `translateY(${scrollY * 0.05}px)`,
        }} className="f-coord">
          <div>X · 00</div>
          <div>Y · 00</div>
          <div style={{ marginTop: 6 }}>↳ origin</div>
        </div>
        <div aria-hidden style={{
          position: "absolute", top: 30, right: padX - 30,
          fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", opacity: 0.5, textAlign: "right",
        }} className="f-coord">
          <div>VAR · F / 04</div>
          <div>REV · 2026.05.06</div>
          <div style={{ marginTop: 6, color: accent }}>● recording</div>
        </div>

        {/* Top metadata strip */}
        <window.Reveal>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            paddingTop: 24, marginBottom: 56,
            fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)",
            textTransform: "uppercase", letterSpacing: ".15em",
            position: "relative", zIndex: 2,
          }} className="f-meta-strip">
            <span>// {lang === "pt" ? "engenheiro " : "engineer "} · {copy.location}</span>
            <span>{copy.role}</span>
            <span style={{ color: accent }}>● {copy.available}</span>
          </div>
        </window.Reveal>

        {/* Headline + monitor */}
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "start", position: "relative", zIndex: 2 }} className="f-hero-grid">
          <div>
            <window.Reveal delay={50}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24, fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-dim)" }}>
                <span style={{ position: "relative", display: "inline-block" }}>
                  <window.ProfilePhoto size={56} accent={accent} />
                  <span style={{ position: "absolute", inset: -8, borderRadius: "50%", border: `1px solid ${accent}`, animation: "fPulse 2.4s ease-out infinite" }} />
                </span>
                <div>
                  <div style={{ color: "var(--fg)", fontWeight: 500 }}>Maxwell Mezadre</div>
                  <div>· {lang === "pt" ? "operando desde 2019" : "operating since 2019"} · 6+ {lang === "pt" ? "anos de uptime" : "years of uptime"}</div>
                </div>
              </div>
            </window.Reveal>

            <window.Reveal delay={100}>
              <h1 style={{
                fontFamily: "var(--display)",
                fontSize: dense ? "clamp(44px, 5.6vw, 86px)" : "clamp(48px, 6.2vw, 96px)",
                lineHeight: 0.92, letterSpacing: "-0.035em", fontWeight: 500, margin: 0,
                color: "var(--fg)", textWrap: "balance",
              }} className="f-headline">
                {lang === "pt" ? (
                  <>
                    Sistemas que<br />
                    <span style={{ fontFamily: "var(--display)", fontStyle: "italic", color: accent, fontWeight: 400 }}>não dormem</span>,<br />
                    <span style={{
                      fontFamily: "var(--mono)", fontSize: "0.78em", letterSpacing: "-0.02em",
                      background: `linear-gradient(90deg, var(--fg) 50%, ${accent} 50%)`,
                      WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                    }}>código que respira.</span>
                  </>
                ) : (
                  <>
                    Systems that<br />
                    <span style={{ fontFamily: "var(--display)", fontStyle: "italic", color: accent, fontWeight: 400 }}>don't sleep</span>,<br />
                    <span style={{
                      fontFamily: "var(--mono)", fontSize: "0.78em", letterSpacing: "-0.02em",
                      background: `linear-gradient(90deg, var(--fg) 50%, ${accent} 50%)`,
                      WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                    }}>code that breathes.</span>
                  </>
                )}
              </h1>
            </window.Reveal>

            {/* "Diff" intro block */}
            <window.Reveal delay={180}>
              <div style={{
                marginTop: 36, padding: dense ? 18 : 22,
                border: "1px solid var(--border)", borderRadius: 6,
                background: "var(--surface)", fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.7,
                position: "relative", overflow: "hidden",
              }}>
                <div style={{ position: "absolute", top: 8, right: 10, fontSize: 10, color: "var(--fg-dim)" }}>// what.changed</div>
                <div style={{ color: "#ff6464" }}>− {lang === "pt" ? "deploys com medo, monolitos frágeis, migrações de fim de semana" : "scared deploys, brittle monoliths, weekend migrations"}</div>
                <div style={{ color: accent, marginTop: 4 }}>+ {lang === "pt" ? "clean architecture, sistemas distribuídos, AI-driven engineering" : "clean architecture, distributed systems, AI-driven engineering"}</div>
                <div style={{ color: "var(--fg-dim)", marginTop: 8 }}>— Maxwell, {lang === "pt" ? "6+ anos shippando código em produção" : "6+ years shipping production code"}</div>
              </div>
            </window.Reveal>

            <window.Reveal delay={240}>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("contact"); }} data-cursor="hover" style={btnPrimaryF(accent)}>
                  → {copy.cta_primary}
                </a>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  <a href="cv-en.pdf" download data-cursor="hover" style={btnSecondaryF()}>↓ CV (EN)</a>
                  <a href="cv-pt.pdf" download data-cursor="hover" style={btnSecondaryF()}>↓ CV (PT)</a>
                </div>
              </div>
            </window.Reveal>
          </div>

          {/* Monitor — hidden on mobile */}
          <window.Reveal delay={140} y={20}>
            <div className="f-hide-mobile" style={{ position: "relative" }}>
              <div aria-hidden style={{
                position: "absolute", inset: -1, borderRadius: 8,
                background: `conic-gradient(from 0deg, ${accent}00, ${accent}55, ${accent}00 30%)`,
                animation: "fMarqueeF 8s linear infinite",
                filter: "blur(14px)", opacity: 0.5, zIndex: 0,
              }} />
              <div style={{ position: "relative", zIndex: 1 }}>
                <AgentTerminalF accent={accent} lang={lang} />
              </div>
            </div>
          </window.Reveal>
        </div>

        {/* Animated counters strip */}
        <div style={{
          marginTop: 80,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)",
          // f-counters
          position: "relative", zIndex: 2,
        }}>
          {[
            { ref: m1Ref, val: m1Val, k: lang === "pt" ? "anos · produção" : "years · production" },
            { ref: m2Ref, val: m2Val, k: lang === "pt" ? "usuários servidos" : "users served" },
            { ref: m3Ref, val: m3Val, k: lang === "pt" ? "tenants em produção" : "tenants in production" },
            { ref: m4Ref, val: m4Val, k: "uptime · 2025" },
          ].map((m, i) => (
            <div key={i} ref={m.ref} style={{
              padding: dense ? "26px 22px" : "32px 26px",
              borderRight: i < 3 ? "1px solid var(--border)" : "none",
              position: "relative", overflow: "hidden",
            }}>
              <div style={{
                fontFamily: "var(--display)", fontSize: dense ? 44 : 56,
                fontWeight: 500, color: "var(--fg)", lineHeight: 1, letterSpacing: "-0.025em",
                fontVariantNumeric: "tabular-nums",
              }}>
                {m.val}
              </div>
              <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", textTransform: "uppercase", letterSpacing: ".12em" }}>{m.k}</div>
              <div aria-hidden style={{
                position: "absolute", left: 0, right: 0, top: 0, height: 1,
                background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
                animation: `fScan ${4 + i}s linear infinite`,
                opacity: 0.35,
              }} />
            </div>
          ))}
        </div>
      </section>

      {/* MARQUEE 1 */}
      <MarqueeF accent={accent}
        items={[
          "PHP 8.5","Laravel 12","Vue 3","TypeScript","PostgreSQL","Redis","Kafka","RabbitMQ",
          "AWS","GCP","Docker","Anthropic","MCP","RAG","Clean Architecture","SOLID","DDD","TDD",
          lang === "pt" ? "disponível para projetos" : "available for projects",
        ]} />

      {/* ABOUT (readme) */}
      <section id="F-about" style={{ padding: `${padY * 0.7}px ${padX}px` }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 56 }} className="f-section-head">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>00 ── readme</span>
          <span style={{ height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>{copy.about_title}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="f-about-grid">
          <window.Reveal>
            <div style={{
              padding: dense ? "26px 30px" : "34px 38px", border: "1px solid var(--border)", borderRadius: 8,
              background: "var(--surface)", position: "relative", overflow: "hidden",
            }} className="f-noise">
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", letterSpacing: ".15em", marginBottom: 14 }}>// README.md</div>
              <p style={{
                fontFamily: "var(--display)", fontSize: dense ? 26 : 32, lineHeight: 1.25, fontWeight: 400, letterSpacing: "-0.015em",
                margin: 0, color: "var(--fg)",
              }}>
                <span style={{ color: accent, fontStyle: "italic" }}>{copy.about_lead}</span>{" "}
                <span style={{ fontSize: dense ? 17 : 19, fontFamily: "var(--sans)", color: "var(--fg-dim)", lineHeight: 1.55, display: "inline" }}>
                  {copy.about_body}
                </span>
              </p>
            </div>
          </window.Reveal>

          <div style={{ display: "grid", gap: 14 }}>
            {copy.about_pillars.map((p, i) => (
              <window.Reveal key={i} delay={i * 80}>
                <MagCardF accent={accent} style={{
                  padding: dense ? "20px 24px" : "26px 30px",
                  border: "1px solid var(--border)", borderRadius: 8,
                }}>
                  <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, alignItems: "center" }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 8, background: "var(--surface-2)",
                      border: `1px solid ${accent}55`, color: accent,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--mono)", fontSize: 14, fontWeight: 600,
                    }}>0{i + 1}</div>
                    <div>
                      <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, textTransform: "uppercase", letterSpacing: ".15em", marginBottom: 4 }}>{p.k}</div>
                      <div style={{ fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.55, color: "var(--fg-dim)" }}>{p.v}</div>
                    </div>
                    <span style={{ color: "var(--fg-dim)", fontFamily: "var(--mono)", fontSize: 16 }}>↗</span>
                  </div>
                </MagCardF>
              </window.Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* STACK GRAPH */}
      <section id="F-stack" style={{ padding: `${padY * 0.7}px ${padX}px` }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 36 }} className="f-section-head">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>01 ── graph</span>
          <span style={{ height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>{copy.stack_title}</span>
        </div>
        <window.Reveal>
          <h2 style={{
            fontFamily: "var(--display)", fontSize: dense ? 36 : 44, fontWeight: 400,
            letterSpacing: "-0.025em", lineHeight: 1.1, margin: "0 0 28px 0", color: "var(--fg)",
            maxWidth: "20ch",
          }}>
            {lang === "pt" ? <>Uma <span style={{ fontStyle: "italic", color: accent }}>constelação</span> de ferramentas, conectadas em produção.</> : <>A <span style={{ fontStyle: "italic", color: accent }}>constellation</span> of tools, wired up in production.</>}
          </h2>
          <p style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--fg-dim)", maxWidth: 600, marginBottom: 28 }}>{copy.stack_sub}</p>
        </window.Reveal>
        <window.Reveal delay={80}>
          <StackConstellationF copy={copy} accent={accent} />
        </window.Reveal>
        {/* Compact list under */}
        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 14 }} className="f-stack-list">
          {copy.stack.map((s, i) => (
            <div key={i} style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 6, background: "var(--surface)" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: accent, textTransform: "uppercase", letterSpacing: ".15em", marginBottom: 8 }}>{s.group}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg)" }}>{s.primary.join(" · ")}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", marginTop: 4 }}>{s.rest.join(" · ")}</div>
            </div>
          ))}
        </div>
      </section>

      {/* MARQUEE 2 */}
      <MarqueeF accent={accent} reverse speed={75}
        items={[
          lang === "pt" ? "zero downtime" : "zero downtime",
          "3M+ users", "700+ tenants", "AI-native", "PHP 8.x", "Laravel 12",
          "clean architecture", "SOLID", "DDD", "TDD", "MCP", "RAG",
          "kafka", "rabbitmq", "postgres", "redis", "horizon"
        ]} />

      {/* EXPERIENCE — git log */}
      <section id="F-experience" style={{ padding: `${padY * 0.7}px ${padX}px` }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 36 }} className="f-section-head">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>02 ── log</span>
          <span style={{ height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>$ git log --career --pretty=full</span>
        </div>

        <div style={{ position: "relative", paddingLeft: 28 }}>
          {/* Vertical rail */}
          <div aria-hidden style={{ position: "absolute", left: 11, top: 8, bottom: 8, width: 1, background: `linear-gradient(180deg, ${accent} 0%, var(--border) 30%, var(--border) 100%)` }} />
          {commits.map((c, i) => (
            <window.Reveal key={i} delay={i * 60}>
              <div style={{ position: "relative", padding: dense ? "22px 0" : "30px 0" }}>
                {/* Node */}
                <div aria-hidden style={{
                  position: "absolute", left: -22, top: dense ? 26 : 34, width: 18, height: 18,
                  borderRadius: "50%", background: i === 0 ? accent : "var(--surface)",
                  border: `2px solid ${i === 0 ? accent : "var(--border)"}`,
                  boxShadow: i === 0 ? `0 0 0 4px ${accent}33` : "none",
                }} />
                <MagCardF accent={accent} style={{
                  border: "1px solid var(--border)", borderRadius: 8,
                  padding: dense ? "20px 24px" : "26px 30px",
                  marginLeft: 14,
                }} data-cursor="hover">
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 16, alignItems: "baseline", marginBottom: 14 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, fontWeight: 600 }}>{c.hash}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", padding: "2px 8px", border: "1px solid var(--border)", borderRadius: 999 }}>
                      {c.branch}
                    </span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", marginLeft: "auto" }}>
                      {c.period}
                    </span>
                  </div>
                  <h3 style={{
                    fontFamily: "var(--display)", fontSize: dense ? 24 : 30, fontWeight: 400,
                    letterSpacing: "-0.02em", lineHeight: 1.1, margin: "0 0 4px 0", color: "var(--fg)",
                  }}>{c.role}</h3>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: accent, marginBottom: 4 }}>@ {c.company}</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", marginBottom: 16 }}>{c.type}</div>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                    {c.bullets.map((b, j) => (
                      <li key={j} style={{ fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.55, color: "var(--fg-dim)", paddingLeft: 22, position: "relative" }}>
                        <span style={{ position: "absolute", left: 0, top: 0, fontFamily: "var(--mono)", fontSize: 12, color: accent }}>+</span>
                        {b}
                      </li>
                    ))}
                  </ul>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 18 }}>
                    {c.stack.map((t) => (
                      <span key={t} style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", padding: "2px 8px", border: "1px solid var(--border)", borderRadius: 4 }}>{t}</span>
                    ))}
                  </div>
                </MagCardF>
              </div>
            </window.Reveal>
          ))}
        </div>
      </section>

      {/* PROJECTS — Vault */}
      <section id="F-projects" style={{ padding: `${padY * 0.7}px ${padX}px` }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 36 }} className="f-section-head">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>03 ── vault</span>
          <span style={{ height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>{copy.projects_title}</span>
        </div>

        <window.Reveal>
          <h2 style={{
            fontFamily: "var(--display)", fontSize: dense ? 40 : 56, fontWeight: 400,
            letterSpacing: "-0.025em", lineHeight: 1.05, margin: "0 0 36px 0", color: "var(--fg)",
            maxWidth: "16ch",
          }}>
            {lang === "pt" ? <>Casos reais. <span style={{ fontStyle: "italic", color: accent }}>Em produção.</span> Sem teatro.</> : <>Real builds. <span style={{ fontStyle: "italic", color: accent }}>In production.</span> No theatre.</>}
          </h2>
        </window.Reveal>

        <div className="f-projects-grid" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16,  }}>
          {copy.projects.map((p, i) => {
            // Asymmetric grid: feature 0 and 4 wide; others narrow
            const span = i === 0 ? 4 : i === 4 ? 4 : i === 1 ? 2 : i === 5 ? 2 : 3;
            const tall = i === 0 || i === 4;
            return (
              <window.Reveal key={p.id} delay={i * 50} style={{ gridColumn: `span ${span}` }}>
                <MagCardF accent={accent} data-cursor="hover" style={{
                  border: "1px solid var(--border)", borderRadius: 10,
                  padding: dense ? "26px 28px" : "32px 36px",
                  height: "100%", minHeight: tall ? 360 : 240,
                  display: "flex", flexDirection: "column",
                  position: "relative", overflow: "hidden",
                }}>
                  {/* Top row */}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: tall ? 32 : 20 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, fontWeight: 600 }}>/{p.id} · {p.meta.scope}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", padding: "2px 8px", border: "1px solid var(--border)", borderRadius: 999 }}>{p.tag}</span>
                  </div>
                  {tall && (
                    <div style={{
                      fontFamily: "var(--display)",
                      fontSize: dense ? 100 : 132, fontWeight: 500,
                      lineHeight: 0.85, color: accent, opacity: 0.16,
                      letterSpacing: "-0.04em", marginBottom: -20,
                      pointerEvents: "none",
                    }}>{p.id}</div>
                  )}
                  <h3 style={{
                    fontFamily: "var(--display)", fontSize: tall ? (dense ? 30 : 38) : (dense ? 22 : 26),
                    fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 1.1,
                    margin: "0 0 12px 0", color: "var(--fg)",
                  }}>{p.name}</h3>
                  <p style={{ fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.55, color: "var(--fg-dim)", margin: "0 0 18px 0", flex: 1 }}>{p.body}</p>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
                    {p.stack.slice(0, tall ? 6 : 3).map((t) => (
                      <span key={t} style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg)", padding: "3px 8px", background: "var(--surface-2)", borderRadius: 4 }}>{t}</span>
                    ))}
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-dim)", textTransform: "uppercase", letterSpacing: ".1em" }}>
                    <span>{p.meta.year} · {p.meta.role}</span>
                    <span style={{ color: accent }}>view →</span>
                  </div>
                </MagCardF>
              </window.Reveal>
            );
          })}
        </div>
      </section>

      {/* AI */}
      <section id="F-ai" style={{ padding: `${padY * 0.7}px ${padX}px`, position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: `radial-gradient(circle at 80% 20%, ${accent}10, transparent 50%)`,
          pointerEvents: "none",
        }} />
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 36, position: "relative" }} className="f-section-head">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>04 ── ai</span>
          <span style={{ height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>{copy.ai_title}</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start", position: "relative" }} className="f-ai-grid">
          <window.Reveal>
            <h2 style={{
              fontFamily: "var(--display)",
              fontSize: dense ? "clamp(36px, 4.5vw, 60px)" : "clamp(44px, 5.4vw, 76px)",
              fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.05, margin: 0,
              color: "var(--fg)", textWrap: "balance",
            }}>
              {copy.ai_lead.split(" ").map((w, i) => (
                <span key={i} style={{ fontStyle: i % 5 === 2 ? "italic" : "normal", color: i % 5 === 2 ? accent : "var(--fg)" }}>{w} </span>
              ))}
            </h2>
            <p style={{ fontFamily: "var(--sans)", fontSize: 17, lineHeight: 1.65, color: "var(--fg-dim)", marginTop: 28, maxWidth: 480 }}>{copy.ai_body}</p>
            <div style={{ marginTop: 32, padding: 18, border: `1px solid ${accent}55`, borderRadius: 8, background: "var(--surface)", fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-dim)" }}>
              <span style={{ color: accent }}>tip ›</span> {copy.commands_hint}
            </div>
          </window.Reveal>
          <window.Reveal delay={120}>
            <window.ClaudeDemo copy={copy} accent={accent} dense={dense} lang={lang} />
          </window.Reveal>
        </div>
      </section>

      {/* CONTACT */}
      <section id="F-contact" style={{ padding: `${padY * 0.8}px ${padX}px ${padY * 0.6}px`, position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)`,
          backgroundSize: "60px 60px",
          opacity: 0.18,
          maskImage: "radial-gradient(circle at 30% 50%, black 20%, transparent 70%)",
        }} />
        <div style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", marginBottom: 36 }} className="f-section-head">
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, letterSpacing: ".15em" }}>05 ── ping</span>
            <span style={{ height: 1, background: "var(--border)" }} />
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: ".15em" }}>$ curl -X POST maxwellmezadre.dev/start</span>
          </div>

          <window.Reveal>
            <h2 style={{
              fontFamily: "var(--display)",
              fontSize: dense ? "clamp(72px, 9vw, 144px)" : "clamp(88px, 11vw, 184px)",
              fontWeight: 400, letterSpacing: "-0.04em", lineHeight: 0.95, margin: "0 0 24px 0",
              color: "var(--fg)",
            }} className="f-h2-big">
              {lang === "pt" ? "Vamos" : "Let's"}{" "}
              <span style={{ fontStyle: "italic", color: accent }}>{lang === "pt" ? "construir" : "build"}</span><br />
              {lang === "pt" ? "algo" : "something"}{" "}
              <span style={{
                fontFamily: "var(--mono)", fontSize: "0.7em", letterSpacing: "-0.02em",
                color: "var(--fg)",
              }}>{lang === "pt" ? "que respira." : "that breathes."}</span>
            </h2>
          </window.Reveal>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 56 }} className="f-contact-grid">
            <window.Reveal delay={120}>
              <p style={{ fontFamily: "var(--sans)", fontSize: 17, lineHeight: 1.6, color: "var(--fg-dim)", margin: 0, maxWidth: 460 }}>{copy.contact_lead}</p>
              <window.ContactForm copy={copy} accent={accent} dense={dense} />
            </window.Reveal>
            <window.Reveal delay={200}>
              <div style={{ border: "1px solid var(--border)", borderRadius: 10, padding: dense ? 22 : 28, background: "var(--surface)" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: accent, textTransform: "uppercase", letterSpacing: ".15em", marginBottom: 18 }}>// {copy.availability_title}</div>
                {copy.availability.map((a, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: i < copy.availability.length - 1 ? "1px dashed var(--border)" : "none", fontFamily: "var(--mono)", fontSize: 13 }}>
                    <span style={{ color: "var(--fg-dim)" }}>{a.k}</span>
                    <span style={{ color: "var(--fg)" }}>{a.v}</span>
                  </div>
                ))}
                <div style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid var(--border)" }}>
                  <a href={`mailto:${copy.contact_email}`} data-cursor="hover" style={{
                    display: "block", textAlign: "center", padding: "14px 18px",
                    background: accent, color: "#0a0a0a", textDecoration: "none",
                    fontFamily: "var(--mono)", fontSize: 13, fontWeight: 600, borderRadius: 6,
                  }}>{copy.contact_email}</a>
                </div>
                <div style={{ marginTop: 16, display: "flex", gap: 14, justifyContent: "center", fontFamily: "var(--mono)", fontSize: 11 }}>
                  <a href="https://github.com/maxwellmezadre" target="_blank" data-cursor="hover" style={{ color: "var(--fg-dim)", textDecoration: "none" }}>github ↗</a>
                  <a href="https://linkedin.com/in/maxwell-mezadre" target="_blank" data-cursor="hover" style={{ color: "var(--fg-dim)", textDecoration: "none" }}>linkedin ↗</a>
                  <a href="cv-en.pdf" download data-cursor="hover" style={{ color: "var(--fg-dim)", textDecoration: "none" }}>CV EN ↓</a>
                  <a href="cv-pt.pdf" download data-cursor="hover" style={{ color: "var(--fg-dim)", textDecoration: "none" }}>CV PT ↓</a>
                </div>
              </div>
            </window.Reveal>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: `30px ${padX}px`, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)" }}>
        <span>{copy.footer_built}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span data-f-blink style={{ width: 6, height: 6, borderRadius: "50%", background: accent, boxShadow: `0 0 6px ${accent}` }} />
          system online
        </span>
        <span>{copy.footer_made}</span>
      </footer>
    </div>
  );
}

const navLinkF = { color: "var(--fg-dim)", textDecoration: "none", transition: "color .15s" };
const btnPrimaryF = (accent) => ({
  display: "inline-flex", alignItems: "center", gap: 10,
  padding: "14px 22px", background: accent, color: "#0a0a0a",
  fontFamily: "var(--mono)", fontSize: 13, fontWeight: 600,
  textDecoration: "none", borderRadius: 4, letterSpacing: ".02em",
  transition: "transform .15s, box-shadow .15s",
  boxShadow: `0 0 0 0 ${accent}55`,
});
const btnSecondaryF = () => ({
  display: "inline-flex", alignItems: "center", gap: 10,
  padding: "14px 22px", background: "transparent", color: "var(--fg)",
  border: "1px solid var(--border)", fontFamily: "var(--mono)", fontSize: 13,
  textDecoration: "none", borderRadius: 4,
});

window.VariationF = VariationF;