// Hero

const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React;

function ConnectivityMatrix() {
  const nodes = ["office-server", "dev-laptop", "ci-runner", "edge-sg", "home-nas", "staging-01", "prod-eu-1", "prod-us-2"];
  const [tick, setTick] = useStateH(0);
  const base = useMemoH(() => {
    const n = nodes.length;
    const m = Array.from({ length: n }, () => Array(n).fill(0));
    for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) {
      if (i === j) { m[i][j] = 0; continue; }
      const h = (i * 31 + j * 17) % 10;
      m[i][j] = h < 6 ? 1 : h < 8 ? 2 : h < 9 ? 3 : 4;
    }
    return m;
  }, []);
  useEffectH(() => {
    const t = setInterval(() => setTick(x => x + 1), 1400);
    return () => clearInterval(t);
  }, []);
  // v: 0=self, 1=direct, 2=user_relay, 3=managed_relay, 4=unreachable
  // color = reachability (green connected, red unreachable); letter = transport
  const bgFor = (v, pulse) => {
    if (v === 0) return "var(--bg)";
    if (v === 4) return "color-mix(in oklab, var(--bad) 30%, var(--bg))";
    return pulse ? "var(--accent)" : "color-mix(in oklab, var(--accent) 75%, var(--bg))";
  };
  const letterFor = (v) => v === 2 ? "U" : v === 3 ? "M" : "";
  const cell = 28;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Pill tone="accent"><Dot c="var(--accent)" /> live · 8×8 connectivity matrix</Pill>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>rtt · avg 14ms</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: `auto repeat(${nodes.length}, ${cell}px)`, gap: 2, alignItems: "center" }}>
        <div />
        {nodes.map((n, i) => (
          <div key={i} style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)",
               writingMode: "vertical-rl", transform: "rotate(180deg)", textAlign: "left", height: 72, paddingTop: 4 }}>{n}</div>
        ))}
        {nodes.map((row, i) => (
          <React.Fragment key={i}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)", paddingRight: 10, textAlign: "right" }}>{row}</div>
            {nodes.map((_, j) => {
              const v = base[i][j];
              const pulse = ((i + j + tick) % 7) === 0 && v !== 0 && v !== 4;
              return (
                <div key={j} style={{
                  width: cell, height: cell,
                  backgroundColor: bgFor(v, pulse),
                  border: v === 0 ? "1px dashed var(--line)" : "1px solid color-mix(in oklab, var(--ink) 6%, transparent)",
                  borderRadius: 4, transition: "background-color 400ms ease",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600,
                  color: "color-mix(in oklab, var(--ink) 70%, transparent)",
                  lineHeight: 1,
                }}>{letterFor(v)}</div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
      <div style={{ display: "flex", gap: 18, marginTop: 8, flexWrap: "wrap" }}>
        {[
          { l: "direct", bg: "color-mix(in oklab, var(--accent) 75%, var(--bg))", letter: "" },
          { l: "user_relay", bg: "color-mix(in oklab, var(--accent) 75%, var(--bg))", letter: "U" },
          { l: "managed_relay", bg: "color-mix(in oklab, var(--accent) 75%, var(--bg))", letter: "M" },
          { l: "unreachable", bg: "color-mix(in oklab, var(--bad) 30%, var(--bg))", letter: "" },
        ].map(({ l, bg, letter }) => (
          <div key={l} style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>
            <span style={{
              width: 14, height: 14, backgroundColor: bg, borderRadius: 3,
              border: "1px solid color-mix(in oklab, var(--ink) 6%, transparent)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontSize: 9, fontWeight: 700, color: "color-mix(in oklab, var(--ink) 70%, transparent)", lineHeight: 1,
            }}>{letter}</span>{l}
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ ctx }) {
  const { t } = ctx;
  return (
    <section id="top" style={{ paddingTop: 48, paddingBottom: 88 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 28, flexWrap: "wrap" }}>
              <Pill tone="ink">{t.hero.badge}</Pill>
              <Pill tone="accent"><Dot c="var(--accent)"/> {t.hero.liveBadge}</Pill>
            </div>
            <h1 style={{ fontSize: "clamp(36px, 4.3vw, 62px)", lineHeight: 1.08, letterSpacing: -0.035, fontWeight: 500, margin: "0 0 24px 0" }}>
              {t.hero.title1}<br/>
              <span style={{ color: "var(--ink-3)", whiteSpace: "nowrap" }}>{t.hero.title2}</span>
              {t.hero.title3 && <><br/><span style={{ color: "var(--ink-3)", whiteSpace: "nowrap" }}>{t.hero.title3}</span></>}
            </h1>
            <p style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 580, margin: 0, lineHeight: 1.55, textAlign: "justify" }}>{t.hero.body}{t.hero.body2 && <>{" "}{t.hero.body2}</>}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <Btn variant="primary" href="app.html">{t.hero.ctaPrimary}</Btn>
              <Btn variant="ghost" href="#product">{t.hero.ctaSecondary}</Btn>
            </div>
          </div>
          <div style={{ background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 14, padding: 24 }}>
            <ConnectivityMatrix />
          </div>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;