'use client';

import { motion } from 'framer-motion';
import HeroTitle from './HeroTitle';
import HeroButtons from './HeroButtons';
import { useLanguage } from '@/contexts/LanguageContext';

export default function HeroSection() {
  const { t } = useLanguage();

  // StatsSection 桌面端高度约 182px
  const statsHeight = 182;

  return (
    <section
      className="relative w-full min-h-[calc(100vh-var(--navbar-height,72px))] md:min-h-[calc(100vh-var(--navbar-height,72px)-182px)]"
      style={{ overflow: 'hidden' }}
    >
      {/* Video background */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
        style={{
          zIndex: 0,
          objectFit: 'cover',
          objectPosition: 'center center',
          minWidth: '100%',
          minHeight: '100%',
          transform: 'scale(1.3)'
        }}
      >
        <source src="https://pub-0b813d5d97b84a06a71fd3d4283fce59.r2.dev/hero-background.mp4" type="video/mp4" />
      </video>

      <div
        className="relative flex flex-col items-start justify-center min-h-[calc(100vh-var(--navbar-height,72px))] md:min-h-[calc(100vh-var(--navbar-height,72px)-182px)] px-6 py-20 md:px-[85px] md:py-16"
        style={{
          background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
          zIndex: 1
        }}
      >
        <div className="flex flex-col gap-12 md:gap-[88px] w-full max-w-[926px] 2xl:max-w-[1200px] 3xl:max-w-[1500px]">
          <div className="flex flex-col gap-5">
            <HeroTitle />
            <motion.p
              className="text-base sm:text-xl max-w-[640px] 2xl:max-w-[800px] 3xl:max-w-[1000px]"
              style={{
                color: 'rgba(255,255,255,0.65)',
                fontFamily: 'Inter, sans-serif',
                lineHeight: '1.625',
                fontWeight: 400,
                minHeight: 'calc(3 * 1.625em)',
              }}
              initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}
              whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
              viewport={{ once: true }}
              transition={{ duration: 0.9, ease: 'easeOut', delay: 0.75 }}
            >
              {t('hero.description')}
            </motion.p>
          </div>

          <HeroButtons />
        </div>
      </div>
    </section>
  );
}