'use client';

import { MapPin } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect } from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { useMediaController } from '@/shared/media/hooks/use-media-controller';
import { AppStoreButtons } from '@/shared/components/app-store-buttons';
import { Button } from '@/shared/shadcn-ui/button';

export const HeroSection = () => {
  const { t } = useTextController();
  const { m } = useMediaController();

  useEffect(() => {
    const iframe = document.getElementById('xtraseats-iframe');

    iframe?.addEventListener('load', () => {
      window.addEventListener('message', function (event) {
        // Optional: validate event.origin === "https://app.realpromo.io"
        if (iframe && event.data.iframeHeight) {
          if (iframe) {
            iframe.style.height = event.data.iframeHeight + 10 + 'px';
          }
        }
      });
    });
  }, []);

  return (
    <section className='relative'>
      <div className='relative h-[550px] w-full overflow-hidden bg-black sm:h-[500px] xl:h-[650px]'>
        <div
          style={{
            width: '100%',
            height: '50%',
            position: 'absolute',
            // top: -60,
            // right: 20,
          }}
          className='sm:!-top-16 sm:-right-40 sm:!h-[70vh] sm:!w-[100vh] md:!-top-10 md:!-right-30 xl:!top-0 xl:!right-0'
        >
          <Image
            src={m('home.hero-section.banner') || '/oriyo_bg.jpeg'}
            alt='Oriyo Station'
            fill
            className='object-cover sm:scale-110 md:scale-120 xl:scale-140'
            priority
          />
        </div>

        <div className='absolute inset-0 flex items-end bg-gradient-to-r from-black/70 to-black/30 px-2 pb-12 sm:items-center sm:pb-0'>
          <div className='container mx-auto'>
            <div className='max-w-lg space-y-4 text-white'>
              <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
                <h1 className='text-5xl font-bold tracking-tight md:text-6xl'>
                  {t('home.hero.title')}
                </h1>
              </div>
              <p className='text-gray-200 sm:text-lg'>
                {t('home.hero.description')}
              </p>
              <div className='mt-6 flex gap-2 sm:flex-row sm:gap-4'>
                <Link href='#stations'>
                  <Button className='bg-red-600 hover:bg-red-700'>
                    {t('common.buttons.findStation')}{' '}
                    <MapPin className='ml-2 h-4 w-4' />
                  </Button>
                </Link>
                <Link href='about'>
                  <Button variant='outline' className='animate-pulse'>
                    {t('common.buttons.learnMore')}
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};