// Intel grid: quake feed + weather grid + news signal.
const QUAKES = [
  { mag: 3.2, place: "BALIKESIR · 14km N",  ts: "14:31:42", lat: "39.4501", lng: "28.1722" },
  { mag: 2.8, place: "AEGEAN SEA",          ts: "14:28:11", lat: "37.6210", lng: "26.0140" },
  { mag: 4.1, place: "MUĞLA · 22km SW",     ts: "14:21:08", lat: "37.0140", lng: "28.2102" },
  { mag: 2.4, place: "CRETE · 41km W",      ts: "14:18:54", lat: "35.4002", lng: "23.9810" },
  { mag: 3.0, place: "VAN · 8km NE",        ts: "14:11:37", lat: "38.5402", lng: "43.4188" },
  { mag: 2.1, place: "ANKARA · 31km S",     ts: "14:04:22", lat: "39.6504", lng: "32.8821" },
  { mag: 3.7, place: "ATHENS · 18km E",     ts: "13:58:49", lat: "37.9842", lng: "23.7300" },
];

const WEATHER = [
  { city: "KONYA",    temp: 14, cond: "PARTLY", wind: 12 },
  { city: "ISTANBUL", temp: 16, cond: "RAIN",   wind: 22 },
  { city: "ANKARA",   temp: 12, cond: "CLEAR",  wind: 8 },
  { city: "IZMIR",    temp: 19, cond: "CLEAR",  wind: 14 },
  { city: "BURSA",    temp: 15, cond: "FOG",    wind: 6 },
  { city: "ANTALYA",  temp: 22, cond: "CLEAR",  wind: 11 },
];

const NEWS = [
  { src: "GDELT · TR", title: "TCMB faiz kararı sinyali · piyasa hazır", weight: "HIGH" },
  { src: "GDELT · EU", title: "ECB liquidity window · operations stable", weight: "MED" },
  { src: "REUTERS",   title: "Brent crude · 2.1% upmove on supply tight", weight: "MED" },
  { src: "GDELT · TR", title: "Konya OSB · 3 yeni yatırım protokolü",   weight: "LOW" },
  { src: "FIRMS",     title: "Ege bölgesi 41 hotspot · severity med",     weight: "MED" },
  { src: "USGS",      title: "Aegean swarm · 6 events / 1h · M2.4–4.1",   weight: "HIGH" },
];

const magColor = m => m >= 4 ? "var(--alert)" : m >= 3 ? "var(--amber)" : "var(--bone-soft)";

const IntelGrid = () => (
  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, height: "100%" }}>
    {/* Quakes */}
    <div style={{ background: "var(--elevated)", border: "1px solid var(--edge)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ padding: "6px 10px", borderBottom: "1px solid var(--edge)", display: "flex", alignItems: "center", gap: 6 }}>
        <Eyebrow color="var(--bone)">QUAKE_FEED</Eyebrow>
        <span style={{ color: "var(--ash-deep)" }}>·</span>
        <Eyebrow>USGS · TR+EU</Eyebrow>
      </div>
      <div style={{ overflow: "auto", flex: 1 }}>
        {QUAKES.map((q, i) => (
          <div key={i} style={{ padding: "5px 10px", borderBottom: "1px solid var(--grid)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 6, fontSize: 11, alignItems: "center" }}>
            <span style={{ color: magColor(q.mag), fontWeight: 700, fontSize: 13, fontVariantNumeric: "tabular-nums" }}>M{q.mag}</span>
            <div style={{ minWidth: 0, lineHeight: 1.2 }}>
              <div style={{ color: "var(--bone)", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{q.place}</div>
              <div style={{ color: "var(--ash-deep)", fontSize: 9, letterSpacing: ".08em" }}>{q.lat}, {q.lng}</div>
            </div>
            <span style={{ color: "var(--ash)", fontVariantNumeric: "tabular-nums", fontSize: 10 }}>{q.ts}</span>
          </div>
        ))}
      </div>
    </div>

    {/* Weather */}
    <div style={{ background: "var(--elevated)", border: "1px solid var(--edge)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ padding: "6px 10px", borderBottom: "1px solid var(--edge)", display: "flex", alignItems: "center", gap: 6 }}>
        <Eyebrow color="var(--bone)">WX_GRID</Eyebrow>
        <span style={{ color: "var(--ash-deep)" }}>·</span>
        <Eyebrow>wttr.in · TR</Eyebrow>
      </div>
      <div style={{ flex: 1, padding: 8, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {WEATHER.map(w => (
          <div key={w.city} style={{ background: "var(--panel)", border: "1px solid var(--edge)", padding: "6px 8px" }}>
            <div style={{ fontSize: 10, color: "var(--ash)", letterSpacing: ".16em", fontWeight: 600 }}>{w.city}</div>
            <div style={{ fontSize: 22, color: "var(--bone)", fontWeight: 600, fontVariantNumeric: "tabular-nums", lineHeight: 1.1 }}>{w.temp}°<span style={{ fontSize: 11, color: "var(--ash)" }}>C</span></div>
            <div style={{ fontSize: 9, color: "var(--ash-deep)", letterSpacing: ".16em" }}>{w.cond} · {w.wind}km/h</div>
          </div>
        ))}
      </div>
    </div>

    {/* News signal */}
    <div style={{ background: "var(--elevated)", border: "1px solid var(--edge)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ padding: "6px 10px", borderBottom: "1px solid var(--edge)", display: "flex", alignItems: "center", gap: 6 }}>
        <Eyebrow color="var(--bone)">NEWS_SIGNAL</Eyebrow>
        <span style={{ color: "var(--ash-deep)" }}>·</span>
        <Eyebrow>GDELT · 1h</Eyebrow>
      </div>
      <div style={{ overflow: "auto", flex: 1 }}>
        {NEWS.map((n, i) => (
          <div key={i} style={{ padding: "6px 10px", borderBottom: "1px solid var(--grid)", fontSize: 11, lineHeight: 1.35 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 2 }}>
              <span style={{ color: "var(--ash)", fontSize: 9, letterSpacing: ".16em", fontWeight: 600 }}>{n.src}</span>
              <span style={{ color: n.weight === "HIGH" ? "var(--alert)" : n.weight === "MED" ? "var(--amber)" : "var(--ash-deep)", fontSize: 9, letterSpacing: ".16em", fontWeight: 600 }}>{n.weight}</span>
            </div>
            <div style={{ color: "var(--bone)" }}>{n.title}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

window.IntelGrid = IntelGrid;