import { motion } from 'framer-motion';
import React from 'react';
import { useInView } from 'react-intersection-observer';

import logWebUserEvent from '@/logging/logWebUserEvent';

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

interface BestAppSectionProps {
  id?: string;
  heading?: string;
  subhead?: string;
  topBadge?: string;
  downloadIos?: string;
  downloadAndroid?: string;
  iosReviews?: string;
  androidReviews?: string;
  iosRating?: string;
  androidRating?: string;
}

const BestAppSection: React.FC<BestAppSectionProps> = ({
  id,
  heading = 'The best music app',
  subhead = 'Where you can discover, create and share from anywhere because music has no boundaries.',
  topBadge,
  downloadIos,
  downloadAndroid,
  iosReviews,
  androidReviews,
  iosRating,
  androidRating,
}) => {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
  return (
    <section id={id} className='relative mt-[80px] mb-[80px] h-[900px]'>
      {/* background layer */}
      <div className='absolute inset-0 z-0 overflow-hidden'>
        <img
          className='absolute inset-0 h-full w-full object-fill'
          style={{
            mixBlendMode: 'screen',
          }}
          src={'https://cdn-o.suno.com/Aura-1-Hero-Web.jpg'}
          alt='Suno background aura'
          loading='lazy'
        />
        <div
          className='absolute inset-0'
          style={{
            backgroundImage: `
              linear-gradient(to bottom, #101012 0%, #101012 0%, transparent 10%, transparent 90%, #101012 100%),
              radial-gradient(ellipse at center, transparent 30%, rgba(16,16,18,0.3) 40%, #101012 80%)
            `,
            backgroundBlendMode: 'normal',
          }}
        />
      </div>

      {/* content */}
      <div className='relative z-10 mx-auto flex h-full max-w-3xl flex-col items-center justify-center px-4 py-16 text-center text-white'>
        <SectionViewLogger sectionName='BestAppSection' />

        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 40 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, ease: [0.4, 0, 0.2, 1] }}
        >
          <h2 className='mb-4 font-sans text-[80px] leading-[0.9] font-medium tracking-[-3.68px] text-foreground-primary md:mb-10 md:text-[140px] md:leading-[0.87]'>
            {heading}
          </h2>
          <p className='mb-10 text-[16px] leading-6 text-white/70 md:text-lg'>
            {subhead}
          </p>

          <div className='mx-auto grid max-w-2xl grid-cols-1 justify-center gap-3 sm:grid-cols-2'>
            <AppRatingCard
              platform='ios'
              rating={iosRating || '4.9'}
              reviewCount={iosReviews || '363k+ reviews'}
              topBadge={topBadge}
              downloadText={downloadIos}
              onDownloadClick={() => {
                logWebUserEvent({
                  actionName: 'HomePageiOSButtonClicked',
                });
                window.open('/ios', '_blank');
              }}
            />
            <AppRatingCard
              platform='android'
              rating={androidRating || '4.8'}
              reviewCount={androidReviews || '653k+ reviews'}
              topBadge={topBadge}
              downloadText={downloadAndroid}
              onDownloadClick={() => {
                logWebUserEvent({
                  actionName: 'HomePageAndroidButtonClicked',
                });
                window.open('/android', '_blank');
              }}
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default BestAppSection;