// weather.jsx — Stanley + Salmon forecast strip.
// Hardcoded placeholder data (realistic for June in Idaho mountains).
// Two tabs, seven-day grid with hand-drawn weather icons.

const WEATHER = {
  stanley: {
    label: "Stanley",
    sublabel: "6,253 ft · Sawtooth Valley",
    days: [
      { dow: "Fri", dom: "19", icon: "sun", hi: 72, lo: 36, cond: "Bluebird" },
      { dow: "Sat", dom: "20", icon: "partly", hi: 68, lo: 38, cond: "PM clouds" },
      { dow: "Sun", dom: "21", icon: "partly", hi: 70, lo: 39, cond: "Clearing" },
      { dow: "Mon", dom: "22", icon: "sun", hi: 76, lo: 41, cond: "Sunny" },
      { dow: "Tue", dom: "23", icon: "rain", hi: 64, lo: 42, cond: "T-storm pm" },
      { dow: "Wed", dom: "24", icon: "partly", hi: 71, lo: 40, cond: "Mostly sun" },
      { dow: "Thu", dom: "25", icon: "sun", hi: 78, lo: 43, cond: "Hot & dry" },
    ],
  },
  salmon: {
    label: "Salmon",
    sublabel: "3,944 ft · Salmon Valley",
    days: [
      { dow: "Sun", dom: "21", icon: "sun", hi: 85, lo: 51, cond: "Warm" },
      { dow: "Mon", dom: "22", icon: "sun", hi: 88, lo: 53, cond: "Hot" },
      { dow: "Tue", dom: "23", icon: "partly", hi: 82, lo: 54, cond: "Breezy" },
      { dow: "Wed", dom: "24", icon: "rain", hi: 76, lo: 52, cond: "Showers pm" },
      { dow: "Thu", dom: "25", icon: "partly", hi: 84, lo: 51, cond: "Returning" },
      { dow: "Fri", dom: "26", icon: "sun", hi: 89, lo: 54, cond: "Takeout day" },
      { dow: "Sat", dom: "27", icon: "sun", hi: 91, lo: 56, cond: "Drive home" },
    ],
  },
};

function WeatherIcon({ kind }) {
  if (kind === "sun") {
    return (
      <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
        <circle cx="18" cy="18" r="6" fill="currentColor" />
        <g opacity="0.85">
          <line x1="18" y1="4"  x2="18" y2="9" />
          <line x1="18" y1="27" x2="18" y2="32"/>
          <line x1="4"  y1="18" x2="9"  y2="18"/>
          <line x1="27" y1="18" x2="32" y2="18"/>
          <line x1="8"  y1="8"  x2="11" y2="11"/>
          <line x1="25" y1="25" x2="28" y2="28"/>
          <line x1="8"  y1="28" x2="11" y2="25"/>
          <line x1="25" y1="11" x2="28" y2="8" />
        </g>
      </svg>
    );
  }
  if (kind === "partly") {
    return (
      <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="13" cy="14" r="5" fill="currentColor" opacity="0.85"/>
        <g opacity="0.7">
          <line x1="13" y1="3"  x2="13" y2="6" />
          <line x1="3"  y1="14" x2="6"  y2="14"/>
          <line x1="5"  y1="6"  x2="7"  y2="8" />
          <line x1="19" y1="6"  x2="21" y2="8" />
        </g>
        <path d="M 11 23 q 0 -6 6 -6 q 2 -4 7 -4 q 6 0 6 6 q 4 0 4 4 q 0 4 -4 4 L 14 27 q -3 0 -3 -4 z" fill="var(--paper)" stroke="currentColor" />
      </svg>
    );
  }
  if (kind === "rain") {
    return (
      <svg viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 8 16 q 0 -6 6 -6 q 2 -4 7 -4 q 6 0 6 6 q 4 0 4 4 q 0 4 -4 4 L 11 20 q -3 0 -3 -4 z" fill="currentColor" opacity="0.85" stroke="currentColor"/>
        <line x1="13" y1="24" x2="11" y2="30"/>
        <line x1="19" y1="24" x2="17" y2="30"/>
        <line x1="25" y1="24" x2="23" y2="30"/>
      </svg>
    );
  }
  return null;
}

function Weather() {
  const [tab, setTab] = React.useState("stanley");
  const data = WEATHER[tab];

  return (
    <div className="weather-card">
      <div className="weather-tabs" role="tablist">
        <button
          type="button"
          role="tab"
          aria-selected={tab === "stanley"}
          className="weather-tab"
          onClick={() => setTab("stanley")}
        >
          <small>Pre-trip · Jun 19—25</small>
          Stanley
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={tab === "salmon"}
          className="weather-tab"
          onClick={() => setTab("salmon")}
        >
          <small>On river / takeout</small>
          Salmon
        </button>
      </div>

      <div className="weather-grid" role="tabpanel">
        {data.days.map((d, i) => (
          <div className="weather-day" key={i}>
            <span className="dow">{d.dow}</span>
            <span className="dom">{d.dom}</span>
            <span className="icon"><WeatherIcon kind={d.icon} /></span>
            <span className="temps">
              <b className="hi">{d.hi}°</b>
              <span className="lo">{d.lo}°</span>
            </span>
            <span className="cond">{d.cond}</span>
          </div>
        ))}
      </div>

      <div style={{ padding: "14px 22px", borderTop: "1px dashed var(--paper-line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "10px" }}>
        <div className="mono-label" style={{ margin: 0 }}>
          {data.sublabel}
        </div>
        <div style={{ fontFamily: '"Old Standard TT", serif', fontStyle: "italic", color: "var(--muted)", fontSize: ".9rem" }}>
          Placeholder forecast — update closer to launch.
        </div>
      </div>
    </div>
  );
}

window.Weather = Weather;