// Hero component
// Full-viewport video background with multi-layer overlay
// Text Clip Reveal via GSAP — fires after preloader exits (heroReady prop)
// Content bottom-left aligned, padding 120px 10vw 9vh 7vw

function Hero({ data, heroReady }) {
  const eyebrowRef    = React.useRef(null);
  const line1Ref      = React.useRef(null);
  const line2Ref      = React.useRef(null);
  const subtitleRef   = React.useRef(null);
  const ruleRef       = React.useRef(null);
  const ctaWrapRef    = React.useRef(null);
  const scrollRef     = React.useRef(null);
  const animatedRef   = React.useRef(false);

  React.useEffect(() => {
    if (!heroReady || animatedRef.current) return;
    if (typeof gsap === 'undefined') return;
    animatedRef.current = true;

    const tl = gsap.timeline();

    // Eyebrow fades in + slight rise
    tl.fromTo(
      eyebrowRef.current,
      { opacity: 0, y: 8 },
      { opacity: 1, y: 0, duration: 0.7, ease: 'power2.out' },
      0.0
    );

    // Line 1 — clip rise from translateY(110%) inside overflow:hidden parent
    tl.to(
      line1Ref.current,
      { y: '0%', duration: 1.0, ease: 'power3.out' },
      0.12
    );

    // Line 2 — clip rise
    tl.to(
      line2Ref.current,
      { y: '0%', duration: 1.0, ease: 'power3.out' },
      0.28
    );

    // Subtitle — clip rise
    tl.to(
      subtitleRef.current,
      { y: '0%', duration: 0.9, ease: 'power3.out' },
      0.44
    );

    // Divider rule — scale in
    tl.to(
      ruleRef.current,
      { opacity: 1, scaleX: 1, duration: 0.6, ease: 'power3.out' },
      0.55
    );

    // CTA wrap — fade + rise
    tl.to(
      ctaWrapRef.current,
      { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' },
      0.60
    );

    // Scroll hint — delayed fade
    tl.to(
      scrollRef.current,
      { opacity: 1, duration: 1.0, ease: 'power2.out' },
      1.1
    );
  }, [heroReady]);

  const hero = data ? data.hero : null;
  const videoSrc   = hero ? hero.video   : '';
  const eyebrow    = hero ? hero.eyebrow : 'Grand Baie · Mauritius';
  const line1      = hero ? hero.line1   : 'Dining with the ocean';
  const line2      = hero ? hero.line2   : 'at your table';
  const subtitle   = hero ? hero.subtitle: 'Fresh seafood · Sunset views · Right on the waterfront';
  const ctaLabel   = hero ? hero.cta.label : 'View Menu';
  const ctaHref    = hero ? hero.cta.href   : '#menu';

  const [ctaHovered, setCtaHovered] = React.useState(false);

  return (
    <section
      style={{
        position: 'relative',
        width: '100%',
        height: '100vh',
        minHeight: '560px',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'flex-end',
      }}
    >
      {/* Background video */}
      <video
        src={videoSrc}
        autoPlay
        muted
        loop
        playsInline
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />

      {/* Multi-layer overlay — bottom dark band + diagonal left tint */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: `
            linear-gradient(
              to top,
              rgba(0,0,0,0.82) 0%,
              rgba(0,0,0,0.50) 35%,
              rgba(0,0,0,0.08) 65%,
              rgba(0,0,0,0.00) 75%
            ),
            linear-gradient(
              108deg,
              rgba(0,0,0,0.45) 0%,
              rgba(0,0,0,0.00) 50%
            )
          `,
        }}
      />

      {/* Subtle teal radial glow at bottom-left */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: 'radial-gradient(ellipse 80% 60% at 15% 85%, rgba(46,143,166,0.12) 0%, transparent 60%)',
          pointerEvents: 'none',
        }}
      />

      {/* Hero content — bottom-left */}
      <div
        style={{
          position: 'relative',
          zIndex: 2,
          width: '100%',
          padding: '120px 10vw 9vh 7vw',
          display: 'flex',
          flexDirection: 'column',
          gap: '1.25rem',
          maxWidth: '960px',
        }}
      >
        {/* Eyebrow */}
        <p
          ref={eyebrowRef}
          style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: '0.68rem',
            fontWeight: 500,
            letterSpacing: '0.24em',
            textTransform: 'uppercase',
            color: 'rgba(100,200,220,0.85)',
            opacity: 0,
            transform: 'translateY(8px)',
          }}
        >
          {eyebrow}
        </p>

        {/* Headline */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {/* Line 1 wrap — overflow:hidden clips the rising text */}
          <div
            style={{
              overflow: 'hidden',
              paddingTop: '0.25em',
              paddingBottom: '0.18em',
            }}
          >
            <h1
              ref={line1Ref}
              style={{
                fontFamily: "'Playfair Display', Georgia, serif",
                fontWeight: 700,
                fontStyle: 'normal',
                fontSize: 'clamp(2.2rem, 4.2vw, 5.6rem)',
                color: '#ffffff',
                lineHeight: 1.05,
                letterSpacing: '-0.02em',
                transform: 'translateY(110%)',
                whiteSpace: 'nowrap',
                margin: 0,
              }}
            >
              {line1}
            </h1>
          </div>

          {/* Line 2 wrap */}
          <div
            style={{
              overflow: 'hidden',
              paddingTop: '0.25em',
              paddingBottom: '0.18em',
            }}
          >
            <p
              ref={line2Ref}
              style={{
                fontFamily: "'Playfair Display', Georgia, serif",
                fontWeight: 400,
                fontStyle: 'italic',
                fontSize: 'clamp(3.0rem, 5.6vw, 7.4rem)',
                color: 'rgba(255,255,255,0.88)',
                lineHeight: 1.0,
                letterSpacing: '-0.02em',
                transform: 'translateY(110%)',
                margin: 0,
              }}
            >
              {line2}
            </p>
          </div>
        </div>

        {/* Subtitle */}
        <div
          style={{
            overflow: 'hidden',
            paddingTop: '0.15em',
            paddingBottom: '0.15em',
          }}
        >
          <p
            ref={subtitleRef}
            style={{
              fontFamily: "'Inter', sans-serif",
              fontSize: 'clamp(0.82rem, 1.3vw, 1.0rem)',
              fontWeight: 300,
              color: 'rgba(255,255,255,0.68)',
              letterSpacing: '0.06em',
              transform: 'translateY(110%)',
              lineHeight: 1.6,
              margin: 0,
            }}
          >
            {subtitle}
          </p>
        </div>

        {/* Divider rule */}
        <div
          ref={ruleRef}
          style={{
            width: '48px',
            height: '1px',
            background: 'rgba(46,143,166,0.6)',
            opacity: 0,
            transform: 'scaleX(0)',
            transformOrigin: 'left',
          }}
        />

        {/* CTA */}
        <div
          ref={ctaWrapRef}
          style={{
            opacity: 0,
            transform: 'translateY(14px)',
            display: 'flex',
            alignItems: 'center',
            gap: '1.5rem',
          }}
        >
          <a
            href={ctaHref}
            onMouseEnter={() => setCtaHovered(true)}
            onMouseLeave={() => setCtaHovered(false)}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.7rem',
              fontFamily: "'Inter', sans-serif",
              fontSize: '0.75rem',
              fontWeight: 500,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              textDecoration: 'none',
              color: '#ffffff',
              background: ctaHovered ? '#E75A7C' : '#2E8FA6',
              padding: '1.05rem 2.4rem',
              borderRadius: '3px',
              boxShadow: ctaHovered
                ? '0 8px 28px rgba(231,90,124,0.40), 0 2px 6px rgba(0,0,0,0.25)'
                : '0 4px 18px rgba(46,143,166,0.35), 0 1px 4px rgba(0,0,0,0.25)',
              transform: ctaHovered ? 'translateY(-3px)' : 'translateY(0)',
              transition: 'background 0.3s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease',
            }}
          >
            {ctaLabel}
            <span
              style={{
                transition: 'transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)',
                transform: ctaHovered ? 'translateX(5px)' : 'translateX(0)',
              }}
            >
              &#8594;
            </span>
          </a>

          <a
            ref={scrollRef}
            href="#"
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.5rem',
              fontFamily: "'Inter', sans-serif",
              fontSize: '0.68rem',
              fontWeight: 400,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.45)',
              textDecoration: 'none',
              opacity: 0,
            }}
          >
            <span
              style={{
                width: '28px',
                height: '1px',
                background: 'rgba(255,255,255,0.35)',
                display: 'block',
              }}
            />
            Discover
          </a>
        </div>
      </div>
    </section>
  );
}