/* global React */
// Hand-drawn OC map image with clickable hotspots over each market label.

const { useState: _u1 } = React;

// Hotspots are percentages of the 1024×559 image so they scale responsively.
const HOTSPOTS = {
  tustin:        { left: 39.0, top: 19.5, width: 18.0, height: 11.5 },
  "costa-mesa":  { left:  3.5, top: 39.0, width: 17.5, height: 12.0 },
  "laguna-hills":{ left: 67.5, top: 43.5, width: 18.5, height: 11.5 },
  irvine:        { left: 41.5, top: 82.0, width: 20.5, height: 12.5 },
};

function OCMap({ selected, onSelect }) {
  const M = window.MARKETS;
  return (
    <div>
      <div style={{
        position: "relative",
        width: "100%",
        borderRadius: 4,
        overflow: "hidden",
        border: "1px solid var(--rule)",
      }}>
        <img
          src="img/oc-map.jpg"
          alt="Hand-drawn map of Orange County showing all four farmers market locations"
          style={{ width: "100%", height: "auto", display: "block" }}
        />
        {M.map((m) => {
          const h = HOTSPOTS[m.id];
          if (!h) return null;
          const isSel = selected === m.id;
          return (
            <button
              key={m.id}
              onClick={() => onSelect && onSelect(m.id)}
              aria-label={`${m.name} farmers market`}
              title={`${m.name} — ${m.day}s, ${m.hours}`}
              style={{
                position: "absolute",
                left: `${h.left}%`,
                top: `${h.top}%`,
                width: `${h.width}%`,
                height: `${h.height}%`,
                background: isSel ? "rgba(196, 77, 46, 0.18)" : "transparent",
                border: isSel ? "2px solid var(--terracotta)" : "2px solid transparent",
                borderRadius: 6,
                cursor: "pointer",
                padding: 0,
                transition: "background .18s, border-color .18s",
              }}
              onMouseEnter={(e) => {
                if (!isSel) e.currentTarget.style.background = "rgba(196, 77, 46, 0.10)";
              }}
              onMouseLeave={(e) => {
                if (!isSel) e.currentTarget.style.background = "transparent";
              }}
            />
          );
        })}
      </div>

      {/* Legend / quick-pick row below */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: 10,
        marginTop: 16,
      }}>
        {M.map((m) => (
          <button key={m.id}
            onClick={() => onSelect && onSelect(m.id)}
            style={{
              textAlign: "left",
              background: selected === m.id ? "var(--ink)" : "var(--paper)",
              color: selected === m.id ? "var(--cream-warm)" : "var(--ink)",
              border: "1px solid var(--rule)",
              borderRadius: 3,
              padding: "12px 14px",
              fontFamily: "var(--body)",
              cursor: "pointer",
              transition: "background .18s, color .18s",
            }}
          >
            <div style={{
              display: "flex", alignItems: "center", gap: 8,
              fontFamily: "var(--ui)", fontSize: 11, fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: selected === m.id ? "var(--cream-warm)" : "var(--brown)",
              marginBottom: 4,
            }}>
              <span style={{
                width: 10, height: 10, borderRadius: "50%",
                background: m.color, display: "inline-block"
              }}/>
              {m.day}
            </div>
            <div style={{
              fontFamily: "var(--display)", fontStyle: "italic",
              fontSize: 22, fontWeight: 500, lineHeight: 1,
            }}>{m.name}</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>{m.hours}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

window.OCMap = OCMap;