// Jai Mahal Audio Tour — Choose-a-chapter overlay
// The five chapters are "doorways" (cusped arches, echoing the palace's
// colonnades) that guests can enter in any order — no numbers, no fixed route,
// no separate list. Each arch carries the full chapter name.

const { useState, useEffect } = React;

function LMap({ open, onClose, onPick }) {
  const [hover, setHover] = useState(null);

  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  if (!open) return null;

  const T = window.TOUR;
  const chapters = T.chapters;

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 60,
        background: "var(--cream)",
        display: "flex",
        flexDirection: "column",
        animation: "sheetUp .4s cubic-bezier(.2,.7,.2,1)",
      }}
    >
      {/* Header */}
      <div
        style={{
          padding: "14px 18px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          borderBottom: "1px solid var(--border)",
          flexShrink: 0,
        }}
      >
        <button
          onClick={onClose}
          aria-label="Back"
          style={{
            background: "none",
            border: "none",
            cursor: "pointer",
            color: "var(--ink-soft)",
            display: "flex",
            alignItems: "center",
            gap: 6,
            padding: 6,
            margin: -6,
            fontFamily: "var(--font-sans)",
            fontSize: 11,
            letterSpacing: 1.5,
            textTransform: "uppercase",
          }}
        >
          <Icon.ArrowLeft size={14} />
          Back
        </button>
        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 10,
            letterSpacing: 3,
            color: "var(--gold-dark)",
            textTransform: "uppercase",
          }}
        >
          Choose a chapter
        </div>
        <div style={{ width: 56 }} />
      </div>

      {/* Body */}
      <div style={{ flex: 1, overflowY: "auto", padding: "22px 16px 30px" }}>
        <p
          style={{
            textAlign: "center",
            fontFamily: "var(--font-serif)",
            fontStyle: "italic",
            fontSize: 16,
            lineHeight: 1.5,
            color: "var(--ink-soft)",
            margin: "0 auto 22px",
            maxWidth: 300,
          }}
        >
          Enter through any doorway — the chapters unfold in whatever order you please.
        </p>

        {/* Arched doorways — always two per row */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 14,
            maxWidth: 400,
            margin: "0 auto",
          }}
        >
          {chapters.map((c, idx) => {
            const isHover = hover === c.id;
            const mins = Math.round((c.durSec?.en || c.durSec || 0) / 60);
            // Odd final tile spans both columns, centred at one-column width.
            const isLoneLast = idx === chapters.length - 1 && chapters.length % 2 === 1;
            return (
              <button
                key={c.id}
                onClick={() => onPick(c.id)}
                onMouseEnter={() => setHover(c.id)}
                onMouseLeave={() => setHover(null)}
                aria-label={`Chapter: ${c.title}`}
                style={{
                  position: "relative",
                  gridColumn: isLoneLast ? "1 / -1" : "auto",
                  justifySelf: isLoneLast ? "center" : "stretch",
                  width: isLoneLast ? "calc(50% - 7px)" : "auto",
                  minWidth: 0,
                  minHeight: 172,
                  padding: "30px 12px 18px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 8,
                  cursor: "pointer",
                  textAlign: "center",
                  // Cusped-dome arch top, gently rounded foot.
                  borderRadius: "46% 46% 14px 14px / 34% 34% 14px 14px",
                  border: `1px solid var(--gold-dark)`,
                  background: isHover ? "var(--gold-dark)" : "var(--cream)",
                  color: isHover ? "white" : "var(--ink)",
                  boxShadow: isHover
                    ? "0 12px 28px rgba(168,138,78,0.32)"
                    : "0 2px 12px rgba(34,23,16,0.07)",
                  transform: isHover ? "translateY(-2px)" : "none",
                  transition: "background .2s, color .2s, box-shadow .2s, transform .2s",
                }}
              >
                {/* Finial / keystone at the apex */}
                <span
                  style={{
                    position: "absolute",
                    top: 11,
                    left: "50%",
                    transform: "translateX(-50%)",
                    color: isHover ? "var(--gold-on-dark)" : "var(--gold-dark)",
                    lineHeight: 0,
                    transition: "color .2s",
                  }}
                >
                  <Icon.Diamond size={9} />
                </span>

                <span
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontStyle: "italic",
                    fontSize: 17,
                    lineHeight: 1.18,
                    textWrap: "balance",
                  }}
                >
                  {c.title}
                </span>

                <span
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 8.5,
                    letterSpacing: 2,
                    textTransform: "uppercase",
                    color: isHover ? "rgba(255,255,255,0.82)" : "var(--gold-dark)",
                    transition: "color .2s",
                  }}
                >
                  {mins} min listen
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.LMap = LMap;