'use client';

import { useStatsigClient } from '@statsig/react-bindings';
import { useEffect, useMemo, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import { FAQ } from '@/app/(root)/account/AuraSubscriptions/FAQ';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
// import { ScrollPercentageDebug } from '@/components/debug/ScrollPercentageDebug';
import AnimatedLogo from '@/components/image/AnimatedLogo';
import Link from '@/components/link/Link';
import EdgeToEdgeText from '@/components/studioWaitlist/components/EdgeToEdgeText';
import Footer from '@/components/studioWaitlist/components/Footer';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { useMobileAwareViewportHeight } from '@/hooks/useDynamicViewportHeight';
import { FaqItem } from '@/state/sessionStore';

enum ImageCaptionLayout {
  ImageText = 'image-text',
  TextImage = 'text-image',
}

enum ImageCaptionVariant {
  Standard = 'standard',
  EdgeRight = 'edge-right', // Image extends to right edge on desktop
  EdgeLeft = 'edge-left', // Image extends to left edge on desktop
}

const ImageCaptionRow = ({
  className,
  imageSrc,
  imageAlt,
  imageClassName,
  captionHeader,
  captionDescription,
  captionClassName,
  layout = ImageCaptionLayout.ImageText,
  variant = ImageCaptionVariant.Standard,
  desktopGaps = 'md:gap-12 lg:gap-24 xl:gap-32 2xl:gap-[180px]',
}: {
  className?: string;
  imageSrc: string;
  imageAlt: string;
  imageClassName: string;
  captionHeader: string;
  captionDescription: string;
  captionClassName?: string;
  layout?: ImageCaptionLayout;
  variant?: ImageCaptionVariant;
  desktopGaps?: string;
}) => {
  // Mobile: Always show image first in column layout with consistent px-4 padding
  const mobileContent = (
    <div className='px-4 md:hidden'>
      <div className={twMerge('flex w-full flex-col gap-[18px] text-left')}>
        <img
          src={imageSrc}
          alt={imageAlt}
          className={twMerge('w-full rounded-[30px] md:rounded-lg')}
        />
        <p
          className={twMerge(
            'text-[16px] leading-tight font-medium text-white md:text-[24px]',
            captionClassName
          )}
        >
          {captionHeader}

          <br />
          <span className='font-medium text-white/40'>
            {captionDescription}
          </span>
        </p>
      </div>
    </div>
  );

  // Desktop: Handle different variants
  const getDesktopContent = () => {
    const textContent = (
      <p
        className={twMerge(
          'max-w-96 text-[16px] leading-tight font-medium text-white md:text-[24px]',
          captionClassName
        )}
      >
        {captionHeader}
        <br />
        <span className='font-medium text-white/40'>{captionDescription}</span>
      </p>
    );

    const imageContent = (
      <img src={imageSrc} alt={imageAlt} className={imageClassName} />
    );

    if (variant === ImageCaptionVariant.Standard) {
      // Standard grid layout with max-width container
      const isImageFirst = layout === ImageCaptionLayout.ImageText;
      return (
        <div
          className={twMerge(
            'mx-auto hidden w-full max-w-6xl md:grid md:grid-cols-2 md:items-center',
            desktopGaps
          )}
        >
          {isImageFirst ? (
            <>
              {imageContent}
              {textContent}
            </>
          ) : (
            <>
              {textContent}
              {imageContent}
            </>
          )}
        </div>
      );
    }

    if (variant === ImageCaptionVariant.EdgeRight) {
      // Text | Image with image extending to right edge
      return (
        <div className='hidden w-full items-center md:grid md:grid-cols-3'>
          <div className='flex items-center px-[16px] md:col-span-1 lg:px-[32px]'>
            {textContent}
          </div>
          <div className='col-span-1 md:col-span-2'>
            <img
              src={imageSrc}
              alt={imageAlt}
              className='w-full rounded-lg rounded-none rounded-l-lg md:rounded-l-[80px]'
            />
          </div>
        </div>
      );
    }

    if (variant === ImageCaptionVariant.EdgeLeft) {
      // Image | Text with image extending to left edge
      return (
        <div className='hidden w-full items-center md:grid md:grid-cols-3'>
          <div className='col-span-1 md:col-span-2'>
            <img
              src={imageSrc}
              alt={imageAlt}
              className='w-full rounded-lg rounded-none rounded-r-lg md:rounded-r-[80px]'
            />
          </div>
          <div className='flex items-center justify-center px-[16px] md:col-span-1 lg:px-[32px]'>
            {textContent}
          </div>
        </div>
      );
    }

    return null;
  };

  // Handle desktop padding based on variant
  const getContainerClassName = () => {
    if (variant === ImageCaptionVariant.Standard) {
      // return twMerge('px-[16px] lg:px-[32px]', className);
      return twMerge('lg:px-[32px]', className);
    }
    // Edge variants handle their own padding, mobile handled separately
    return '';
  };

  return (
    <div className={getContainerClassName()}>
      {mobileContent}
      {getDesktopContent()}
    </div>
  );
};

const STUDIO_LANDING_PAGE_CONFIG = 'studio-landing-page-config';
type SocialLink = {
  name: string;
  url: string;
};

const CreateInStudioButton = ({ isMobile }: { isMobile: boolean }) => {
  return (
    <Button
      variant={ButtonVariant.Primary}
      size={isMobile ? ButtonSize.Small : ButtonSize.Medium}
      shape={ButtonShape.Pill}
      className='flex w-fit items-center justify-center bg-white/90 disabled:opacity-40 disabled:brightness-100 md:h-12 md:px-4'
      href='/studio'
      aria-label='Create in Studio'
    >
      <span className='flex items-center text-black md:text-base'>
        Create in Studio
      </span>
    </Button>
  );
};

export default function StudioLandingPage() {
  // const [isPlaying, setIsPlaying] = useState(false);
  // const [isHoveringOnVideo, setIsHoveringOnVideo] = useState(false);
  const [scrollBlurOpacity, setScrollBlurOpacity] = useState(0);
  const [sectionOverlays, setSectionOverlays] = useState<
    Record<string, number>
  >({});
  // const videoRef = useRef<HTMLVideoElement>(null);
  const heroRef = useRef<HTMLDivElement>(null);
  const studioImagesRef = useRef<HTMLDivElement>(null);
  const learnStudioRef = useRef<HTMLDivElement>(null);
  const faqRef = useRef<HTMLDivElement>(null);
  const unlockCreativeRef = useRef<HTMLDivElement>(null);
  const socialLinksRef = useRef<HTMLDivElement>(null);
  const studioTextRef = useRef<HTMLDivElement>(null);
  const footerRef = useRef<HTMLDivElement>(null);
  const isMobile = !useBreakpointMd();

  // Dynamic viewport height that adapts to mobile browser UI changes
  const heroHeight = useMobileAwareViewportHeight(
    1.0, // Desktop: 100vh
    1.0, // Mobile: 100vh (let the hook handle dynamic viewport)
    2, // Desktop: +2px offset
    0 // Mobile: no offset
  );

  // const handlePlayVideo = () => {
  //   if (videoRef.current) {
  //     if (isPlaying) {
  //       videoRef.current.pause();
  //       setIsPlaying(false);
  //     } else {
  //       videoRef.current.play();
  //       setIsPlaying(true);
  //     }
  //   }
  // };
  const statsigClient = useStatsigClient();
  const landingPageConfig = useMemo(() => {
    const landingPageConfigJson = statsigClient.getDynamicConfig(
      STUDIO_LANDING_PAGE_CONFIG
    );
    return landingPageConfigJson.value;
  }, [statsigClient]);
  const faqInfo = landingPageConfig.faq as FaqItem[];
  const assetUrls = landingPageConfig.assets as Record<string, string>;
  const socialLinks = landingPageConfig.social_links as SocialLink[];

  const [statsigReady, setStatsigReady] = useState(false);

  // Define sections with their refs, background colors, blur settings, and fade points
  const sections = useMemo(
    () => [
      {
        ref: heroRef,
        key: 'hero',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.7,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const, // 'percentage' or 'viewport'
      },
      {
        ref: studioImagesRef,
        key: 'studioImages',
        bgColor: 'rgba(255, 255, 255, 1)',
        hasBlur: false,
        fadeStart: 0.7,
        fadeEnd: 0.9,
        fadeMode: 'viewport' as const, // Start fade when next section enters viewport
      },
      {
        ref: learnStudioRef,
        key: 'learnStudio',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: isMobile ? 0.8 : 0.65,
        fadeEnd: 0.9,
        fadeMode: 'viewport' as const,
      },
      {
        ref: faqRef,
        key: 'faq',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.8,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const,
      },
      {
        ref: unlockCreativeRef,
        key: 'unlockCreative',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.8,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const,
      },
      {
        ref: socialLinksRef,
        key: 'socialLinks',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.8,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const,
      },
      {
        ref: studioTextRef,
        key: 'studioText',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.8,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const,
      },
      {
        ref: footerRef,
        key: 'footer',
        bgColor: 'rgba(0, 0, 0, 1)',
        hasBlur: false,
        fadeStart: 0.8,
        fadeEnd: 0.9,
        fadeMode: 'percentage' as const,
      },
    ],
    [
      heroRef,
      studioImagesRef,
      learnStudioRef,
      faqRef,
      unlockCreativeRef,
      socialLinksRef,
      studioTextRef,
      footerRef,
      isMobile,
    ]
  );

  // Helper function to get next section's background color
  const getNextSectionColor = (currentSectionKey: string): string => {
    const sectionColors: Record<string, string> = {
      hero: 'rgba(0, 0, 0, 1)', // Next is studioImages (black)
      studioImages: 'rgba(255, 255, 255, 1)', // Next is learnStudio (white)
      learnStudio: 'rgba(0, 0, 0, 1)', // Next is faq (black)
      faq: 'rgba(0, 0, 0, 1)', // Next is unlockCreative (black)
      unlockCreative: 'rgba(0, 0, 0, 1)', // Next is socialLinks (black)
      socialLinks: 'rgba(0, 0, 0, 1)', // Next is studioText (black)
      studioText: 'rgba(0, 0, 0, 1)', // Next is footer (black)
    };
    return sectionColors[currentSectionKey] || 'rgba(0, 0, 0, 1)';
  };

  // Section-based overlay effect - progressively overlay sections with next section's background color
  useEffect(() => {
    if (!statsigReady || !faqInfo || !assetUrls || !socialLinks) return;

    const scrollContainer = document.querySelector(
      '.h-dvh.w-full.overflow-x-hidden'
    );
    if (!scrollContainer) return;

    const handleScroll = () => {
      const scrollTop = scrollContainer.scrollTop;
      const newOverlays: Record<string, number> = {};

      sections.forEach((section, index) => {
        if (!section.ref.current) return;

        const sectionTop = section.ref.current.offsetTop;
        const sectionHeight = section.ref.current.offsetHeight;
        const nextSection = sections[index + 1];
        const containerHeight = scrollContainer.clientHeight;

        // Calculate overlay progress for transition to next section
        if (nextSection && scrollTop > sectionTop) {
          let fadeStartPoint: number;
          let fadeEndPoint: number;

          if (section.fadeMode === 'viewport') {
            // Viewport mode: Start fade when next section enters viewport
            const nextSectionTop = nextSection.ref.current?.offsetTop || 0;

            // Start fade when next section is about to enter viewport (fadeStart as offset from viewport edge)
            fadeStartPoint =
              nextSectionTop - containerHeight * (1 - section.fadeStart);
            // End fade when next section reaches fadeEnd position in viewport
            fadeEndPoint =
              nextSectionTop - containerHeight * (1 - section.fadeEnd);
          } else {
            // Percentage mode: Based on scroll percentage within current section (original behavior)
            fadeStartPoint = sectionTop + sectionHeight * section.fadeStart;
            fadeEndPoint = sectionTop + sectionHeight * section.fadeEnd;
          }

          if (scrollTop >= fadeStartPoint) {
            const progress = Math.min(
              (scrollTop - fadeStartPoint) / (fadeEndPoint - fadeStartPoint),
              1
            );
            newOverlays[section.key] = progress;
          } else {
            newOverlays[section.key] = 0;
          }
        }

        // Special handling for hero section blur effect
        if (section.key === 'hero') {
          const heroFadeStart = sectionHeight * section.fadeStart;
          const heroFadeEnd = sectionHeight * section.fadeEnd;

          if (scrollTop >= heroFadeStart) {
            const heroProgress = Math.min(
              (scrollTop - heroFadeStart) / (heroFadeEnd - heroFadeStart),
              1
            );
            setScrollBlurOpacity(heroProgress);
          } else {
            setScrollBlurOpacity(0);
          }
        }
      });

      setSectionOverlays(newOverlays);
    };

    handleScroll();
    scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
    return () => scrollContainer.removeEventListener('scroll', handleScroll);
  }, [statsigReady, faqInfo, assetUrls, socialLinks, sections]);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (statsigClient?.client?.loadingStatus !== 'Ready') {
        setStatsigReady(true); // Force ready state after timeout
      }
    }, 5000);

    if (statsigClient?.client?.loadingStatus === 'Ready') {
      setStatsigReady(true);
      clearTimeout(timeoutId);
      return () => clearTimeout(timeoutId);
    }

    let checkInterval: NodeJS.Timeout;

    const checkStatsig = () => {
      if (statsigClient?.client?.loadingStatus === 'Ready') {
        setStatsigReady(true);
        clearTimeout(timeoutId);
        clearTimeout(checkInterval);
      } else {
        checkInterval = setTimeout(checkStatsig, 100);
      }
    };

    checkInterval = setTimeout(checkStatsig, 100);

    return () => {
      clearTimeout(timeoutId);

      clearTimeout(checkInterval);
    };
  }, [statsigClient]);

  if (!statsigReady || !faqInfo || !assetUrls || !socialLinks) {
    return (
      <div className='flex h-screen w-full scale-[0.5] items-center justify-center bg-background-primary opacity-50'>
        <div className='flex items-center gap-1'>
          {[...Array(15)].map((_, i) => {
            // Deterministic pseudo-random values based on index
            const seedDuration = (i * 75) % 1000; // 0-999
            const seedDelay = ((i * 48) % 50) / 100; // 0-0.49
            return (
              <div
                key={i}
                className='h-[20px] w-1 animate-waveform rounded-full bg-primary md:w-2'
                style={{
                  animation: `waveform ${seedDuration + 500}ms ease-in-out infinite`,
                  animationDelay: `${seedDelay}s`,
                }}
              />
            );
          })}
        </div>
      </div>
    );
  }

  return (
    <main className='flex min-h-screen w-full flex-col bg-transparent'>
      {/* Uncomment this to debug the scroll percentage / viewport fade transitions */}
      {/* <ScrollPercentageDebug sections={sections} /> */}
      {/* Hero Section (fullscreen) */}
      <section
        ref={heroRef}
        id='welcome'
        className='relative flex w-full flex-col overflow-hidden'
        style={heroHeight.style}
      >
        {/* Fullscreen background image */}
        <div className='pointer-events-none absolute inset-0 z-0 overflow-hidden'>
          <img
            src={isMobile ? assetUrls.mobile_hero : assetUrls.hero}
            alt=''
            aria-hidden
            loading='eager'
            className='absolute inset-0 h-full w-full object-cover md:object-[calc(100%+300px)_center] md:object-right'
          />
          {/* Vignette overlay for edge readability */}
          <div
            className='absolute inset-0'
            style={{
              background:
                'radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%)',
            }}
          />
        </div>
        {/* Header inside hero */}
        <header className='relative z-15 w-full px-[16px] py-6 lg:px-[32px]'>
          <div className='flex items-center justify-between'>
            <Link href='/' aria-label='Home' className='cursor-pointer'>
              <div className='flex items-center gap-2'>
                <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0' />
                <span className='text-[24px] leading-none font-bold text-white'>
                  Studio
                </span>
              </div>
            </Link>
            <nav className='flex items-center gap-3'>
              <CreateInStudioButton isMobile={isMobile} />
            </nav>
          </div>
        </header>

        {/* Bottom-left content container: positioned at bottom with mobile Safari clearance */}
        <div className='absolute bottom-20 left-0 z-5 h-1/2 w-full px-[16px] md:bottom-6 lg:px-[32px]'>
          <div className='flex h-full flex-col justify-end'>
            <div className='flex w-full max-w-[900px] flex-col gap-4 text-left md:gap-4'>
              <div className='flex flex-col gap-0'>
                <h1 className='max-w-[328px] text-4xl font-[500] text-white md:max-w-none md:text-6xl'>
                  Your complete
                </h1>
                <h1 className='max-w-[328px] text-4xl font-medium text-white md:max-w-none md:text-6xl'>
                  creative workspace
                </h1>
              </div>
              <p className='max-w-[322px] text-[16px] leading-[1.35] font-medium text-white md:max-w-[500px] md:text-[24px]'>
                Suno Studio is here. From spark to song—generate stems, layer
                sounds, edit seamlessly.
              </p>
              <CreateInStudioButton isMobile={isMobile} />
            </div>
          </div>
        </div>

        {/* Bottom gradient overlay */}
        <div className='absolute right-0 bottom-0 left-0 z-5 h-[3vh] bg-gradient-to-t from-black to-transparent'></div>

        {/* Footer */}
        <div className='absolute right-0 bottom-0 left-0 z-10 h-6'></div>

        {/* Single scroll overlay covering entire hero section */}
        <div
          className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
          style={{
            background: `rgba(0, 0, 0, ${scrollBlurOpacity})`,
          }}
        />
      </section>

      {/* Studio Images Section */}
      <section
        ref={studioImagesRef}
        className='relative w-full bg-black py-18 md:py-[180px]'
      >
        <div className='mb-8 flex flex-col px-[16px] md:mb-24 lg:px-[32px]'>
          <h2 className='text-left text-2xl leading-none font-medium text-white md:text-5xl md:leading-12'>
            Turn any musical idea into
          </h2>
          <h2 className='text-left text-2xl leading-none font-medium text-white md:text-5xl md:leading-12'>
            endless creative possibilities
          </h2>
        </div>
        <div className='grid grid-cols-1 gap-y-[40px] md:gap-y-[140px]'>
          {/* Row 1: Image | Text */}
          <ImageCaptionRow
            imageSrc={assetUrls.stems}
            imageAlt='Studio stem generation interface'
            imageClassName='rounded-lg'
            captionHeader='Create infinite stem variations'
            captionDescription='Make your music richer—instantly generate vocals, drums, synths—that flow with your existing audio'
          />

          {/* Row 2: Text | Image - Image extends to right edge */}
          <ImageCaptionRow
            imageClassName=''
            imageSrc={assetUrls.any_audio}
            imageAlt='Start with any audio'
            captionHeader='Start with any audio'
            captionDescription='Upload new samples, use your Suno library, or start from individual stems'
            layout={ImageCaptionLayout.TextImage}
            variant={ImageCaptionVariant.EdgeRight}
          />

          {/* Row 3: Image | Text - Image extends to left edge */}
          <ImageCaptionRow
            imageClassName=''
            imageSrc={assetUrls.multitrack}
            imageAlt='Studio multitrack timeline interface'
            captionHeader='Edit in a multitrack timeline'
            captionDescription='Arrange, layer, and refine with precision. Control BPM, volume, pitch, and more'
            layout={ImageCaptionLayout.ImageText}
            variant={ImageCaptionVariant.EdgeLeft}
          />

          {/* Row 4: Text | Image */}
          <ImageCaptionRow
            imageSrc={assetUrls.export}
            imageAlt='Studio export interface'
            imageClassName='rounded-lg'
            captionHeader='Export everything'
            captionDescription='Easily export stems as audio and MIDI. Continue editing in your DAW.'
            layout={ImageCaptionLayout.TextImage}
            variant={ImageCaptionVariant.Standard}
            desktopGaps='md:gap-8 lg:gap-16 xl:gap-20 2xl:gap-[130px]'
          />
        </div>

        {/* Section overlay for transition to next section */}
        {sectionOverlays.studioImages > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('studioImages').replace('1)', `${sectionOverlays.studioImages})`)}`,
            }}
          />
        )}
      </section>

      {/* Learn Studio Section */}
      <section
        ref={learnStudioRef}
        className='relative w-full bg-white pt-[70px] pb-[100px] md:pt-[113px] md:pb-[60px]'
      >
        <div className='flex flex-col gap-8 px-[16px] md:gap-8 lg:px-[32px]'>
          <h2 className='justify-start text-4xl font-medium text-black md:text-5xl md:leading-[48px]'>
            Learn the basics of Studio, then go further
          </h2>
          <div className='relative mx-auto aspect-[16/9] w-full rounded-2xl'>
            <iframe
              className='absolute inset-0 h-full w-full rounded-4xl'
              src={`${assetUrls.tutorial_video}${assetUrls.tutorial_video.includes('?') ? '&' : '?'}controls=0&rel=0&fs=0&iv_load_policy=3&playsinline=1`}
              title='YouTube video player'
              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
              referrerPolicy='strict-origin-when-cross-origin'
              allowFullScreen
            />
          </div>
        </div>

        {/* Section overlay for transition to next section */}
        {sectionOverlays.learnStudio > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('learnStudio').replace('1)', `${sectionOverlays.learnStudio})`)}`,
            }}
          />
        )}
      </section>
      <section
        ref={faqRef}
        className='relative flex w-full flex-col gap-8 bg-black px-4 py-4 md:flex-row md:px-8 md:py-8 md:pb-52'
      >
        <div className='w-full justify-start pt-4 text-base leading-normal font-medium text-white md:pt-8 md:text-2xl'>
          Frequently asked questions
        </div>
        <FAQ
          items={faqInfo || []}
          title=''
          headerClassName='bg-black border-b border-neutral-500 p-0 py-2 hover:bg-black'
          questionClassName='text-white text-base md:text-2xl font-medium leading-relaxed p-0'
          className='mt-0 w-full max-w-none gap-0 py-0'
          contentClassName='bg-black px-0 text-lg'
          subheader=''
        />

        {/* Section overlay for transition to next section */}
        {sectionOverlays.faq > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('faq').replace('1)', `${sectionOverlays.faq})`)}`,
            }}
          />
        )}
      </section>

      {/* Unlock Creative Potential Section */}
      <section
        ref={unlockCreativeRef}
        className='relative w-full bg-black px-4 py-18 md:px-8 md:py-24'
      >
        <div className='md:px-[32px]'>
          <div className='mb-6 w-full justify-start text-4xl font-medium text-stone-50 md:w-[768.57px] md:text-8xl md:leading-[92.16px]'>
            Unlock your full creative potential
            <br />
          </div>
          <CreateInStudioButton isMobile={isMobile} />
          <div className='relative mx-auto mt-[70px] aspect-[16/9] w-full rounded-2xl'>
            <iframe
              className='absolute inset-0 h-full w-full rounded-4xl'
              src={`${assetUrls.promo_video}${assetUrls.promo_video.includes('?') ? '&' : '?'}controls=0&rel=0&fs=0&iv_load_policy=3&playsinline=1`}
              title='YouTube video player'
              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
              referrerPolicy='strict-origin-when-cross-origin'
              allowFullScreen
            />
          </div>
          {/* <div
            className='relative mt-[70px]'
            onMouseEnter={() => setIsHoveringOnVideo(true)}
            onMouseLeave={() => setIsHoveringOnVideo(false)}
          >
            <video
              ref={videoRef}
              src={assetUrls.promo_video}
              muted
              loop
              playsInline
              className='w-full overflow-hidden'
              style={{ borderRadius: isMobile ? '30px' : '70.125px' }}
            />
            {(!isPlaying || isHoveringOnVideo) && (
              <div className='absolute inset-0 flex items-center justify-center'>
                <button
                  onClick={handlePlayVideo}
                  className='flex h-16 w-16 items-center justify-center rounded-full bg-white/90 shadow-lg transition-all hover:scale-110 hover:bg-white'
                >
                  {isPlaying ? (
                    <svg
                      className='h-8 w-8 text-black'
                      fill='currentColor'
                      viewBox='0 0 24 24'
                    >
                      <path d='M6 4h4v16H6zM14 4h4v16h-4z' />
                    </svg>
                  ) : (
                    <svg
                      className='ml-1 h-8 w-8 text-black'
                      fill='currentColor'
                      viewBox='0 0 24 24'
                    >
                      <path d='M8 5v14l11-7z' />
                    </svg>
                  )}
                </button>
              </div>
            )}
          </div> */}
        </div>

        {/* Section overlay for transition to next section */}
        {sectionOverlays.unlockCreative > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('unlockCreative').replace('1)', `${sectionOverlays.unlockCreative})`)}`,
            }}
          />
        )}
      </section>

      {/* Social Links */}
      <section
        ref={socialLinksRef}
        className='relative z-10 grid w-full grid-cols-2 gap-8 bg-black px-[16px] py-8 text-[18px] font-medium text-white md:grid-cols-3 lg:px-[32px]'
      >
        <div>
          <ul className='space-y-2'>
            {socialLinks.map((link) => (
              <li key={link.name}>
                <a
                  href={link.url}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='inline-block cursor-pointer text-left transition-opacity hover:opacity-75'
                >
                  ↗ {link.name}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className='flex items-end'>
          <a
            href='https://suno.com/'
            target='_blank'
            rel='noopener noreferrer'
            className='inline-block text-left transition-opacity hover:opacity-75'
          >
            → suno.com
          </a>
        </div>

        {/* Section overlay for transition to next section */}
        {sectionOverlays.socialLinks > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('socialLinks').replace('1)', `${sectionOverlays.socialLinks})`)}`,
            }}
          />
        )}
      </section>

      {/* Large Studio Text */}
      <section
        ref={studioTextRef}
        className='pointer-events-none relative flex w-full items-center justify-center bg-black px-[16px] pt-12 lg:px-[32px]'
      >
        <EdgeToEdgeText
          text='Studio'
          className='leading-[0.8] font-bold whitespace-nowrap text-white/10 select-none'
          minFontSize='1em'
        />

        {/* Section overlay for transition to next section */}
        {sectionOverlays.studioText > 0 && (
          <div
            className='pointer-events-none absolute inset-0 z-50 transition-all duration-200 ease-out'
            style={{
              background: `${getNextSectionColor('studioText').replace('1)', `${sectionOverlays.studioText})`)}`,
            }}
          />
        )}
      </section>

      {/* Footer */}
      <section ref={footerRef} className='relative w-full bg-black py-8'>
        <Footer
          textColor='rgba(255, 255, 255, 0.5)'
          className='w-full px-[16px] lg:px-[32px]'
        />
      </section>
    </main>
  );
}