// "Engineered & permit-ready" — showcases professional plan drawings.
const PLANS = [
  { src: "assets/img/PLOT-PLAN_17x11.png", title: "Plot Plan", note: "Setbacks · lot coverage · post placement" },
  { src: "assets/img/ELEVATIONS_SOLID.png", title: "Elevations & Footings", note: "Spans · footing sizes · load + wind ratings" },
  { src: "assets/img/TECHNICAL-DRAWING_SOLID.png", title: "Structural Detail", note: "Members · connections · panel specs" },
];

function Plans() {
  const [light, setLight] = React.useState(null);
  React.useEffect(() => {
    if (light === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLight(null);
      if (e.key === "ArrowRight") setLight((i) => (i + 1) % PLANS.length);
      if (e.key === "ArrowLeft") setLight((i) => (i - 1 + PLANS.length) % PLANS.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [light]);

  const chips = ["Stamped plot plans", "Elevations & footing details", "Load & wind-rated (2021 IBC/IRC)", "We handle permit submittal"];

  return (
    <Section id="plans" bg={NP.panel}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "flex-end", marginBottom: 48 }}>
        <Reveal>
          <Kicker>Engineered & Permit-Ready</Kicker>
          <h2 style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: "clamp(36px,4.2vw,52px)", textTransform: "uppercase",
            letterSpacing: "-0.015em", color: NP.textL, margin: "20px 0 0", lineHeight: 1.02 }}>
            We draw it up.<br />We pull the permit.
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <p style={{ fontFamily: FONT.body, fontSize: 17, lineHeight: 1.7, color: NP.textL2 }}>
            Every NorthPoint project comes with professional, engineered drawings — plot plans, elevations, and footing details built to current code. It's how we keep permitting smooth, inspections clean, and the build right the first time.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginTop: 22 }}>
            {chips.map((c) => (
              <span key={c} style={{ fontFamily: FONT.body, fontSize: 13, fontWeight: 600, color: NP.gold,
                padding: "8px 14px", borderRadius: 999, border: `1px solid rgba(200,174,118,0.35)`, background: "rgba(200,174,118,0.08)" }}>{c}</span>
            ))}
          </div>
        </Reveal>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {PLANS.map((p, i) => (
          <Reveal key={p.title} delay={i * 100}>
            <div onClick={() => setLight(i)} style={{ cursor: "zoom-in", background: "#fbf8f2", borderRadius: 6, overflow: "hidden",
              border: `1px solid ${NP.lineL}`, boxShadow: "0 24px 60px rgba(0,0,0,0.4)" }}>
              <div style={{ aspectRatio: "1900 / 1229", overflow: "hidden", borderBottom: `1px solid rgba(27,23,18,0.1)` }}>
                <img src={p.src} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 20px" }}>
                <div>
                  <div style={{ fontFamily: FONT.body, fontSize: 16.5, fontWeight: 700, color: NP.textD }}>{p.title}</div>
                  <div style={{ fontFamily: FONT.body, fontSize: 13, color: NP.textD2, marginTop: 2 }}>{p.note}</div>
                </div>
                <span style={{ fontFamily: FONT.body, fontSize: 12, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: NP.goldDeep }}>View ⤢</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {light !== null && (
        <div onClick={() => setLight(null)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(12,9,7,0.94)",
          display: "flex", alignItems: "center", justifyContent: "center", padding: 36 }}>
          <button onClick={(e) => { e.stopPropagation(); setLight((i) => (i - 1 + PLANS.length) % PLANS.length); }} style={pArrow("left")}>‹</button>
          <div onClick={(e) => e.stopPropagation()} style={{ width: "min(1280px, 92vw)", maxHeight: "88vh" }}>
            <div style={{ borderRadius: 6, overflow: "hidden", background: "#fff", boxShadow: "0 30px 90px rgba(0,0,0,0.5)" }}>
              <img src={PLANS[light].src} alt={PLANS[light].title} style={{ width: "100%", display: "block", maxHeight: "80vh", objectFit: "contain", background: "#fff" }} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
              <div style={{ fontFamily: FONT.serif, fontSize: 24, color: NP.textL }}>{PLANS[light].title}</div>
              <div style={{ fontFamily: FONT.body, fontSize: 13, color: NP.textL2 }}>{light + 1} / {PLANS.length} · sample drawing</div>
            </div>
          </div>
          <button onClick={(e) => { e.stopPropagation(); setLight((i) => (i + 1) % PLANS.length); }} style={pArrow("right")}>›</button>
          <button onClick={() => setLight(null)} style={{ position: "absolute", top: 28, right: 32, background: "none", border: "none", color: NP.textL2, fontSize: 34, cursor: "pointer", lineHeight: 1 }}>×</button>
        </div>
      )}
    </Section>
  );
}
function pArrow(side) {
  return { position: "absolute", [side]: 24, top: "50%", transform: "translateY(-50%)", width: 52, height: 52, borderRadius: 26,
    background: "rgba(243,237,227,0.08)", border: `1px solid ${NP.lineL}`, color: NP.textL, fontSize: 26, cursor: "pointer",
    display: "flex", alignItems: "center", justifyContent: "center", lineHeight: 1 };
}
window.Plans = Plans;