// scenes-hero.jsx — Cinematic time-based video sequence + smooth scroll parallax

const HERO_VIDEOS = [
  { src: 'https://videos.pexels.com/video-files/4488802/4488802-uhd_2560_1440_25fps.mp4', label: 'A modern operatory' },
  { src: 'https://videos.pexels.com/video-files/6502766/6502766-uhd_2732_1440_25fps.mp4', label: 'Examined with precision' },
  { src: 'https://videos.pexels.com/video-files/6763252/6763252-hd_1920_1080_25fps.mp4',  label: 'Instruments, ready' },
];

const SLIDE_MS = 4200;   // each video is on screen ~4.2s
const FADE_MS  = 1200;   // crossfade duration

function HeroScene() {
  const wrapRef = useRef(null);
  const p = useElementProgress(wrapRef);

  // Time-based active slide (not scroll-based) — runs in a smooth loop
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setActive((a) => (a + 1) % HERO_VIDEOS.length);
    }, SLIDE_MS);
    return () => clearInterval(id);
  }, []);

  // Smooth parallax with eased scroll lerp
  const [sp, setSp] = useState(0); // smoothed progress
  useEffect(() => {
    let raf;
    const tick = () => {
      setSp((s) => s + (p - s) * 0.12);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [p]);

  // Phase: 0 → 0.7 hero content visible; 0.7 → 1 fades out
  const exitT = clamp((sp - 0.7) / 0.3, 0, 1);

  // Parallax transforms — smooth, layered
  const bgScale   = 1 + sp * 0.10;                  // very subtle zoom on video stack
  const titleY    = -sp * 120;                       // title rises faster
  const eyebrowY  = -sp * 60;
  const subY      = -sp * 90;
  const ctaY      = -sp * 70;
  const titleOpacity = 1 - Math.pow(clamp(sp / 0.55, 0, 1), 1.5);

  return (
    <div ref={wrapRef} className="scene hero-scene" style={{ height: '260vh', background: '#000' }}>
      <div className="scene-pin">
        {/* Video stack — subtle zoom from smooth scroll */}
        <div style={{
          position: 'absolute', inset: 0,
          transform: `scale(${bgScale})`,
          transformOrigin: 'center',
          willChange: 'transform',
          zIndex: 1,
        }}>
          {HERO_VIDEOS.map((v, i) => (
            <video
              key={i}
              className="hero-video"
              src={v.src}
              autoPlay muted loop playsInline preload="auto"
              style={{
                opacity: i === active ? 1 : 0,
                transition: `opacity ${FADE_MS}ms cubic-bezier(.45,.05,.55,.95)`,
              }}
            />
          ))}
        </div>

        {/* Heavy navy overlay so text reads cleanly */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          background:
            'radial-gradient(120% 90% at 50% 30%, rgba(6,18,41,.45) 0%, rgba(6,18,41,.78) 55%, rgba(6,18,41,.92) 100%)',
        }} />

        {/* Grain */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          opacity: 0.22, mixBlendMode: 'overlay', pointerEvents: 'none',
          backgroundImage:
            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
        }} />

        {/* Hero content */}
        <div className="hero-content on-dark" style={{
          position: 'absolute', inset: 0, zIndex: 3,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '0 clamp(20px, 5vw, 24px)', textAlign: 'center',
          color: 'var(--cream)',
          opacity: titleOpacity * (1 - exitT),
          willChange: 'transform, opacity',
        }}>
          {/* Top eyebrow */}
          <div style={{ transform: `translate3d(0, ${eyebrowY}px, 0)`, willChange: 'transform' }}>
            <Reveal delay={0.05}>
              <div className="hero-eyebrow">
                <span className="line" />
                <span className="eyebrow">Patna · Est. 1998</span>
                <span className="line" />
              </div>
            </Reveal>
          </div>

          {/* Logo */}
          <Reveal delay={0.15} y={20} duration={1.4}>
            <div className="hero-logo">
              <LogoMark size={108} />
            </div>
          </Reveal>

          {/* Title */}
          <h1 className="h-display hero-title" style={{
            margin: '14px 0 6px',
            color: 'var(--cream)',
            letterSpacing: '0.06em',
            textShadow: '0 2px 60px rgba(0,0,0,.6)',
            lineHeight: 1,
            transform: `translate3d(0, ${titleY * 0.4}px, 0)`,
            willChange: 'transform',
          }}>
            <SplitReveal text="DENTAL AVENUE" stagger={0.06} baseDuration={1.2} delay={0.3} />
          </h1>

          {/* Gold divider */}
          <Reveal delay={0.95}>
            <div className="divider-leaf hero-divider">
              <span className="line" style={{ background: 'linear-gradient(90deg, transparent, var(--gold), transparent)', width: 80 }} />
              <LeafOrnament size={22} />
              <span className="line" style={{ background: 'linear-gradient(90deg, transparent, var(--gold), transparent)', width: 80 }} />
            </div>
          </Reveal>

          {/* Tagline */}
          <Reveal delay={1.1}>
            <div className="eyebrow hero-tagline">
              Advanced Dental Care
            </div>
          </Reveal>

          {/* Sub-line */}
          <div style={{ transform: `translate3d(0, ${subY * 0.5}px, 0)`, willChange: 'transform' }}>
            <Reveal delay={1.3} y={16}>
              <p className="hero-sub">
                A second-generation practice — where every smile is treated
                as a relationship, not a transaction.
              </p>
            </Reveal>
          </div>

          {/* CTAs */}
          <div style={{ transform: `translate3d(0, ${ctaY * 0.3}px, 0)`, willChange: 'transform' }}>
            <Reveal delay={1.45} y={20}>
              <div className="hero-ctas">
                <Magnetic>
                  <a href="#visit" className="btn btn-gold">Book a consultation</a>
                </Magnetic>
                <Magnetic strength={0.16}>
                  <a href="#services" className="btn btn-ghost on-dark">Our treatments</a>
                </Magnetic>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Bottom strip */}
        <div className="hero-bottom-strip" style={{
          opacity: 1 - exitT,
          transform: `translateY(${exitT * 30}px)`,
        }}>
          <div className="hero-caption">
            <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 8 }}>
              {String(active + 1).padStart(2, '0')} / {String(HERO_VIDEOS.length).padStart(2, '0')}
            </div>
            <div style={{
              fontFamily: 'var(--f-serif)',
              fontSize: 'clamp(15px, 1.4vw, 20px)',
              color: 'var(--cream)',
              transition: 'opacity .6s',
            }}>
              {HERO_VIDEOS[active]?.label}
            </div>
          </div>

          {/* Scroll cue */}
          <div className="hero-scroll-cue" style={{ opacity: clamp(1 - exitT * 2, 0, 1) }}>
            <span>Scroll</span>
            <div className="hero-scroll-line" />
          </div>

          {/* Right stat */}
          <div className="hero-stat">
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(15px, 1.6vw, 22px)', color: 'var(--gold-light)' }}>
              1 Lakh+ patients
            </div>
            <div className="eyebrow" style={{ color: 'rgba(245,239,228,.55)', marginTop: 4 }}>
              Across two generations
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-scene {}
        .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 3vw, 28px); }
        .hero-eyebrow .line { width: 36px; height: 1px; background: var(--gold); flex: 0 0 auto; }
        .hero-eyebrow .eyebrow { color: var(--gold-light); letter-spacing: 0.34em; font-size: clamp(10px, 1vw, 11px); }
        .hero-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
        .hero-logo img { width: clamp(72px, 11vw, 108px) !important; }
        .hero-title { font-size: clamp(40px, 9vw, 138px); margin: 14px 0 6px; }
        .hero-divider { margin: clamp(14px, 2vw, 20px) 0 clamp(12px, 1.6vw, 16px); }
        .hero-divider .line { width: clamp(40px, 8vw, 80px) !important; }
        .hero-tagline { font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 0.45em; color: var(--cream); opacity: .92; }
        .hero-sub {
          max-width: 620px;
          margin: clamp(24px, 3vw, 34px) auto 0;
          font-family: var(--f-serif);
          font-size: clamp(16px, 1.7vw, 22px);
          color: rgba(245,239,228,.84);
          line-height: 1.55;
          font-weight: 400;
        }
        .hero-ctas {
          display: flex; gap: 12px;
          margin-top: clamp(28px, 4vw, 42px);
          flex-wrap: wrap; justify-content: center;
        }
        @media (max-width: 600px) {
          .hero-ctas .btn { padding: 14px 22px; font-size: 11px; }
        }
        .hero-bottom-strip {
          position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
          padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 40px) clamp(20px, 3vw, 28px);
          display: flex; align-items: flex-end; justify-content: space-between;
          color: var(--cream);
          background: linear-gradient(180deg, transparent, rgba(6,18,41,.7));
          gap: 16px;
          transition: opacity .6s;
        }
        .hero-caption, .hero-stat {
          flex: 0 1 auto;
        }
        .hero-stat { text-align: right; }
        .hero-scroll-cue {
          display: flex; flex-direction: column; align-items: center; gap: 10px;
          color: rgba(245,239,228,.7);
          font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
          flex-shrink: 0;
        }
        .hero-scroll-line {
          width: 1px; height: 44px;
          background: linear-gradient(180deg, var(--gold), transparent);
          animation: scrollHint 2.4s ease-in-out infinite;
        }
        @keyframes scrollHint { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

        @media (max-width: 720px) {
          .hero-scroll-cue { display: none; }
          .hero-stat { display: none; }
          .hero-bottom-strip { justify-content: flex-start; padding-bottom: 28px; }
        }
      `}</style>
    </div>
  );
}

window.HeroScene = HeroScene;