// Jai Mahal Audio Tour — Welcome screen (fixed-screen, no scroll)
// Brand name = "The Palace Speaks". Background = auto-cycling carousel.

const { useState } = React;

const WELCOME_BG = [
  { src: "assets/welcome-peacock.jpg",    pos: "center 35%" },
  { src: "assets/ch1-carriage-sunset.jpg", pos: "center 60%" },
  { src: "assets/welcome-palace-wide.avif", pos: "center 50%" },
  { src: "assets/ch5-aerial.avif",        pos: "center 60%" },
  { src: "assets/welcome-palace-2.avif",  pos: "center 50%" },
];

function WelcomeScreen({ onBegin, onSelectChapter }) {
  const [picker, setPicker] = useState(false);

  return (
    <main
      data-screen-label="00 Welcome"
      style={{
        position: "relative",
        height: "100%",
        background: "var(--ink)",
        color: "white",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Background carousel */}
      <AutoCarousel images={WELCOME_BG} interval={5500} fade={1400} />

      {/* Top-to-bottom gradient */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg, rgba(13,9,6,0.65) 0%, rgba(13,9,6,0.2) 22%, rgba(13,9,6,0.35) 55%, rgba(13,9,6,0.96) 100%)",
          pointerEvents: "none",
        }}
      />

      {/* Subtle vignette */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          boxShadow: "inset 0 0 120px 20px rgba(0,0,0,0.45)",
          pointerEvents: "none",
        }}
      />

      {/* ── Top: logo crest + property line ───────────── */}
      <header
        style={{
          position: "relative",
          padding: "26px 0 0",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 8,
          flexShrink: 0,
        }}
      >
        <img
          src="assets/logo.png"
          alt="Jai Mahal Palace, Jaipur"
          style={{
            height: 76,
            width: "auto",
            filter: "brightness(0) invert(1)",
            opacity: 0.95,
          }}
        />
      </header>

      {/* ── Middle: brand name (the hero) ─────────────── */}
      <section
        style={{
          position: "relative",
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "10px 26px",
          textAlign: "center",
        }}
      >
        <h1
          style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 300,
            fontStyle: "italic",
            fontSize: 60,
            lineHeight: 0.92,
            margin: 0,
            color: "white",
            letterSpacing: "-0.01em",
            textWrap: "balance",
            textShadow: "0 4px 28px rgba(0,0,0,0.5)",
          }}
        >
          The Palace<br />
          <span style={{ color: "var(--gold-on-dark)" }}>Speaks.</span>
        </h1>

        <div style={{ marginTop: 22, marginBottom: 18 }}>
          <Rule width={50} color="var(--gold-on-dark)" />
        </div>

        <p
          style={{
            fontFamily: "var(--font-serif)",
            fontStyle: "italic",
            fontSize: 16,
            lineHeight: 1.5,
            color: "rgba(255,255,255,0.88)",
            margin: 0,
            textWrap: "balance",
            maxWidth: 320,
            textShadow: "0 1px 8px rgba(0,0,0,0.45)",
          }}
        >
          Welcome to The Jai Mahal Palace.
        </p>
        <p
          style={{
            fontFamily: "var(--font-serif)",
            fontSize: 14.5,
            lineHeight: 1.55,
            color: "rgba(255,255,255,0.78)",
            margin: "6px 0 0",
            textWrap: "pretty",
            maxWidth: 320,
          }}
        >
          Walk at your own pace. Pause where you please. Press play, and let the palace speak.
        </p>
      </section>

      {/* ── Foot: CTAs ────────────────────────────────── */}
      <section
        style={{
          position: "relative",
          padding: "0 26px 26px",
          flexShrink: 0,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <button
            onClick={() => onBegin()}
            style={{
              width: "100%",
              background: "var(--cream)",
              color: "var(--ink)",
              border: "none",
              padding: "17px 22px",
              fontFamily: "var(--font-sans)",
              fontSize: 12,
              fontWeight: 500,
              letterSpacing: 2.5,
              textTransform: "uppercase",
              cursor: "pointer",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 12,
              borderRadius: 0,
            }}
          >
            Begin the journey
            <Icon.ArrowRight size={14} />
          </button>

          <button
            onClick={() => setPicker(true)}
            style={{
              width: "100%",
              background: "transparent",
              color: "white",
              border: "1px solid rgba(255,255,255,0.55)",
              padding: "16px 22px",
              fontFamily: "var(--font-sans)",
              fontSize: 12,
              fontWeight: 500,
              letterSpacing: 2.5,
              textTransform: "uppercase",
              cursor: "pointer",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 10,
              borderRadius: 0,
            }}
          >
            Choose a chapter
          </button>
        </div>

        <div
          style={{
            marginTop: 14,
            fontFamily: "var(--font-sans)",
            fontSize: 10,
            color: "rgba(255,255,255,0.62)",
            letterSpacing: 1,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 6,
            textShadow: "0 1px 4px rgba(0,0,0,0.4)",
          }}
        >
          <Icon.Headphones size={12} />
          Best enjoyed with headphones · A self-guided audio tour
        </div>
      </section>

      {/* L-map overlay */}
      <LMap
        open={picker}
        onClose={() => setPicker(false)}
        onPick={(n) => {
          setPicker(false);
          onSelectChapter(n);
        }}
      />
    </main>
  );
}

window.WelcomeScreen = WelcomeScreen;