/* Console 3 — Bright Bento / Lime. Bold rounded cards, heavy grotesk type,
   lime hero, one black sparkline card. */
(function () {
  const { W, linePath } = window.POV;
  const LIME = "#d2f24a";
  const INK = "#15160f";

  function ConsoleBento() {
    const { d } = linePath(W.trend, 230, 70, 6);
    const dateParts = String(W.date || "").split(/\s+/);
    const dayNum = (String(W.date || "").match(/\b\d{2}\b/) || ["--"])[0];
    const weekday = (dateParts[0] || "today").replace(",", "");
    const month = dateParts[2] || "";
    return (
      <div style={{
        position: "absolute", inset: 0, overflow: "hidden", background: "#d8d7cf",
        fontFamily: "'Space Grotesk',sans-serif", color: INK, padding: 20,
        display: "grid", gap: 14, gridTemplateColumns: "repeat(12,1fr)", gridTemplateRows: "repeat(6,1fr)",
        gridTemplateAreas: `
          "hero hero hero hero hero hero hero next next next next next"
          "hero hero hero hero hero hero hero next next next next next"
          "hero hero hero hero hero hero hero date date hum hum hum"
          "fore fore fore fore fore fore fore date date hum hum hum"
          "fore fore fore fore fore fore fore uv uv uv warn warn"
          "fore fore fore fore fore fore fore uv uv uv warn warn"`,
      }}>
        {/* HERO */}
        <div style={{ gridArea: "hero", background: LIME, borderRadius: 30, padding: 28, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: "50%", background: "#15160f" }} />
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.1 }}>Hong Kong</div>
                <div style={{ fontSize: 12.5, fontWeight: 500, opacity: .65 }}>HK Observatory · {W.time}</div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: "auto", display: "flex", alignItems: "flex-end", gap: 14 }}>
            <span style={{ fontSize: 118, fontWeight: 700, letterSpacing: "-.05em", lineHeight: .82 }}>{W.temp}°</span>
            <div style={{ paddingBottom: 14 }}>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-.02em", textTransform: "capitalize" }}>{W.condition}</div>
              <div style={{ fontSize: 14, fontWeight: 500, opacity: .7 }}>feels like {W.feels}° · high {W.high}° low {W.low}°</div>
            </div>
          </div>

          <div style={{ marginTop: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, fontWeight: 600, marginBottom: 7 }}>
              <span>Rain chance</span><span>{W.rain}%</span>
            </div>
            <div style={{ height: 7, borderRadius: 6, background: "#fff" }}>
              <div style={{ width: W.rain + "%", height: "100%", borderRadius: 6, background: "#15160f" }} />
            </div>
          </div>

        </div>

        {/* NEXT HOURS */}
        <div style={{ gridArea: "next", background: "#eceae3", borderRadius: 30, padding: 24, display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-.02em", lineHeight: 1 }}>Next<br />hours</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, fontSize: 13.5, fontWeight: 500, opacity: .7 }}>
            <span>⛈</span> {W.condition} · {weekday}, {dayNum}
          </div>
          <div style={{ marginTop: "auto", display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 8 }}>
            {W.hours.slice(0, 6).map((h, i) => (
              <div key={i} style={{ borderRadius: 30, padding: "16px 0 13px", textAlign: "center", background: i === 0 ? LIME : "#fff" }}>
                <div style={{ fontSize: 22, fontWeight: 700 }}>{h.temp}°</div>
                <div style={{ fontSize: 12, fontWeight: 500, opacity: .65, marginTop: 4 }}>{h.t}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 0, marginTop: 13 }}>
            {W.hours.slice(0, 6).map((_, i) => (
              <React.Fragment key={i}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: i === 0 ? "#15160f" : "#c2c1b8" }} />
                {i < 5 && <span style={{ flex: 1, height: 2, background: "#c2c1b8" }} />}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* DATE */}
        <div style={{ gridArea: "date", background: "#15160f", color: "#fff", borderRadius: 28, padding: 20, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div style={{ fontSize: 52, fontWeight: 700, letterSpacing: "-.03em", lineHeight: 1 }}>{dayNum}</div>
          <div style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.15, textTransform: "capitalize" }}>{weekday},<br />{month}</div>
        </div>

        {/* HUMIDITY (black sparkline) */}
        <div style={{ gridArea: "hum", background: "#15160f", color: "#fff", borderRadius: 28, padding: 22, display: "flex", flexDirection: "column", overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ fontSize: 17, fontWeight: 700 }}>Humidity</span>
            <span style={{ fontSize: 13, fontWeight: 500, opacity: .6 }}>today</span>
          </div>
          <div style={{ flex: 1, position: "relative", marginTop: 6 }}>
            <svg viewBox="0 0 230 70" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <defs><linearGradient id="bfill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="rgba(210,242,74,.35)" /><stop offset="1" stopColor="rgba(210,242,74,0)" /></linearGradient></defs>
              <path d={d + " L 224,70 L 6,70 Z"} fill="url(#bfill)" />
              <path d={d} fill="none" stroke={LIME} strokeWidth="3" />
            </svg>
            <div style={{ position: "absolute", right: 6, top: -2, background: "#fff", color: INK, fontSize: 13, fontWeight: 700, padding: "4px 11px", borderRadius: 14 }}>{W.humidity}%</div>
          </div>
        </div>

        {/* UV */}
        <div style={{ gridArea: "uv", background: "#c7c8bd", borderRadius: 28, padding: 22, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <div style={{ width: 38, height: 38, borderRadius: "50%", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>☀</div>
            <span style={{ fontSize: 15, fontWeight: 600, opacity: .8 }}>UV index<br /><span style={{ fontWeight: 500, opacity: .7, fontSize: 13 }}>{W.uvLabel}</span></span>
          </div>
          <div style={{ marginTop: "auto", display: "flex", alignItems: "baseline", gap: 6 }}>
            <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-.03em" }}>{W.uv}</span>
            <span style={{ fontSize: 18, fontWeight: 500, opacity: .55 }}>/ 11</span>
          </div>
        </div>

        {/* WARNINGS */}
        <div style={{ gridArea: "warn", background: "#eceae3", borderRadius: 28, padding: 20, display: "flex", flexDirection: "column" }}>
          <div style={{ width: 38, height: 38, borderRadius: "50%", background: LIME, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, marginBottom: "auto" }}>⚠</div>
          <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-.01em", lineHeight: 1.15, marginTop: 10 }}>{W.warnings.length ? "Warnings" : "No warnings"}<br /><span style={{ background: LIME, padding: "0 4px", borderRadius: 4 }}>{W.warnings[0]?.name || "currently"}</span><br />{W.warnings.length ? "active" : "in force"}</div>
        </div>

        {/* FORECAST timeline */}
        <div style={{ gridArea: "fore", background: "#fff", borderRadius: 30, padding: 26, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
            <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-.02em", lineHeight: 1 }}>3-day<br />forecast</div>
            <div style={{ fontSize: 13, fontWeight: 600, opacity: .62, paddingTop: 4 }}>Hong Kong</div>
          </div>
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 13, flex: 1, justifyContent: "center" }}>
            {[["Thu 04", "thunderstorms", 100, LIME, "33° / 28°"], ["Fri 05", "heavy rain", 72, "#dfe0d6", "32° / 27°"], ["Sat 06", "storms easing", 56, "#dfe0d6", "31° / 27°"]].map(([day, label, pct, col, t], i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{ width: 64, fontSize: 13.5, fontWeight: 600, flex: "none" }}>{day}</span>
                <div style={{ flex: 1, height: 38, borderRadius: 19, background: "#f0efe9", position: "relative", overflow: "hidden" }}>
                  <div style={{ width: pct + "%", height: "100%", borderRadius: 19, background: col, display: "flex", alignItems: "center", paddingLeft: 16, fontSize: 13.5, fontWeight: 600 }}>{label}</div>
                </div>
                <span style={{ width: 78, textAlign: "right", fontSize: 14.5, fontWeight: 700, flex: "none" }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  window.ConsoleBento = ConsoleBento;
})();