// Shared components: Nav, Footer, ImagePlaceholder, VideoPlaceholder
// Exported to window for use in other scripts

const NAV_LINKS = [
  { label: "Games", page: "games" },
];

function Nav({ currentPage, navigate }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? "rgba(8,8,14,0.92)" : "transparent",
      backdropFilter: scrolled ? "blur(18px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(255,255,255,0.06)" : "none",
      transition: "all 0.3s ease",
      padding: "0 clamp(1.5rem, 5vw, 4rem)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      height: "68px",
    }}>
      <button onClick={() => navigate("home")} style={{
        background: "none", border: "none", cursor: "pointer",
        display: "flex", alignItems: "center", gap: "10px",
      }}>
        <div style={{
          width: 32, height: 32,
          background: "oklch(65% 0.22 285)",
          clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
        }}></div>
        <span style={{
          fontFamily: "'Syne', sans-serif", fontWeight: 800,
          fontSize: "1.2rem", color: "#fff", letterSpacing: "0.04em",
        }}>HIDDEN<span style={{ color: "oklch(65% 0.22 285)" }}>·</span>LORE</span>
      </button>

      {/* Desktop Nav */}
      <div style={{ display: "flex", gap: "2rem", alignItems: "center" }} className="desktop-nav">
        {NAV_LINKS.map(l => (
          <button key={l.page} onClick={() => navigate(l.page)} style={{
            background: "none", border: "none", cursor: "pointer",
            fontFamily: "'DM Sans', sans-serif", fontSize: "0.875rem",
            fontWeight: currentPage === l.page ? 600 : 400,
            color: currentPage === l.page ? "oklch(65% 0.22 285)" : "rgba(255,255,255,0.65)",
            letterSpacing: "0.02em", padding: "4px 0",
            borderBottom: currentPage === l.page ? "1px solid oklch(65% 0.22 285)" : "1px solid transparent",
            transition: "all 0.2s",
          }}>{l.label}</button>
        ))}
      </div>

      {/* Mobile hamburger */}
      <button onClick={() => setMenuOpen(!menuOpen)} className="hamburger" style={{
        display: "none", background: "none", border: "none", cursor: "pointer",
        color: "#fff", fontSize: "1.4rem", padding: "4px",
      }}>☰</button>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{
          position: "fixed", top: 68, left: 0, right: 0,
          background: "rgba(8,8,14,0.97)", backdropFilter: "blur(18px)",
          display: "flex", flexDirection: "column", padding: "1.5rem 2rem 2rem",
          gap: "0.25rem", borderBottom: "1px solid rgba(255,255,255,0.08)",
        }}>
          {NAV_LINKS.map(l => (
            <button key={l.page} onClick={() => { navigate(l.page); setMenuOpen(false); }} style={{
              background: "none", border: "none", cursor: "pointer", textAlign: "left",
              fontFamily: "'DM Sans', sans-serif", fontSize: "1.1rem", fontWeight: 500,
              color: currentPage === l.page ? "oklch(65% 0.22 285)" : "rgba(255,255,255,0.8)",
              padding: "0.75rem 0",
              borderBottom: "1px solid rgba(255,255,255,0.06)",
            }}>{l.label}</button>
          ))}
        </div>
      )}
    </nav>
  );
}

