import clsx from 'clsx';
import * as React from 'react';

import AnimatedLogo from '@/components/image/AnimatedLogo';
import { TextFade } from '@/components/studioWaitlist/components/TextEffects';

import EdgeToEdgeText from './components/EdgeToEdgeText';
import Footer from './components/Footer';
import HeaderBar from './components/HeaderBar';
import ScrollRevealParagraph from './components/ScrollRevealParagraph';
import VideoPlayer from './components/VideoPlayer';
import { HEADER_PADDING, PAGE_PAD_X } from './constants';

type InfoPageProps = {
  /** Hide the CTA (e.g. while the 'done' slide is showing) */
  hideWaitlistButton?: boolean;
};

export default function InfoPage({
  hideWaitlistButton = false,
}: InfoPageProps) {
  return (
    <div className='relative min-h-screen bg-black text-white'>
      <HeaderBar
        sticky
        showBackdrop
        maxWidthClass=''
        paddingClass={HEADER_PADDING}
        left={
          <div className='flex w-full items-center gap-2'>
            <AnimatedLogo className='h-[18px] w-auto flex-shrink-0' />
            <span className='text-[24px] leading-none font-bold text-white'>
              Studio
            </span>
          </div>
        }
        right={
          /* Hide when the parent tells us to */
          !hideWaitlistButton && (
            <button
              className='h-14 cursor-pointer rounded-full px-6 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90'
              style={{
                background:
                  'linear-gradient(90deg, #FB474B 0%, #F941D9 60%, #E29760 100%)',
              }}
              onClick={() =>
                document
                  .getElementById('waitlist')
                  ?.scrollIntoView({ behavior: 'smooth' })
              }
            >
              Join Waitlist
            </button>
          )
        }
      />

      {/* Main Content Wrapper */}
      <div className='flex min-h-screen flex-col'>
        {/* Main Content */}
        <main className='flex-1'>
          <div className={`${PAGE_PAD_X} space-y-28`}>
            {/* Video Section */}
            <section className='mt-24'>
              <VideoPlayer
                src='https://cdn-o.suno.com/Suno%20Studio_1080_optimized.mp4'
                className='w-full overflow-hidden'
              />
            </section>

            {/* Hero Section */}
            <section>
              <ScrollRevealParagraph
                text='Discover a whole new way to produce music – one that keeps pace with your creativity, adapts to your sound, and pushes your ideas beyond what you imagined.'
                className='flex flex-wrap text-3xl leading-[1.1] font-medium tracking-tighter md:text-5xl lg:text-[72px]'
              />
            </section>

            {/* Content Section */}
            <section className='grid grid-cols-1 items-start gap-12 lg:grid-cols-2'>
              <TextFade direction='up' staggerChildren={0.2}>
                <div>
                  <p className='text-[18px] font-medium'>
                    Unlock what&apos;s already inside.
                  </p>
                </div>
              </TextFade>
              <TextFade direction='up' staggerChildren={0.2}>
                <div className='space-y-8'>
                  <p className='text-[18px] leading-tight font-medium'>
                    Introducing Suno Studio — an audio workstation that reflects
                    your imagination. Start with a blank canvas, a single stem,
                    a voice note, or a full track. Bring in new sounds, and mix,
                    rework, and reshape your music in one intuitive space
                    designed to push your creativity further. Create stem by
                    stem, easily export to MIDI, and integrate with any DAW.
                    This is just the start.
                  </p>
                  <p className='text-[18px] leading-tight font-medium'>
                    Built for musicians, producers, and creators of all kinds,
                    it&apos;s an intuitive space to explore, refine, and push
                    your sound further — from start to finish, it&apos;s all
                    you.
                  </p>
                  <p className='text-[18px] font-medium'>Coming soon...</p>
                </div>
              </TextFade>
            </section>

            {/* Links Section */}
            <section className='relative z-10 grid grid-cols-1 gap-8 py-8 text-[18px] font-medium md:grid-cols-3'>
              <div>
                <ul className='space-y-2'>
                  <li>
                    <a
                      href='https://www.instagram.com/sunomusic/'
                      target='_blank'
                      rel='noopener noreferrer'
                      className='inline-block cursor-pointer text-left transition-opacity hover:opacity-75'
                    >
                      ↗ Instagram
                    </a>
                  </li>
                  <li>
                    <a
                      href='https://www.tiktok.com/@sunomusic'
                      target='_blank'
                      rel='noopener noreferrer'
                      className='inline-block cursor-pointer text-left transition-opacity hover:opacity-75'
                    >
                      ↗ TikTok
                    </a>
                  </li>
                  <li>
                    <a
                      href='https://twitter.com/sunomusic'
                      target='_blank'
                      rel='noopener noreferrer'
                      className='inline-block cursor-pointer text-left transition-opacity hover:opacity-75'
                    >
                      ↗ X
                    </a>
                  </li>
                  <li>
                    <a
                      href='https://discord.com/invite/suno'
                      target='_blank'
                      rel='noopener noreferrer'
                      className='inline-block cursor-pointer text-left transition-opacity hover:opacity-75'
                    >
                      ↗ Discord
                    </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>
          </div>
        </main>

        {/* Studio Section */}
        <section
          className={clsx(
            'pointer-events-none flex w-full items-center justify-center py-0',
            PAGE_PAD_X
          )}
        >
          <EdgeToEdgeText
            text='Studio'
            className='leading-[0.8] font-bold whitespace-nowrap text-white/10 select-none'
          />
        </section>

        {/* Footer */}
        <Footer
          className={clsx('w-full', PAGE_PAD_X, 'py-8')}
          textColor='rgba(255,255,255,0.5)'
        />
      </div>
    </div>
  );
}