// Weather (with ASCII art + forecast strip) + Map + Note
const WeatherPanel = ({ data }) => {
  const w = data.weather;
  return (
    <Panel tag="//" title="Sky Report" right={`${w.condition.split(" · ")[0]}`}>
      <div className="weather-grid">
        <div className="weather-now">
          <div className="big">{w.temp_f != null ? `${w.temp_f}°F` : "—°F"}</div>
          <div className="cond">{w.condition}</div>
          <div className="weather-meta">
            <div><b>{w.wind_mph ?? "—"}</b>MPH WIND</div>
            <div><b>{w.wind_dir ?? "—"}</b>HEADING</div>
            <div><b>{w.humidity != null ? `${w.humidity}%` : "—"}</b>HUMIDITY</div>
            <div><b>{w.fog != null ? `${Math.round(w.fog * 100)}%` : "—"}</b>FOG</div>
          </div>
        </div>
        <pre className="ascii" style={{ textAlign: "center", color: "var(--amber-hot)", textShadow: "0 0 8px var(--amber-glow)" }}>
{ASCII.rain}
        </pre>
      </div>

      <div style={{
        padding: "0 4px 6px",
        fontSize: 10,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--amber-mute)",
        fontFamily: "var(--mono)",
      }}>
        ▸ Last 6 hours · hi / lo °F
      </div>
      <div className="forecast-strip">
        {w.forecast.map((f, i) => (
          <div className="forecast-day" key={`${f.day}-${i}`} style={{ opacity: f.samples ? 1 : 0.4 }}>
            <div className="d">{f.day}</div>
            <div className="ico">{f.samples ? FORECAST_ICON[f.icon] : "—"}</div>
            <div className="hi-lo">
              {f.hi != null ? `${f.hi}°` : "—"} / {f.lo != null ? `${f.lo}°` : "—"}
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
};

// Knox County survival atlas — The Hub centered, surrounding cities
// colored by difficulty. CRT-style replacement of the safehouse map.
const MapPanel = ({ data }) => {
  const cities = data.cities || [];
  const hub    = cities.find((c) => c.id === "hub");
  const others = cities.filter((c) => c.id !== "hub");

  return (
    <Panel
      tag="//"
      title="Knox County · Survival Atlas"
      right={`${others.length} OUTPOSTS · 1 SAFE ZONE`}
      className="map-panel"
    >
      <div className="atlas-canvas">
        <div className="grid-lines"></div>
        <div className="atlas-roads">
          <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            {/* Ohio river along the top */}
            <path className="river" d="M0,11 Q24,16 44,9 T80,12 T100,7" />
            {/* east-west spine through The Hub */}
            <path className="road" d="M0,60 Q22,57 38,62 T68,60 T100,58" />
            {/* north-south corridor */}
            <path className="road" d="M50,4 Q48,30 52,60 T54,98" />
            {/* mid-latitude road */}
            <path className="road" d="M0,42 L100,38" />
            {/* secondary tracks */}
            <path className="road-dashed" d="M70,4 L66,98" />
            <path className="road-dashed" d="M0,80 L100,86" />
            <path className="road-dashed" d="M14,22 L52,60" />
            <path className="road-dashed" d="M82,28 L52,60" />
          </svg>
        </div>

        {others.map((c) => (
          <div
            key={c.id}
            className={`atlas-city diff-${c.difficulty}`}
            style={{ left: `${c.x}%`, top: `${c.y}%` }}
          >
            <span className="atlas-dot"></span>
            <div className="lbl">{c.name}</div>
            {c.note && <div className="note">{c.note}</div>}
          </div>
        ))}

        <div className="atlas-arrow" style={{ left: "94%", top: "8%" }}>
          <span className="arrow-glyph">↗</span>
          To Louisville<br/>(NO GO)
        </div>

        {hub && (
          <div className="atlas-hub" style={{ left: `${hub.x}%`, top: `${hub.y}%` }}>
            <span className="star">★</span>
            <div className="lbl">{hub.name.toUpperCase()}</div>
            <div className="sub">{hub.note}</div>
          </div>
        )}

        <div className="atlas-compass">
          N<br/>↑<br/><span style={{ fontSize: 9 }}>KNOX, KY</span>
        </div>
      </div>

      <div className="atlas-legend">
        <div className="item"><span className="sw diff-easy"></span>Easy</div>
        <div className="item"><span className="sw diff-mod"></span>Moderate</div>
        <div className="item"><span className="sw diff-hard"></span>Hard</div>
        <div className="item"><span className="sw diff-extreme"></span>Extreme</div>
        <div className="item"><span className="sw diff-hub">★</span>The Hub</div>
        <div className="item" style={{ marginLeft: "auto" }}>
          ▸ MEET AT THE HUB FOR DEEDS &amp; TRADE
        </div>
      </div>
    </Panel>
  );
};

const NotePanel = () => (
  <div className="note">
    <span>
      Picked up another stray today — kid called Ratking. Quiet. Good with traps. The rain's been coming down for three days
      and the generator's wheezing again, but Dutch says he can fix it before sundown. If you're hearing this and you're
      out there alone, the door's open. Knock the painted 'S'. We'll put the kettle on.
    </span>
    <span className="sig">— Hawthorne, gate watch · day 64</span>
  </div>
);

Object.assign(window, { WeatherPanel, MapPanel, NotePanel });