import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import HeroText from '@/components/title/HeroText';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { AndroidIcon, AppleIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { ORANGE_AURA_URL_WEB } from '@/utils/constants';
import { staticAssetUrl } from '@/utils/staticAssetUrl';

import { SectionViewLogger } from '../HomePageClient';
import PlayStoreIcon from '../components/PlayStoreIcon';

const MakeMusicEverywhereSection: React.FC = () => {
  const isMobile = !useBreakpointMd();

  return (
    <section className='relative pb-[75px] md:pb-0'>
      <div className='absolute inset-0 z-0 h-full w-full'>
        {/* video compressed from 1.2mb to 659kb */}
        <video
          autoPlay
          muted
          loop
          playsInline
          className='absolute inset-0 h-full w-full object-cover object-top'
          style={{
            mixBlendMode: 'screen',
          }}
          src={ORANGE_AURA_URL_WEB}
          preload='none'
        />
        <div
          className='absolute inset-0'
          style={{
            background: 'linear-gradient(#101012 0%, transparent 20%) ',
            backgroundBlendMode: 'normal',
          }}
        />
      </div>
      <div className='relative z-10'>
        <div className='mx-auto max-w-[1000px] text-center'>
          <div className='flex flex-col items-center justify-center md:flex-row'>
            <div className='flex-1 text-center md:text-left'>
              <SectionViewLogger sectionName='MakeMusicWhereverYouAre' />
              <HeroText
                text='Make music wherever you are'
                subtitle='Discover, create, and share from anywhere—music has no boundaries at Suno. '
                subtitleClasses='md:max-w-[276px] max-w-[330px] md:text-[18px] text-[16px] leading-6 mx-auto md:mx-0 text-center md:text-left'
                titleClasses='md:max-w-[367px] max-w-[276px] mx-auto md:mx-0 text-center md:text-left'
              />
              <div className='mt-[40px] hidden md:block'>
                <Button
                  variant={ButtonVariant.DarkPrimary}
                  size={ButtonSize.Large}
                  shape={ButtonShape.Pill}
                  icon={<PlayStoreIcon className='h-5 w-5' />}
                  iconClassName='w-[20px] h-[20px]'
                  href='/android'
                  className='px-[22px]'
                  onClick={() => {
                    logWebUserEvent({
                      actionName: 'HomePageAndroidButtonClicked',
                    });
                  }}
                >
                  Download on Android
                </Button>
              </div>
              <div className='mt-[18px] hidden md:block'>
                <Button
                  variant={ButtonVariant.DarkPrimary}
                  size={ButtonSize.Large}
                  shape={ButtonShape.Pill}
                  icon={<AppleIcon height={20} width={20} />}
                  iconClassName='w-[20px] h-[20px]'
                  href='/ios'
                  onClick={() => {
                    logWebUserEvent({
                      actionName: 'HomePageiOSButtonClicked',
                    });
                  }}
                  className='px-[22px]'
                >
                  Download on iOS
                </Button>
              </div>
            </div>
            <div className='mt-[20px] flex-1 md:mt-0'>
              {/* TODO: reduce size of these pngs, mobile is ~150k, desktop is ~400kb */}
              <img
                src={
                  isMobile
                    ? staticAssetUrl('hero/phone-mockup-mobile.png')
                    : staticAssetUrl('hero/phone-mockup.png')
                }
                alt='Create from anywhere'
                className='h-full w-full object-cover'
                loading='lazy'
              />
            </div>
          </div>
        </div>

        <div className='mt-[18px] text-center md:hidden'>
          <Button
            variant={ButtonVariant.DarkPrimary}
            size={ButtonSize.Large}
            shape={ButtonShape.Pill}
            icon={<AndroidIcon height={20} width={20} />}
            iconClassName='w-[20px] h-[20px]'
            href='/android'
            className='px-[22px]'
            onClick={() => {
              logWebUserEvent({
                actionName: 'HomePageAndroidButtonClicked',
              });
            }}
          >
            Download on Android
          </Button>
        </div>
        <div className='mt-[30px] text-center md:hidden'>
          <Button
            variant={ButtonVariant.DarkPrimary}
            size={ButtonSize.Large}
            shape={ButtonShape.Pill}
            icon={<AppleIcon height={20} width={20} />}
            iconClassName='w-[20px] h-[20px]'
            href='/ios'
            className='px-[22px]'
            onClick={() => {
              logWebUserEvent({
                actionName: 'HomePageiOSButtonClicked',
              });
            }}
          >
            Download on iOS
          </Button>
        </div>
      </div>
    </section>
  );
};

export default MakeMusicEverywhereSection;