'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import Image from 'next/image';

export default function Hero() {
  return (
    <section id="home" className="pt-16 md:pt-20 min-h-screen flex items-center bg-gradient-to-br from-orange-50 via-orange-50 to-orange-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="text-center lg:text-left">
            <motion.h1
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
              className="text-4xl md:text-6xl lg:text-7xl font-bold text-slate-800 mb-6 leading-tight"
            >
              Multilingual Family Space
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
              className="text-xl md:text-2xl lg:text-3xl text-slate-600 mb-8 font-light"
            >
              Guiding bilingual families and language learners on their multilingual journey
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
            >
              <Link
                href="#contact"
                className="inline-block bg-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-orange-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
              >
                Contact Now
              </Link>
            </motion.div>
          </div>
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
            className="relative h-64 md:h-96 lg:h-[500px] rounded-2xl overflow-hidden shadow-2xl"
          >
            <Image
              src="https://kagi.com/proxy/familys-circle-of-love.jpg?c=N7Pi3QNEaSL6_svD8glSC__wDVyV2V3zvCInmdfWCWKG-8Z-O9nEpHpluEteRgw0QoYCXXKIdy6hZg8Xfdp19tYAlt-dh2gMkJKZiY8dnDIjuZuYj6-QliCKHu5uJamh4tIksNx6ozWuccjRjCnOzyjYSoJf_uF4FtTBLvOFJjRYpeUUDKVWjmrJT1Pbv8A5qcv87GQINLuysB5dqMdkPg%3D%3D"
              alt="Multilingual family"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
              priority
              unoptimized
            />
          </motion.div>
        </div>
      </div>
    </section>
  );
}