'use client'

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

export default function Hero() {
  return (
    <section className="relative min-h-[calc(100dvh-80px)] flex items-center bg-gradient-to-br from-blue-50 via-white to-blue-50">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-20">
        <motion.div
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8 }}
          className="z-10 text-center lg:text-left"
        >
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="mb-4 lg:mb-6"
          >
            <h2 className="text-lg lg:text-xl text-blue-600 font-semibold mb-2">Welcome to a World of Deaf Advocacy</h2>
            <h1 className="text-4xl lg:text-5xl font-bold mb-3 lg:mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-mcdi-maroon">
              Chris Haulmark
            </h1>
            <h3 className="text-xl lg:text-2xl text-gray-700">Transforming Lives Through Leadership</h3>
          </motion.div>
          
          <motion.p 
            className="text-lg lg:text-xl leading-relaxed text-gray-700 mb-6 lg:mb-8 max-w-lg mx-auto lg:mx-0 font-medium"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
          >
            Empowering the Deaf community through advocacy, leadership, and cultural bridge-building. With experience spanning 54 countries and leadership roles in prominent state and national Deaf organizations.
          </motion.p>
          
          <motion.div 
            className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.7 }}
          >
            <Link href="/services" className="w-full sm:w-auto">
              <motion.button
                className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-mcdi-maroon text-white px-6 lg:px-8 py-3 rounded-lg shadow-lg text-base lg:text-lg"
                whileHover={{ scale: 1.05, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1)" }}
                whileTap={{ scale: 0.95 }}
              >
                Explore Services
              </motion.button>
            </Link>
            <Link href="/biography" className="w-full sm:w-auto">
              <motion.button
                className="w-full sm:w-auto border-2 border-blue-600 text-blue-600 px-6 lg:px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors text-base lg:text-lg"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                Learn More
              </motion.button>
            </Link>
          </motion.div>
        </motion.div>

        <motion.div
          className="relative z-10 mt-8 lg:mt-0"
          initial={{ opacity: 0, x: 50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="w-full h-[300px] sm:h-[400px] lg:h-[600px] relative group">
            <motion.div
              className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent rounded-2xl"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.5 }}
            />
            <Image
              src="/images/hero-image.jpg"
              alt="Chris Haulmark standing by a Dodge Charger near a serene lake"
              fill
              className="absolute inset-0 rounded-2xl shadow-2xl object-cover grayscale hover:grayscale-0 transition-all duration-500"
              priority
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
            <motion.div 
              className="absolute bottom-0 left-0 right-0 p-4 lg:p-8 text-white opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              initial={{ y: 20 }}
              whileHover={{ y: 0 }}
            >
              <p className="text-xl lg:text-2xl font-semibold mb-2 drop-shadow-lg">Global Deaf Advocate</p>
              <p className="text-base lg:text-lg drop-shadow-lg">Vice President of KAD & NAD Region II Board Representative</p>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}