// heritage/hero.jsx — Hero with Ken Burns + integrated booking

function HeroKenBurns({ theme, mobile }) {
  const shots = ['mistMountain', 'verandah', 'hillsDawn'];
  const [idx, setIdx] = React.useState(0);
  const imgRefs = React.useRef([null, null, null]);

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % shots.length), 7000);
    return () => clearInterval(id);
  }, []);

  // RAF-driven Ken Burns: outgoing slide keeps its exact mid-animation scale — no CSS snap possible.
  React.useEffect(() => {
    const DURATION = 14000;
    const FROM = 1.0;
    const TO = 1.06;
    let rafId;
    let startTs = null;

    // Reset incoming slide to scale(1) while it's still transparent.
    const el = imgRefs.current[idx];
    if (el) el.style.transform = `scale(${FROM})`;

    const frame = (ts) => {
      if (!startTs) startTs = ts;
      const progress = Math.min((ts - startTs) / DURATION, 1);
      const eased = 1 - Math.pow(1 - progress, 2);
      const target = imgRefs.current[idx];
      if (target) target.style.transform = `scale(${FROM + (TO - FROM) * eased})`;
      if (progress < 1) rafId = requestAnimationFrame(frame);
    };

    rafId = requestAnimationFrame(frame);
    return () => cancelAnimationFrame(rafId);
  }, [idx]);

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#1f1a14' }}>
      {shots.map((s, i) => (
        <div key={s} style={{
          position: 'absolute', inset: 0,
          opacity: i === idx ? 1 : 0,
          transition: 'opacity 2.4s ease-in-out',
        }}>
          <img
            ref={(el) => { imgRefs.current[i] = el; }}
            src={img(s, 2200)} loading={i === 0 ? 'eager' : 'lazy'}
            style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              transformOrigin: i % 2 ? 'center top' : 'center bottom',
            }} alt="" />
          <PhotoKey label={`hero_${i + 1}`} />
        </div>
      ))}
      {!mobile && (
        <div style={{ position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8, zIndex: 3 }}>
          {shots.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} aria-label={`slide ${i + 1}`}
              style={{ width: i === idx ? 28 : 6, height: 6, borderRadius: 3, border: 'none', background: i === idx ? theme.cream : `${theme.cream}55`, cursor: 'pointer', transition: 'width .35s, background .35s', padding: 0 }} />
          ))}
        </div>
      )}
    </div>
  );
}

function HeritageHero({ theme, mobile }) {
  const px = mobile ? 20 : 56;
  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh', background: theme.ink,
      color: theme.cream,
      paddingTop: mobile ? 90 : 120, paddingBottom: 64,
      display: 'flex', flexDirection: 'column',
    }}>
      <HeroKenBurns theme={theme} mobile={mobile} />
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${theme.ink}77 0%, ${theme.ink}22 28%, ${theme.ink}55 52%, ${theme.ink}e6 100%)`, zIndex: 2 }} />

      <div style={{ position: 'relative', zIndex: 3, padding: `0 ${px}px`, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        <div style={{ maxWidth: 1000 }}>
          <div data-reveal>
            <Caps size={11} color={theme.cream} ls={0.32} style={{ fontFamily: theme.sans, opacity: 0.85 }}>Nuwara Eliya · The Hills of Ceylon · 1,868 m</Caps>
          </div>
          <h1 data-reveal data-reveal-delay="1" style={{
            fontFamily: theme.serif, fontSize: mobile ? 'clamp(52px, 14vw, 88px)' : 'clamp(64px, 10vw, 144px)',
            lineHeight: 0.92, fontWeight: 400, color: theme.cream,
            margin: '28px 0 24px', letterSpacing: '-0.02em',
            textShadow: '0 2px 16px rgba(0,0,0,0.45)',
          }}>
            A grand hotel in <em style={{ fontStyle: 'italic', color: theme.gilt }}>tea country</em>.
          </h1>
          {!mobile && (
            <div data-reveal data-reveal-delay="2" style={{
              fontFamily: theme.serif, fontSize: 22, fontStyle: 'italic',
              color: theme.cream, opacity: 0.88, maxWidth: 540, lineHeight: 1.45,
            }}>
              Fragrant tea estates on every side. The quiet comforts of a traditional English manor, high in the hills of Ceylon.
            </div>
          )}
        </div>
      </div>

      {/* Booking — pinned to bottom of hero, overlapping the next section */}
      <div data-reveal data-reveal-delay="3" style={{
        position: 'relative', zIndex: 40,
        margin: `40px ${px}px 0`, marginBottom: -36,
      }}>
        <BookingWidget theme={theme} mobile={mobile} onSearch={() => document.querySelector('#rooms')?.scrollIntoView({ behavior: 'smooth' })} />
        <div style={{ marginTop: 14, display: 'flex', gap: 12, justifyContent: 'space-between', alignItems: 'center', color: theme.cream, opacity: 0.85, fontFamily: theme.sans, fontSize: 11, letterSpacing: '0.08em', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: mobile ? 12 : 24, flexWrap: 'wrap' }}>
            <span>✓ Best Rate Guarantee</span>
            {!mobile && <span>✓ Breakfast included</span>}
            {!mobile && <span>✓ Flexible booking up until 72 hours</span>}
          </div>
          <span style={{ opacity: 0.7 }}>↓ Scroll to explore the house</span>
        </div>
      </div>
    </section>
  );
}

window.HeritageHero = HeritageHero;