// Interactive Regional Map
function MapPage() {
  const [active, setActive] = React.useState(REGIONS[0].id);
  const [filter, setFilter] = React.useState("All");
  const states = ["All", "TN", "GA"];

  const visible = REGIONS.filter(r => filter === "All" || r.state === filter);
  const r = REGIONS.find(x => x.id === active);
  const project = PROJECTS.find(p => p.id === r?.id);

  return (
    <div className="page" data-screen-label="06 Map">
      <section style={{ paddingTop: "calc(var(--pad) + 120px)", paddingBottom: 32 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>Regional Presence</div>
          <h1 style={{ fontSize: "clamp(56px, 8vw, 130px)", lineHeight: .96 }}>
            Where we <span className="italic" style={{ color: "var(--bronze-2)" }}>build.</span>
          </h1>
          <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
            <p style={{ color: "var(--bone-2)", fontSize: 16, maxWidth: 640, lineHeight: 1.7, margin: 0 }}>
              Anchored in Chattanooga, GenTech works across Tennessee, Georgia, and Alabama — from the river to the brow of Lookout Mountain.
              Click any pin to open the project.
            </p>
            <div style={{ display: "flex", gap: 8 }}>
              {states.map(s => (
                <button key={s} className={"chip " + (filter === s ? "active" : "")} onClick={() => setFilter(s)}>{s}</button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <div className="grid grid-12" style={{ gap: 32, alignItems: "start" }}>
            {/* Map */}
            <div style={{ gridColumn: "1 / span 8", background: "var(--bg-2)", border: "1px solid var(--line)", aspectRatio: "1 / 1", position: "relative", overflow: "hidden" }}>
              <RegionalMapSVG />
              {visible.map(rg => (
                <div key={rg.id}
                  className={"map-pin " + (active === rg.id ? "active" : "")}
                  style={{ left: rg.x + "%", top: rg.y + "%" }}
                  onClick={() => setActive(rg.id)}
                />
              ))}
              {/* Floating label on active */}
              {r && (
                <div style={{
                  position: "absolute", left: r.x + "%", top: r.y + "%",
                  transform: `translate(${r.x > 50 ? "calc(-100% - 16px)" : "16px"}, -8px)`,
                  background: "rgba(19,20,15,.94)", border: "1px solid var(--bronze)",
                  padding: "14px 18px", color: "var(--bone)", fontSize: 12,
                  whiteSpace: "nowrap",
                  pointerEvents: "none",
                }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.1 }}>{r.name}</div>
                  <div className="eyebrow" style={{ marginTop: 4 }}>{r.state}</div>
                </div>
              )}
              {/* Compass / legend */}
              <div style={{ position: "absolute", bottom: 20, left: 20, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".2em", color: "var(--bone-3)" }}>
                LAT 35°N · LON 85°W
              </div>
              <div style={{ position: "absolute", top: 20, right: 20, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".2em", color: "var(--bone-3)" }}>
                N ↑
              </div>
            </div>

            {/* Detail panel */}
            <div style={{ gridColumn: "9 / span 4", display: "flex", flexDirection: "column", gap: 28 }}>
              <div style={{ background: "var(--bg-2)", border: "1px solid var(--line)" }}>
                {project && (
                  <>
                    <div className="img ar-3-2" style={{ backgroundImage: `url(${project.img})` }} />
                    <div style={{ padding: 24 }}>
                      <div className="eyebrow"><span className="dot"></span>{project.category}</div>
                      <h3 style={{ fontFamily: "var(--serif)", fontSize: 32, margin: "12px 0 16px", lineHeight: 1.1 }}>{project.title}</h3>
                      <div style={{ color: "var(--bone-2)", fontSize: 13.5, lineHeight: 1.6, marginBottom: 24 }}>{project.blurb}</div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                        {[
                          ["Sector", project.category],
                          ["Location", project.place],
                          ["Delivery", project.role],
                        ].map(([l, v]) => (
                          <div key={l}>
                            <div className="eyebrow" style={{ marginBottom: 6 }}>{l}</div>
                            <div style={{ fontFamily: "var(--serif)", fontSize: 15, color: "var(--bone)" }}>{v}</div>
                          </div>
                        ))}
                      </div>
                      <button className="btn bronze sm" style={{ marginTop: 24 }} onClick={() => window.__openProject(project.id)}>
                        Open Project <span className="arr">→</span>
                      </button>
                    </div>
                  </>
                )}
              </div>

              {/* All sites */}
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>All Sites · {visible.length}</div>
                <div style={{ borderTop: "1px solid var(--line)" }}>
                  {visible.map(rg => (
                    <div key={rg.id}
                      onClick={() => setActive(rg.id)}
                      onMouseEnter={() => setActive(rg.id)}
                      style={{
                        display: "grid", gridTemplateColumns: "1fr 28px",
                        padding: "12px 0", borderBottom: "1px solid var(--line)", cursor: "pointer",
                        color: active === rg.id ? "var(--bone)" : "var(--bone-3)",
                        transition: "color .2s ease",
                      }}>
                      <span style={{ fontFamily: "var(--serif)", fontSize: 18 }}>{rg.name}</span>
                      <span className="eyebrow" style={{ textAlign: "right" }}>{rg.state}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MapPage });