/* global React */
const { useState } = React;

const RETAILERS = [
{ city: "באר שבע", name: "Welcome Design — אולם תצוגה ראשי", addr: "פנחס החוצב 1, באר שבע", phone: "072-212-2014", hours: "א–ה 09:00–18:00 · ו 09:00–13:00", flagship: true },
{ city: "בקרוב · תל אביב", name: "משווק רשמי בהקמה", addr: "פרטים יעודכנו בקרוב", phone: "—", hours: "Q1 2026", soon: true },
{ city: "בקרוב · מרכז", name: "משווק רשמי בהקמה", addr: "פרטים יעודכנו בקרוב", phone: "—", hours: "Q2 2026", soon: true }];


function WhereToBuy() {
  const [active, setActive] = useState(0);
  return (
    <section className="section section--surface" id="where" data-screen-label="08 Where to buy">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">WHERE TO SEE · ISRAEL</span>
            <h2 className="section-title" style={{ marginTop: 24 }}>תראה אותו<br />לפני שתקנה אותו.</h2>
          </div>
          <p className="head-right">
            כרגע הדרך לראות, לגעת ולשמוע את PRIME היא באולם התצוגה של
            Welcome Design בבאר שבע. רשת משווקים ארצית בהקמה — נשמח לעדכן
            כשתיפתח נקודה קרובה אליך.
          </p>
        </div>

        <div className="retailers">
          <div className="retailers__map">
            <IsraelMap retailers={RETAILERS} active={active} onPick={setActive} />
          </div>
          <div className="retailers__list">
            {RETAILERS.map((r, i) =>
            <button
              key={i}
              className={`retailer ${active === i ? 'is-active' : ''} ${r.soon ? 'is-soon' : ''}`}
              onClick={() => !r.soon && setActive(i)}>
              
                <div className="retailer__head">
                  <span className="retailer__city">{r.city}</span>
                  {r.flagship && <span className="retailer__flag">FLAGSHIP</span>}
                  {r.soon && <span className="retailer__flag" style={{ background: 'transparent', color: 'var(--copper)', border: '1px solid var(--copper)' }}>SOON</span>}
                </div>
                <div className="retailer__name">{r.name}</div>
                <div className="retailer__meta">
                  <span>{r.addr}</span>
                  {!r.soon && <span>·</span>}
                  {!r.soon && <span>{r.phone}</span>}
                </div>
                <div className="retailer__hours">{r.hours}</div>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// Stylized Israel map — abstract dot grid + retailer pins
function IsraelMap({ retailers, active, onPick }) {
  // approximate coordinates (in viewBox units 0-300)
  const PINS = [
  { x: 130, y: 280, label: "באר שבע · LIVE" },
  { x: 110, y: 150, label: "ת״א · Q1 2026", soon: true },
  { x: 145, y: 60, label: "מרכז · Q2 2026", soon: true }];

  // generate dot grid that vaguely resembles Israel's outline
  const dots = [];
  const outline = [
  [120, 30], [150, 50], [160, 70], [155, 100], [150, 140], [140, 180], [135, 220],
  [140, 260], [150, 310], [160, 360], [160, 420], [165, 470], [155, 490]];

  // helper: distance from polyline
  function distToOutline(x, y) {
    let min = Infinity;
    for (let i = 0; i < outline.length - 1; i++) {
      const [x1, y1] = outline[i],[x2, y2] = outline[i + 1];
      const dx = x2 - x1,dy = y2 - y1;
      const t = Math.max(0, Math.min(1, ((x - x1) * dx + (y - y1) * dy) / (dx * dx + dy * dy)));
      const px = x1 + t * dx,py = y1 + t * dy;
      const d = Math.hypot(x - px, y - py);
      if (d < min) min = d;
    }
    return min;
  }
  for (let r = 0; r < 28; r++) {
    for (let c = 0; c < 16; c++) {
      const x = 60 + c * 12;
      const y = 20 + r * 18;
      const d = distToOutline(x, y);
      if (d < 38) dots.push({ x, y, d });
    }
  }

  return (
    <svg viewBox="0 0 300 530" style={{ width: '100%', height: '100%', maxHeight: 600 }}>
      <defs>
        <radialGradient id="pinGlow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="var(--volt)" stopOpacity="0.6" />
          <stop offset="1" stopColor="var(--volt)" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* grid dots */}
      {dots.map((d, i) =>
      <circle key={i} cx={d.x} cy={d.y} r={d.d < 12 ? 1.6 : 1} fill={d.d < 18 ? "#3a3a3a" : "#222"} />
      )}

      {/* connecting lines from active pin to all others */}
      {PINS.map((p, i) => i !== active &&
      <line
        key={`l-${i}`}
        x1={PINS[active].x} y1={PINS[active].y}
        x2={p.x} y2={p.y}
        stroke="var(--volt)"
        strokeWidth="0.5"
        strokeDasharray="2 3"
        opacity="0.3" />

      )}

      {/* pins */}
      {PINS.map((p, i) =>
      <g key={i} onClick={() => onPick(i)} style={{ cursor: 'pointer' }}>
          {active === i && <circle cx={p.x} cy={p.y} r="22" fill="url(#pinGlow)" />}
          {active === i &&
        <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="var(--volt)" strokeWidth="0.8" opacity="0.5">
              <animate attributeName="r" from="8" to="22" dur="1.6s" repeatCount="indefinite" />
              <animate attributeName="opacity" from="0.6" to="0" dur="1.6s" repeatCount="indefinite" />
            </circle>
        }
          <circle cx={p.x} cy={p.y} r={active === i ? 6 : 4} fill={active === i ? "var(--volt)" : "var(--copper)"} stroke="#0a0a0a" strokeWidth="2" />
          <text x={p.x + 12} y={p.y + 4} fontFamily="var(--font-mono)" fontSize="9" fill={active === i ? "var(--volt)" : "var(--text-dim)"} letterSpacing="1">
            {p.label}
          </text>
        </g>
      )}
    </svg>);

}

window.WhereToBuy = WhereToBuy;