// Tatava Studio, Hero variants + cinematic video backdrop
// Loads after site-data.js. Exports to window at the bottom.

const { useRef, useEffect, useState } = React;
const TD = window.TATAVA_DATA;

/* ------------------------------------------------------------
   FadeLoopVideo, seamless manual loop with fade in/out.
   rAF monitors currentTime/duration; fades opacity over 0.5s
   at both ends; on `ended` waits 100ms, resets, replays.
   ------------------------------------------------------------ */
function FadeLoopVideo({ src, fallback, className, style }) {
  const videoRef = useRef(null);
  const vsrc = useDeferredVideoSrc(src);

  useEffect(() => {
    if (!vsrc) return undefined;
    const video = videoRef.current;
    if (!video) return;
    let raf;
    const FADE = 0.5;

    const tick = () => {
      const d = video.duration;
      if (d && !isNaN(d)) {
        const t = video.currentTime;
        let opacity = 1;
        if (t < FADE) opacity = t / FADE;else
        if (t > d - FADE) opacity = Math.max(0, (d - t) / FADE);
        video.style.opacity = opacity.toFixed(3);
      }
      raf = requestAnimationFrame(tick);
    };

    const onEnded = () => {
      video.style.opacity = "0";
      setTimeout(() => {
        video.currentTime = 0;
        const p = video.play();
        if (p && p.catch) p.catch(() => {});
      }, 100);
    };

    video.addEventListener("ended", onEnded);
    const p = video.play();
    if (p && p.catch) p.catch(() => {});
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      video.removeEventListener("ended", onEnded);
    };
  }, [vsrc]);

  return (
    <div className={"videoLoop " + (className || "")} style={style}>
      {fallback ? <img src={fallback} alt="" /> : null}
      {vsrc ?
      <video
        ref={videoRef}
        style={{ opacity: 0 }}
        src={vsrc}
        muted
        playsInline
        autoPlay
        preload="auto">
      </video> : null}
    </div>);

}

/* defer video fetch until the page has finished loading,
   keeps first paint fast and the load event unblocked */
function useDeferredVideoSrc(src) {
  const [vsrc, setVsrc] = React.useState(
    document.readyState === "complete" ? src : null
  );
  React.useEffect(() => {
    if (vsrc) return undefined;
    const arm = () => setVsrc(src);
    if (document.readyState === "complete") { arm(); return undefined; }
    window.addEventListener("load", arm);
    return () => window.removeEventListener("load", arm);
  }, [src]);
  return vsrc;
}

/* ------------------------------------------------------------
   Headline, one orange italic word per brand pattern.
   twoLine=true breaks on h.line1 / h.pre2 for cinematic hero.
   ------------------------------------------------------------ */
function Headline({ variant, className, copy, twoLine, anchor }) {
  const h = copy || TD.headlines[variant] || TD.headlines.racing;
  const props = { className: "headline " + (className || "") };
  if (anchor) props["data-comment-anchor"] = anchor;
  if (twoLine && h.line1) {
    return (
      <h1 {...props}>
        {h.line1}<br />
        {h.pre2}<span className="hl">{h.hl}</span>{h.post}
      </h1>
    );
  }
  return (
    <h1 {...props}>
      {h.pre}<span className="hl">{h.hl}</span>{h.post}
    </h1>
  );
}

function HeroCtas({ delayClass }) {
  return (
    <div className={"heroCtas " + (delayClass || "")}>
      <a className="btn btn--primary" href="Tatava Booking.html">Book a session</a>
      <a className="btn btn--outline" href={TD.whatsappHref} target="_blank" rel="noopener">Book a free 15-min call</a>
    </div>);

}

function HeroBadges({ delayClass }) {
  return (
    <div className={"heroBadges " + (delayClass || "")}>
      {TD.trustBadges.map((b) =>
      <span key={b}>{b}</span>
      )}
    </div>);

}