function Footer({ navigate }) {
  return (
    <footer style={{
      background: "oklch(8% 0.01 260)",
      borderTop: "1px solid rgba(255,255,255,0.07)",
      padding: "3rem clamp(1.5rem,5vw,4rem) 2rem",
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "2rem", justifyContent: "space-between", marginBottom: "2.5rem" }}>
          <div>
            <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: "1.1rem", color: "#fff", marginBottom: "0.5rem" }}>
              HIDDEN<span style={{ color: "oklch(65% 0.22 285)" }}>·</span>LORE
            </div>
            <p style={{ color: "rgba(255,255,255,0.4)", fontSize: "0.85rem", maxWidth: 240, lineHeight: 1.6 }}>
              Creating worlds and experiences for gamers
            </p>
          </div>
          <div style={{ display: "flex", gap: "3rem", flexWrap: "wrap" }}>
            <div>
              <div style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: "1rem" }}>Studio</div>
              {[["home","Home"],["games","Games"],["contact","Contact"]].map(([p,l]) => (
                <button key={p} onClick={() => navigate(p)} style={{ display: "block", background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,0.55)", fontSize: "0.875rem", padding: "0.25rem 0", fontFamily: "'DM Sans', sans-serif" }}>{l}</button>
              ))}
            </div>
            <div>
              <div style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.7rem", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: "1rem" }}>Legal</div>
              {[["privacy","Privacy Policy"],["terms","Terms of Use"]].map(([p,l]) => (
                <button key={p} onClick={() => navigate(p)} style={{ display: "block", background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,0.55)", fontSize: "0.875rem", padding: "0.25rem 0", fontFamily: "'DM Sans', sans-serif" }}>{l}</button>
              ))}
            </div>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.07)", paddingTop: "1.5rem", display: "flex", flexWrap: "wrap", gap: "1rem", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ color: "rgba(255,255,255,0.25)", fontSize: "0.8rem" }}>© {new Date().getFullYear()} HiddenLore Studio. All rights reserved.</span>
          <span style={{ color: "rgba(255,255,255,0.25)", fontSize: "0.8rem" }}>
            <a href="mailto:support@hidden-lore.com" style={{ color: "oklch(65% 0.22 285)", textDecoration: "none" }}>support@hidden-lore.com</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function ImagePlaceholder({ label, aspectRatio = "16/9", style = {} }) {
  return (
    <div style={{
      aspectRatio, background: "oklch(14% 0.015 260)",
      border: "1px solid rgba(255,255,255,0.08)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: "0.75rem", borderRadius: 8, overflow: "hidden",
      ...style,
    }}>
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
        <rect x="4" y="8" width="28" height="20" rx="2" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5"/>
        <circle cx="13" cy="16" r="3" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5"/>
        <path d="M4 22l8-6 6 5 5-4 9 7" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5" strokeLinejoin="round"/>
      </svg>
      <span style={{ color: "rgba(255,255,255,0.2)", fontSize: "0.75rem", fontFamily: "monospace", textAlign: "center", padding: "0 1rem" }}>{label}</span>
    </div>
  );
}

function VideoPlaceholder({ label = "Gameplay Trailer" }) {
  return (
    <div style={{
      aspectRatio: "16/9", background: "oklch(11% 0.015 260)",
      border: "1px solid rgba(255,255,255,0.08)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: "1rem", borderRadius: 12, overflow: "hidden", position: "relative",
    }}>
      <div style={{
        width: 64, height: 64, borderRadius: "50%",
        background: "oklch(65% 0.22 285)", opacity: 0.9,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
          <polygon points="9,7 19,12 9,17" />
        </svg>
      </div>
      <span style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.8rem", fontFamily: "monospace" }}>[ {label} — YouTube/Vimeo embed ]</span>
    </div>
  );
}

function PlatformBadge({ platform }) {
  const badges = {
    android: { label: "Google Play", color: "#01875F" },
    ios: { label: "App Store", color: "#0A84FF" },
  };
  const b = badges[platform];
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: "8px",
      padding: "8px 16px", borderRadius: 8,
      background: `${b.color}18`, border: `1px solid ${b.color}40`,
    }}>
      {platform === "android" && (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={b.color}>
          <path d="M17.523 15.341a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-9.546 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zM5.83 8.063l-1.5-2.6a.5.5 0 0 1 .866-.5l1.52 2.633A9.027 9.027 0 0 1 12 6.5c1.543 0 2.994.386 4.284 1.066l1.52-2.633a.5.5 0 1 1 .866.5l-1.5 2.6A8.972 8.972 0 0 1 21 15.5H3a8.972 8.972 0 0 1 2.83-7.437z"/>
        </svg>
      )}
      {platform === "ios" && (
        <svg width="18" height="18" viewBox="0 0 24 24" fill={b.color}>
          <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
        </svg>
      )}
      <span style={{ color: b.color, fontFamily: "'DM Sans', sans-serif", fontSize: "0.85rem", fontWeight: 600 }}>{b.label}</span>
    </div>
  );
}

Object.assign(window, { Nav, Footer, ImagePlaceholder, VideoPlaceholder, PlatformBadge });