import brandStoryPic from '/public/images/homepage/brand-story.jpg';
import { HomepageVideo } from '@/components/homepage-video';
import { HeroSwiper } from '@/components/swiper';
import { Collections } from '@/components/our-collection';
import { ChocolateCategories } from '@/components/category-slider';
import { InstagramFeed } from '@/components/instagram';
import { Spotlight } from '@/components/spotlight';
import { AnimatedText } from '@/components/animated-text';
import { AnimatedImage } from '@/components/animated-image';

export default function HomePage() {
  return (
    <div className='overflow-x-hidden'>
      <HeroSwiper />
      {/* First Two-Column Layout */}
      <section className='flex flex-col md:flex-row items-center bg-white md:h-[90vh] overflow-clip'>
        {/* Left Column - Text with Header */}
        <div className='w-full md:w-1/2 h-[90vh] md:h-auto'>
          <div className='m-8 space-y-10'>
            <AnimatedText finishClass='delay-300'>
              <h2 className='text-s-title font-normal text-justify font-montera'>
                Brand Story
              </h2>
            </AnimatedText>
            <AnimatedText
              startClass='translate-y-8'
              finishClass='translate-y-0'
            >
              <p className='text-s-normal text-justify'>
                Mozimo&apos;s journey is a passionate pursuit of crafting
                exceptional chocolate that celebrates the origin of each cocoa
                bean.
              </p>
              <p className='text-s-normal text-justify'>
                We meticulously roast, crack, winnow, and refine beans in-house,
                using modern techniques to highlight their natural flavors.
              </p>
              <p className='text-s-normal text-justify'>
                Each chocolate is a masterpiece, capturing the essence of cocoa
                in its purest form.
              </p>
            </AnimatedText>
          </div>
        </div>
        {/* Right Column - Image */}
        <div className='w-full md:w-1/2 items-start h-[90vh] md:h-auto'>
          <AnimatedImage
            // ref={brandStoryPicRef}
            src={brandStoryPic}
            alt='Right Side Image'
            className='h-full w-full object-cover object-center'
            // {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
            // sizes='100vw'
          />
        </div>
      </section>
      {/* Second Two-Column Layout (Video and Text) */}
      <section className='flex flex-col md:flex-row items-center bg-white'>
        {/* Left Column - Video */}
        <div className='w-full md:w-1/2'>
          <div className='aspect-w-16 aspect-h-9'>
            <HomepageVideo />
          </div>
        </div>

        {/* Right Column - Text */}
        <div className='w-full md:w-1/2'>
          <div className='m-8 space-y-10'>
            <AnimatedText finishClass='delay-300'>
              <h2 className='text-s-title font-normal text-justify font-montera'>
                Discover the delicate art of our
              </h2>
              <h3 className='text-s-title font-normal text-justify font-samantha'>
                Chocolate Tempering
              </h3>
            </AnimatedText>
            <AnimatedText
              startClass='translate-y-8'
              finishClass='translate-y-0'
            >
              <p className='text-s-normal text-justify'>
                Crafted to perfection Mozimo delivers a sublime sensory
                experience with every bite. Experience the epitome of indulgence
                with our perfectly tempered chocolate: velvety smooth,
                exquisitely rich, and artfully balanced. Each bite offers a
                symphony of nuanced cocoa flavors, melting luxuriously!
              </p>
            </AnimatedText>
          </div>
        </div>
      </section>
      {/* Fourth Three-Column Layout (Collections) */}
      <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
          Our Collections
        </div>
        <Collections />
      </section>
      {/* Fifth Layout (Categories) */}
      <ChocolateCategories />
      {/* Sixth Layout (Instagram) */}
      <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
          Follow us on Instagram
        </div>
        <InstagramFeed />
      </section>
      <section className='flex flex-col items-center bg-white py-12 px-4 sm:px-6 lg:px-8'>
        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
          In the Spotlight
        </div>
        <Spotlight />
        {/* <a href='#' className='pill-button'>
          Button Text
        </a> */}
      </section>
    </div>
  );
}