/* ── Glass nav + full-bleed video hero ── */

function PromoBar() {
  return (
    <div data-comment-anchor="500d6a57c0-div-5-5" style={{
      background: "var(--ink)", color: "#fff", textAlign: "center",
      padding: "7px 24px", fontSize: "12px", fontWeight: "var(--weight-regular)", lineHeight: 1.4
    }}>
      Prenez votre Barflask et obtenez 5 recharges gratuites dès le lancement.&nbsp;
      <a href="#preorder" style={{ color: "var(--glacier)", fontWeight: "var(--weight-medium)", textDecoration: "underline" }}>Précommander</a>
    </div>);

}

/* Transparent nav overlaid on the video */
function SiteHeader() {
  const linkMap = {
    "Liste d'attente": "#waitlist",
    "Précommande": "#preorder",
    "Mission": "#mission",
    "Contact": "mailto:tymeo.pralas@refill-labs.com",
  };
  const links = Object.keys(linkMap);
  return (
    <header style={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 10, pointerEvents: "auto" }}>
      <div className="wrap" data-comment-anchor="83122f0a5e-div-16-7" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between", height: "52px"
      }}>
        <img src="assets/logo-wordmark-white.png" alt="Refill Labs" style={{ height: "22px" }} />
        <nav style={{ display: "flex", gap: "var(--space-5)" }} data-comment-anchor="6648859ce9-nav-24-9">
          {links.map((l) =>
          <a key={l} href={linkMap[l]} style={{
            textDecoration: "none", fontSize: "13px",
            fontWeight: "var(--weight-regular)", color: "rgba(255,255,255,.88)"
          }}>{l}</a>
          )}
        </nav>
        <div style={{ display: "flex", gap: "var(--space-4)", alignItems: "center" }}>
          <a href="#waitlist" style={{
            fontSize: "13px", fontWeight: "var(--weight-medium)", color: "var(--ink)",
            background: "rgba(255,255,255,.92)", padding: "7px 18px",
            borderRadius: "var(--radius-pill)", textDecoration: "none"
          }}>Rejoindre</a>
        </div>
      </div>
    </header>);

}

/* Full-bleed video hero — add <source src="votre-video.mp4"> for real video */
function Hero() {
  const whitePill = {
    fontFamily: "var(--font-body)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-md)",
    padding: "13px 30px", borderRadius: "var(--radius-pill)", cursor: "pointer",
    background: "#fff", color: "var(--ink)", border: "none", textDecoration: "none", display: "inline-block"
  };
  return (
    <section style={{ position: "relative", height: "76vh", minHeight: "500px", maxHeight: "780px", overflow: "hidden" }}>
      <img
        src="assets/hero-trail.jpg"
        alt="Trail runner dans les Alpes"
        data-comment-anchor="00014dc65c-image-slot-41-7"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center 30%", zIndex: 0
        }} />
      
      {/* Gradient overlay */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        background: "linear-gradient(to bottom,rgba(23,25,38,.42) 0%,rgba(23,25,38,0) 38%,rgba(23,25,38,.05) 65%,rgba(23,25,38,.52) 100%)"
      }} />
      {/* Nav transparent */}
      <SiteHeader />
      {/* Hero copy — bottom-aligned */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 2,
        display: "flex", flexDirection: "column", alignItems: "center",
        gap: "var(--space-4)", padding: "0 32px 60px", textAlign: "center"
      }} data-comment-anchor="821cea4dae-div-71-7">
        <div style={{ lineHeight: .98 }}>
          <div style={{
            fontSize: "clamp(52px,9vw,96px)", fontFamily: "var(--font-display)",
            fontWeight: "var(--weight-display)", color: "#fff",
            textShadow: "0 2px 24px rgba(23,25,38,.4)", letterSpacing: "-0.03em"
          }}>Recharger</div>
          <div style={{
            fontSize: "clamp(20px,3.2vw,38px)", fontFamily: "var(--font-display)",
            fontWeight: "var(--weight-medium)", color: "#fff",
            letterSpacing: "-0.01em", textShadow: "0 2px 18px rgba(23,25,38,.5)",
            marginTop: "10px"
          }}>simplement.</div>
        </div>
        <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", justifyContent: "center" }}>
          <a href="#waitlist" style={whitePill}>Liste d'attente</a>
          <a href="#preorder" style={whitePill} data-comment-anchor="bbbefb27a0-a-91-11">Pré-commande</a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { PromoBar, SiteHeader, Hero });