/* Console 4 — Editorial / Swiss. Ruled weather broadsheet: hairline grid,
   serif numerals, grotesque data tables, single vermillion accent. */
(function () {
  const { W } = window.POV;
  const INK = "#1b1a16";
  const RULE = "#cbc7bb";
  const RED = "#cf2e22";
  const FAINT = "#86837a";

  function ConsoleEditorial() {
    const table = [
      ["Feels like", W.feels + "°C"],
      ["Humidity", W.humidity + "%"],
      ["Dew point", W.dew + "°C"],
      ["Wind", W.wind + " km/h " + W.windDir],
      ["UV index", W.uv + " · " + W.uvLabel],
      ["Visibility", W.visibility + " km"],
      ["Rain chance", W.rain + "%"],
    ];
    const max = Math.max(...W.trend), min = Math.min(...W.trend);
    return (
      <div style={{
        position: "absolute", inset: 0, overflow: "hidden", background: "#f4f2ea", color: INK,
        fontFamily: "'Archivo',sans-serif", padding: "26px 34px 0", display: "flex", flexDirection: "column",
      }}>
        {/* masthead */}
        <div style={{ borderTop: `3px solid ${INK}`, paddingTop: 9, flex: "none" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", borderBottom: `1px solid ${RULE}`, paddingBottom: 9 }}>
            <span style={{ fontSize: 20, fontWeight: 800, letterSpacing: "-.01em" }}>POV<span style={{ color: RED }}>.</span>HK</span>
            <span style={{ fontSize: 10.5, letterSpacing: ".34em", textTransform: "uppercase", color: FAINT, whiteSpace: "nowrap" }}>Hong Kong Observatory · Daily Bulletin</span>
            <span style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 600, whiteSpace: "nowrap" }}>{W.date} · {W.time} HKT</span>
          </div>
        </div>

        {/* main split */}
        <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1.55fr 1fr", minHeight: 0 }}>
          {/* left */}
          <div style={{ borderRight: `1px solid ${RULE}`, paddingRight: 30, paddingTop: 18, display: "flex", flexDirection: "column" }}>
            <div style={{ fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: RED, fontWeight: 700 }}>Current Conditions</div>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 40, marginTop: 4 }}>
              <span style={{ fontFamily: "'Instrument Serif',serif", fontSize: 220, lineHeight: .82, letterSpacing: "-.02em" }}>{W.temp}°</span>
              <div style={{ paddingTop: 34 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, fontSize: 22, fontWeight: 600 }}><span style={{ color: RED }}>↑</span>{W.high}°</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, fontSize: 22, fontWeight: 600, color: FAINT, marginTop: 6 }}><span>↓</span>{W.low}°</div>
              </div>
            </div>
            <div style={{ fontFamily: "'Instrument Serif',serif", fontSize: 52, lineHeight: 1, marginTop: -6, letterSpacing: ".01em", textTransform: "capitalize" }}>{W.condition}.</div>
            <p style={{ fontSize: 15.5, lineHeight: 1.5, color: "#3a382f", maxWidth: 540, marginTop: 16, marginBottom: 0 }}>
              {W.forecast} {W.warnings[0] && <span style={{ color: RED, fontWeight: 600, textTransform: "capitalize" }}>{W.warnings[0].name}</span>} {W.warnings[0] ? "remains in force." : ""}
            </p>

            {/* trend */}
            <div style={{ marginTop: "auto", paddingBottom: 18, borderTop: `1px solid ${RULE}`, paddingTop: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", color: FAINT, marginBottom: 8 }}>
                <span>Humidity · last 12h</span><span>{min}–{max}%</span>
              </div>
              <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 54 }}>
                {W.trend.map((v, i) => (
                  <div key={i} style={{ flex: 1, height: ((v - 50) / (max - 50)) * 100 + "%", background: i === W.trend.length - 1 ? RED : INK, opacity: i === W.trend.length - 1 ? 1 : .82 }} />
                ))}
              </div>
            </div>
          </div>

          {/* right column: data table + sun + warnings */}
          <div style={{ paddingLeft: 30, paddingTop: 18, display: "flex", flexDirection: "column" }}>
            <div style={{ fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: FAINT, fontWeight: 700, marginBottom: 4 }}>Observations</div>
            <div>
              {table.map(([l, v], i) => (
                <div key={i} style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "9px 0", borderBottom: `1px solid ${RULE}` }}>
                  <span style={{ fontSize: 13, letterSpacing: ".04em", color: "#46443b", whiteSpace: "nowrap" }}>{l}</span>
                  <span style={{ fontSize: 18, fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>{v}</span>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 0, marginTop: 16 }}>
              {[["Sunrise", W.sunrise], ["Sunset", W.sunset]].map(([l, v], i) => (
                <div key={l} style={{ flex: 1, borderLeft: i === 1 ? `1px solid ${RULE}` : "none", paddingLeft: i === 1 ? 16 : 0 }}>
                  <div style={{ fontSize: 10, letterSpacing: ".24em", textTransform: "uppercase", color: FAINT }}>{l}</div>
                  <div style={{ fontFamily: "'Instrument Serif',serif", fontSize: 38, lineHeight: 1, marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: "auto", marginBottom: 18, border: `1.5px solid ${RED}`, padding: "13px 15px" }}>
              <div style={{ fontSize: 10.5, letterSpacing: ".26em", textTransform: "uppercase", color: RED, fontWeight: 700, marginBottom: 9 }}>⚠ Warnings in force</div>
              {W.warnings.map((w, i) => (
                <div key={w.code} style={{ display: "flex", alignItems: "baseline", gap: 10, paddingTop: i ? 8 : 0, marginTop: i ? 8 : 0, borderTop: i ? `1px solid ${RULE}` : "none" }}>
                  <span style={{ fontSize: 13, fontWeight: 700, color: RED, fontVariantNumeric: "tabular-nums" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: 14, textTransform: "capitalize" }}>{w.name}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* footer */}
        <div style={{ borderTop: `1px solid ${RULE}`, padding: "9px 0 11px", flex: "none", display: "flex", justifyContent: "space-between", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: FAINT }}>
          <span>22.30°N 114.17°E</span>
          <span>Source · Hong Kong Observatory open data</span>
          <span>Next update 15:00</span>
        </div>
      </div>
    );
  }
  window.ConsoleEditorial = ConsoleEditorial;
})();