function VisitSection({ onReserve }) {
  return (
    <section id="visit" data-screen-label="05 Visit" style={{ background: "#0A0A0A", color: "#F4F2ED", padding: "120px 0 0" }}>
      {/* header */}
      <div style={{ padding: "0 32px", marginBottom: 60 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <span className="meta">CHAPTER V · VISIT</span>
          <span className="meta">GANGNAM · SEOUL · KR</span>
        </div>
        <div style={{ height: 1, background: "currentColor", opacity: 0.2 }} />

        <h2 className="display sr-fade" style={{
          fontSize: "clamp(80px, 14vw, 240px)",
          lineHeight: 0.85,
          letterSpacing: "-0.05em",
          marginTop: 40,
        }}>
          Come <span className="display-italic" style={{ fontStyle: "italic" }}>home</span><br/>
          after midnight.
        </h2>
      </div>

      {/* info grid */}
      <div data-stagger-parent style={{ padding: "0 32px", display: "grid", gridTemplateColumns: "1.3fr 1fr 1fr", gap: 32, marginBottom: 80 }}>
        {/* map */}
        <div style={{
          position: "relative",
          aspectRatio: "16/10",
          background: "#141414",
          border: "1px solid rgba(255,255,255,0.2)",
          overflow: "hidden",
        }}>
          {/* stylised map */}
          <svg width="100%" height="100%" viewBox="0 0 800 500" style={{ display: "block" }}>
            <defs>
              <pattern id="grid-map" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="800" height="500" fill="url(#grid-map)" />
            {/* streets */}
            <line x1="0" y1="250" x2="800" y2="250" stroke="rgba(255,255,255,0.25)" strokeWidth="2" />
            <line x1="400" y1="0" x2="400" y2="500" stroke="rgba(255,255,255,0.25)" strokeWidth="2" />
            <line x1="0" y1="120" x2="800" y2="120" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
            <line x1="0" y1="380" x2="800" y2="380" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
            <line x1="180" y1="0" x2="180" y2="500" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
            <line x1="620" y1="0" x2="620" y2="500" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
            {/* diagonal */}
            <line x1="80" y1="500" x2="780" y2="0" stroke="rgba(255,255,255,0.1)" strokeWidth="1" />

            {/* blocks */}
            <rect x="420" y="140" width="180" height="100" fill="rgba(255,255,255,0.04)" />
            <rect x="200" y="270" width="180" height="100" fill="rgba(255,255,255,0.04)" />

            {/* labels */}
            <text x="20" y="260" fill="rgba(255,255,255,0.45)" fontSize="10" fontFamily="'JetBrains Mono', monospace" letterSpacing="2">
              TEHERAN-RO ───────────
            </text>
            <text x="410" y="20" fill="rgba(255,255,255,0.45)" fontSize="10" fontFamily="'JetBrains Mono', monospace" letterSpacing="2">
              GANGNAM-DAERO
            </text>
            <text x="440" y="160" fill="rgba(255,255,255,0.55)" fontSize="9" fontFamily="'JetBrains Mono', monospace" letterSpacing="2">
              GANGNAM STN. (2/9/SNR)
            </text>
            <text x="220" y="290" fill="rgba(255,255,255,0.55)" fontSize="9" fontFamily="'JetBrains Mono', monospace" letterSpacing="2">
              EONJU STN. (9)
            </text>

            {/* pin */}
            <g>
              <circle cx="500" cy="300" r="80" fill="rgba(47,75,255,0.1)" />
              <circle cx="500" cy="300" r="40" fill="rgba(47,75,255,0.25)" />
              <circle cx="500" cy="300" r="8" fill="#2F4BFF" />
              <circle cx="500" cy="300" r="14" fill="none" stroke="#2F4BFF" strokeWidth="1.5">
                <animate attributeName="r" values="14;40;14" dur="2.4s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="1;0;1" dur="2.4s" repeatCount="indefinite" />
              </circle>
              <line x1="500" y1="300" x2="500" y2="240" stroke="#2F4BFF" strokeWidth="1" strokeDasharray="2 3" />
              <text x="510" y="236" fill="#F4F2ED" fontSize="11" fontFamily="'JetBrains Mono', monospace" letterSpacing="2">
                NOIR/CLUB · 37.498, 127.028
              </text>
            </g>
          </svg>

          <div style={{
            position: "absolute",
            bottom: 12,
            left: 12,
            right: 12,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
          }}>
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.16em", opacity: 0.6 }}>
              HAND—DRAWN MAP · NOT TO SCALE
            </span>
            <button className="btn" style={{ padding: "10px 14px", color: "#F4F2ED", borderColor: "#F4F2ED" }}>
              OPEN IN MAPS →
            </button>
          </div>
        </div>

        {/* address + hours */}
        <div data-stagger style={{ transitionDelay: "90ms", display: "flex", flexDirection: "column", gap: 28 }}>
          <div>
            <div className="meta" style={{ marginBottom: 10 }}>ADDRESS</div>
            <div className="kr-display" style={{ fontSize: 22, lineHeight: 1.25, marginBottom: 4 }}>
              서울특별시 강남구<br/>
              테헤란로 — B2
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.6 }}>
              TEHERAN-RO · GANGNAM-GU<br/>
              SEOUL 06132, KR
            </div>
          </div>

          <div>
            <div className="meta" style={{ marginBottom: 10 }}>HOURS</div>
            {[
              ["MON", "CLOSED"],
              ["TUE — THU", "22:00 — 04:00"],
              ["FRI — SAT", "22:00 — 06:00"],
              ["SUN", "22:00 — 03:00"],
            ].map(([d, h]) => (
              <div key={d} style={{
                display: "grid",
                gridTemplateColumns: "1fr auto",
                padding: "8px 0",
                borderBottom: "1px solid rgba(255,255,255,0.15)",
              }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em" }}>{d}</span>
                <span className="mono tnum" style={{ fontSize: 11, letterSpacing: "0.14em", color: h === "CLOSED" ? "#FF2E2E" : "inherit" }}>
                  {h}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* contact + reserve */}
        <div data-stagger style={{ transitionDelay: "180ms", display: "flex", flexDirection: "column", gap: 28 }}>
          <div>
            <div className="meta" style={{ marginBottom: 10 }}>CONTACT · RESERVATIONS</div>
            <a href="tel:+82200000000" className="display" style={{
              fontSize: 48,
              letterSpacing: "-0.03em",
              color: "inherit",
              textDecoration: "none",
              lineHeight: 0.95,
              display: "block",
              marginBottom: 4,
            }}>
              02—5151<br/>
              <span className="display-italic" style={{ fontStyle: "italic" }}>·0077</span>
            </a>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", opacity: 0.6 }}>
              CONCIERGE@NOIRCLUB.KR
            </div>
          </div>

          <div>
            <div className="meta" style={{ marginBottom: 12 }}>MEMBERSHIP</div>
            <p className="kr-sans" style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.7, marginBottom: 16 }}>
              NOIR/CLUB은 멤버십 기반으로 운영됩니다.
              첫 방문은 예약 후 호스트 추천제로 가능합니다.
            </p>
            <button onClick={onReserve} className="btn blue" style={{ width: "100%" }}>
              RESERVE A ROOM →
            </button>
          </div>
        </div>
      </div>

      {/* footer */}
      <div style={{
        borderTop: "1px solid rgba(255,255,255,0.2)",
        padding: "40px 32px 32px",
        display: "grid",
        gridTemplateColumns: "2fr 1fr 1fr 1fr",
        gap: 32,
      }}>
        <div>
          <div className="display" style={{ fontSize: 40, letterSpacing: "-0.04em", lineHeight: 0.9 }}>
            NOIR<span style={{ color: "#2F4BFF" }}>/</span><span className="display-italic" style={{ fontStyle: "italic" }}>CLUB</span>
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", opacity: 0.6, marginTop: 10 }}>
            © MMXXVI · ALL RIGHTS RESERVED
          </div>
        </div>
        <div>
          <div className="meta" style={{ marginBottom: 10 }}>INDEX</div>
          {["Rooms", "Select", "Gallery", "Visit"].map((x) => (
            <div key={x} className="sans-tight" style={{ fontSize: 13, padding: "4px 0", opacity: 0.8 }}>{x}</div>
          ))}
        </div>
        <div>
          <div className="meta" style={{ marginBottom: 10 }}>SOCIAL</div>
          {["Instagram @noirclub", "Kakao noir_club", "X @noirclub"].map((x) => (
            <div key={x} className="sans-tight" style={{ fontSize: 13, padding: "4px 0", opacity: 0.8 }}>{x}</div>
          ))}
        </div>
        <div>
          <div className="meta" style={{ marginBottom: 10 }}>LEGAL · 19+</div>
          <p className="sans-tight" style={{ fontSize: 11, lineHeight: 1.5, opacity: 0.5 }}>
            성인 인증 필요. 지정된 운영 시간 외 방문은 허용되지 않습니다. 음주운전은 범죄입니다.
          </p>
        </div>
      </div>
    </section>
  );
}

window.VisitSection = VisitSection;