// heroes.jsx - two hero directions, toggled via Tweaks. Both lead into the same
// site. A: "The letter" - editorial, asymmetric, the phone floating in air.
// B: "Cinematic" - full-bleed couple photo, the app composited over it.
(function () {
  const { KissMark } = window.BisouxDesignSystem_144cac;
  const Ic = window.BxIcon;
  const e = React.createElement;

  // headline split into per-word spans in a flex row so word-gaps survive every
  // renderer; each word animates independently for the staggered rise.
  function RiseHeadline({ text, style, className }) {
    const words = text.split(" ");
    return (
      <h1 className={"display " + (className || "")}
        style={{ display: "flex", flexWrap: "wrap", columnGap: "0.26em", rowGap: 0, ...style }}>
        {words.map((w, i) => (
          <span key={i} className="reveal" data-delay={Math.min(i, 5)} style={{ display: "inline-block" }}>{w}</span>
        ))}
      </h1>
    );
  }

  // ---- Direction A : The letter ------------------------------------------
  function HeroA({ Screen }) {
    const { BxPhoneFrame, BxAppHome, BxWaitlist, BxBisouTap } = window;
    const PhoneScreen = Screen || BxAppHome;
    return (
      <section className="section" style={{ paddingTop: 132, paddingBottom: 96, overflow: "hidden" }} data-tilt-area>
        <div className="wrap hero-grid">
          {/* left - the letter */}
          <div style={{ maxWidth: 560 }}>
            <p className="eyebrow reveal r-left" style={{ marginBottom: 26 }}>Bisoux · for two</p>
            <RiseHeadline text="Space for two of us." style={{ fontSize: "clamp(46px, 6.6vw, 86px)", marginBottom: 22 }} />
            <p className="emotive reveal r-left" data-delay="2" style={{ fontSize: "clamp(20px, 2.4vw, 27px)", color: "var(--accent)", margin: "0 0 20px" }}>
              A private world - never a feed.
            </p>
            <p className="lede reveal" data-delay="3" style={{ marginBottom: 34 }}>
              Bisoux is the quiet app for two. One gentle reason to open it each day:
              a bisou, a thank-you, your two days side by side.
            </p>
            <div className="reveal" data-delay="4">
              <BxWaitlist />
              <p style={{ fontSize: 13.5, color: "var(--text-secondary)", marginTop: 16 }}>
                Early access, in pairs. No feed, no noise, ever.
              </p>
            </div>
          </div>

          {/* right - the phone in air */}
          <div style={{ position: "relative", display: "flex", justifyContent: "center", minHeight: 560 }}>
            {/* soft halo */}
            <div data-parallax="0.03" style={{ position: "absolute", width: 420, height: 420, borderRadius: 999, background: "var(--accent-soft)", filter: "blur(10px)", top: "50%", left: "50%", marginTop: -210, marginLeft: -210 }}></div>
            {/* interactive bisou - the signature gesture, clickable */}
            <div className="reveal r-scale" data-delay="3" data-parallax="-0.1" style={{ position: "absolute", top: 24, left: "2%", zIndex: 4 }}>
              <BxBisouTap size={94} idleKiss="red" hint="tap to send a bisou" />
            </div>
            <div className="float-kiss reveal" data-delay="4" data-parallax="0.12" style={{ bottom: 60, right: "6%", opacity: 1 }}>
              <KissMark tone="ink" size={30} />
            </div>
            <div className="reveal r-blur" data-delay="2" data-scroll-rise="50" style={{ position: "relative", zIndex: 2 }}>
              <BxPhoneFrame data-tilt="7"><PhoneScreen /></BxPhoneFrame>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ---- Direction B : Cinematic -------------------------------------------
  function HeroB({ Screen }) {
    const { BxPhoneFrame, BxAppHome, BxWaitlist, BxBisouTap } = window;
    const PhoneScreen = Screen || BxAppHome;
    return (
      <section className="section" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", overflow: "hidden", paddingTop: 110, paddingBottom: 70 }}>
        {/* full-bleed couple photo (user fills) */}
        <image-slot
          id="hero-photo"
          shape="rect"
          fit="cover"
          src="site/assets/photos/hero.png"
          placeholder="Drop a warm couple photo"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 0, zIndex: 0, background: "#2a211d" }}
        ></image-slot>
        {/* warm scrim so type stays legible over any photo */}
        <div style={{ position: "absolute", inset: 0, zIndex: 1, background:
          "linear-gradient(180deg, rgba(19,17,16,0.45) 0%, rgba(19,17,16,0.30) 38%, rgba(19,17,16,0.66) 100%)" }}></div>
        {/* until a photo lands, a warm placeholder tone shows through the slot itself */}

        <div className="wrap hero-grid" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ color: "#F4EFE5", maxWidth: 600 }}>
            <p className="eyebrow reveal" style={{ marginBottom: 24, color: "#E9C9C4" }}>Bisoux · for two</p>
            <RiseHeadline text="Space for two of us." style={{ fontSize: "clamp(48px, 7vw, 92px)", marginBottom: 22, color: "#F4EFE5" }} />
            <p className="lede reveal" data-delay="3" style={{ marginBottom: 34, color: "rgba(244,239,229,0.86)" }}>
              A private world for two - never a social feed. One quiet reason to open
              it each day, and a way to feel close, even apart.
            </p>
            <div className="reveal" data-delay="4">
              <BxWaitlist light />
              <p style={{ fontSize: 13.5, color: "rgba(244,239,229,0.7)", marginTop: 16 }}>
                Early access, in pairs. No feed, no noise, ever.
              </p>
            </div>
          </div>

          <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
            {/* interactive bisou - the signature gesture, clickable */}
            <div className="reveal r-scale" data-delay="3" data-parallax="-0.1" style={{ position: "absolute", top: -6, left: "4%", zIndex: 4 }}>
              <BxBisouTap size={92} idleKiss="red" hint="tap to send a bisou" />
            </div>
            <div className="reveal r-blur" data-delay="2" data-parallax="-0.05" style={{ position: "relative", zIndex: 2 }}>
              <BxPhoneFrame><PhoneScreen /></BxPhoneFrame>
            </div>
          </div>
        </div>

        {/* scroll cue */}
        <div className="reveal" data-delay="5" style={{ position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)", zIndex: 3, color: "rgba(244,239,229,0.7)", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          <span>Scroll</span>
          <Ic.arrowDown size={18} />
        </div>
      </section>
    );
  }

  Object.assign(window, { BxHeroA: HeroA, BxHeroB: HeroB });
})();