/* ------------------------------------------------------------
   Variant A, Cinematic: full-bleed video low in the frame,
   cream scrims top + bottom, centered serif headline.
   ------------------------------------------------------------ */
function HeroCinematic({ headline, showVideo }) {
  return (
    <section className="heroCine" data-screen-label="Hero, Cinematic">
      <div className="heroCine__videoWrap">
        {showVideo ?
        <FadeLoopVideo src={TD.videoUrl} /> :

        <img className="videoFallback" src="assets/photo-mindful-class.jpg" alt="A calm mindfulness class" />
        }
        <div className="heroCine__scrim"></div>
      </div>
      <div className="heroCine__inner" data-comment-anchor="833e7bf68d-div-117-7">
        <div className="heroCopy">
          <span className="eyebrow eyebrow--band fade-rise" data-comment-anchor="657d3ac05c-span-119-11">{TD.eyebrow}</span>
          <Headline variant={headline} className="fade-rise-1" twoLine anchor="d06a282c4a-h1-75-5" />
          <p className="lead fade-rise-2" data-comment-anchor="6d626af09c-p-121-11">{TD.subhead}</p>
          <HeroCtas delayClass="fade-rise-3" />
          <p className="heroNote fade-rise-3">Consultation By Appointment Only</p>
          <HeroBadges delayClass="fade-rise-3" />
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------
   Variant B, Editorial split: brand's two-column rhythm,
   video living inside the tilted embossed-poster frame.
   ------------------------------------------------------------ */
function HeroSplit({ headline, showVideo }) {
  return (
    <section className="heroSplit" data-screen-label="Hero, Editorial Split">
      <div className="container heroSplit__grid">
        <div className="heroCopy heroCopy--left">
          <span className="eyebrow eyebrow--band fade-rise">{TD.eyebrow}</span>
          <Headline variant={headline} className="fade-rise-1" />
          <p className="lead fade-rise-2">{TD.subhead}</p>
          <HeroCtas delayClass="fade-rise-3" />
          <p className="heroNote fade-rise-3">Consultation By Appointment Only</p>
          <HeroBadges delayClass="fade-rise-3" />
        </div>
        <div className="posterFrame fade-rise-2">
          <div className="block"></div>
          <div className="frame">
            {showVideo ?
            <FadeLoopVideo src={TD.videoUrl} fallback="assets/photo-mindful-class.jpg" /> :

            <img src="assets/photo-mindful-class.jpg" alt="A calm mindfulness class" />
            }
          </div>
          <span className="tag">Accepting new clients</span>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------
   Variant C, Poster band: centered copy on cream, then the
   video as a wide embossed-poster band beneath.
   ------------------------------------------------------------ */
function HeroPosterBand({ headline, showVideo }) {
  return (
    <section className="heroBand" data-screen-label="Hero, Poster Band">
      <div className="container">
        <div className="heroCopy">
          <span className="eyebrow eyebrow--band fade-rise">{TD.eyebrow}</span>
          <Headline variant={headline} className="fade-rise-1" />
          <p className="lead fade-rise-2">{TD.subhead}</p>
          <HeroCtas delayClass="fade-rise-3" />
          <p className="heroNote fade-rise-3">Consultation By Appointment Only</p>
        </div>
        <div className="heroBand__poster fade-rise-3">
          <div className="posterFrame posterFrame--navy">
            <div className="block"></div>
            <div className="frame">
              {showVideo ?
              <FadeLoopVideo src={TD.videoUrl} fallback="assets/photo-mindful-class.jpg" /> :

              <img src="assets/photo-mindful-class.jpg" alt="A calm mindfulness class" />
              }
            </div>
            <span className="tag">In person in Delhi · Online anywhere</span>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { FadeLoopVideo, Headline, HeroCtas, HeroBadges, HeroCinematic, HeroSplit, HeroPosterBand, useDeferredVideoSrc });