// Jai Mahal Audio Tour — Closing screen (fixed, with quiet motion)

const { useState } = React;

function ClosingScreen({ onHome }) {
  const T = window.TOUR;
  const links = [
    { label: "Dining",     desc: "Cinnamon · Giardino · Marble Arch · Marigold Bar",
      href: "https://www.tajhotels.com/en-in/hotels/jai-mahal-palace-jaipur/restaurants" },
    { label: "Wellness",   desc: "The J Wellness Circle · Ayurveda & Yoga",
      href: "https://www.tajhotels.com/en-in/hotels/jai-mahal-palace-jaipur/j-wellness-circle" },
    { label: "Experiences", desc: "Heritage walks · craft & culinary trails",
      href: "https://www.tajhotels.com/en-in/hotels/jai-mahal-palace-jaipur/experiences" },
  ];

  return (
    <main
      data-screen-label="06 Closing"
      style={{
        position: "relative",
        height: "100%",
        background: "var(--ink)",
        color: "white",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      {/* Background carousel */}
      <AutoCarousel
        images={[
          { src: "assets/closing-hero.jpg",     pos: "center 35%" },
          { src: "assets/welcome-palace-2.avif", pos: "center 50%" },
          { src: "assets/ch5-pool.avif",         pos: "center 50%" },
        ]}
        interval={6000}
        fade={1400}
      />

      {/* Overlay */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(180deg, rgba(13,9,6,0.55) 0%, rgba(13,9,6,0.25) 28%, rgba(13,9,6,0.55) 60%, rgba(13,9,6,0.96) 100%)",
          pointerEvents: "none",
        }}
      />

      {/* Top — back to home */}
      <header
        style={{
          position: "relative",
          padding: "16px 18px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexShrink: 0,
        }}
      >
        <button
          onClick={onHome}
          style={{
            background: "rgba(0,0,0,0.25)",
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.18)",
            color: "white",
            cursor: "pointer",
            padding: "8px 14px",
            display: "flex",
            alignItems: "center",
            gap: 8,
            fontFamily: "var(--font-sans)",
            fontSize: 10.5,
            letterSpacing: 2,
            textTransform: "uppercase",
          }}
        >
          <Icon.Home size={14} />
          Home
        </button>
        <BrandCrest size={28} opacity={0.95} />
        <div style={{ width: 72 }} />
      </header>

      {/* Center — message */}
      <section
        style={{
          flex: 1,
          position: "relative",
          padding: "0 26px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 10.5,
            letterSpacing: 3.5,
            color: "var(--gold-on-dark)",
            textTransform: "uppercase",
            marginBottom: 14,
          }}
        >
          ✦ &nbsp; The tour concludes &nbsp; ✦
        </div>
        <h1
          style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 300,
            fontStyle: "italic",
            fontSize: 38,
            lineHeight: 1.05,
            margin: "0 0 18px",
            color: "white",
            textShadow: "0 2px 18px rgba(0,0,0,0.4)",
            textWrap: "balance",
          }}
        >
          Thank you<br />for walking with us.
        </h1>

        <Rule width={48} color="var(--gold-on-dark)" />

        <div style={{ marginTop: 22 }}>
          {T.closingLines.map((line, i) => (
            <p
              key={i}
              style={{
                fontFamily: "var(--font-serif)",
                fontStyle: "italic",
                fontSize: 15.5,
                lineHeight: 1.55,
                color: "rgba(255,255,255,0.88)",
                margin: "0 0 6px",
                textWrap: "balance",
                maxWidth: 320,
                marginLeft: "auto",
                marginRight: "auto",
              }}
            >
              {line}
            </p>
          ))}
        </div>
      </section>

      {/* Foot — explore links */}
      <section
        style={{
          position: "relative",
          padding: "0 22px 22px",
          flexShrink: 0,
        }}
      >
        <div
          style={{
            textAlign: "center",
            fontFamily: "var(--font-sans)",
            fontSize: 9.5,
            letterSpacing: 2.5,
            color: "var(--gold-on-dark)",
            textTransform: "uppercase",
            marginBottom: 14,
            opacity: 0.85,
          }}
        >
          Continue exploring
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
          {links.map((l, i) => (
            <a
              key={i}
              href={l.href}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                padding: "14px 8px",
                background: "rgba(255,255,255,0.06)",
                border: "1px solid rgba(255,255,255,0.18)",
                textDecoration: "none",
                color: "white",
                gap: 4,
                minHeight: 72,
              }}
            >
              <div
                style={{
                  fontFamily: "var(--font-serif)",
                  fontStyle: "italic",
                  fontSize: 18,
                  lineHeight: 1.05,
                  color: "var(--gold-on-dark)",
                  textAlign: "center",
                }}
              >
                {l.label}
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 4,
                  fontFamily: "var(--font-sans)",
                  fontSize: 8.5,
                  letterSpacing: 1.5,
                  textTransform: "uppercase",
                  color: "rgba(255,255,255,0.65)",
                }}
              >
                Visit <Icon.External size={9} />
              </div>
            </a>
          ))}
        </div>

        <div
          style={{
            marginTop: 18,
            fontFamily: "var(--font-sans)",
            fontSize: 9.5,
            letterSpacing: 2.5,
            textTransform: "uppercase",
            color: "rgba(255,255,255,0.5)",
            textAlign: "center",
          }}
        >
          Jai Mahal Palace · Jaipur · since 1745
        </div>
      </section>
    </main>
  );
}

window.ClosingScreen = ClosingScreen;