import Image from "next/image";
import { Search, MapPin, ArrowRight } from "lucide-react";
import { CompanyTicker } from "./CompanyTicker";
import { FadeUp } from "./animations/FadeUp";
import { StaggerContainer, StaggerItem } from "./animations/StaggerContainer";

export function Hero() {
  return (
    <section className="bg-[#f5f5f5] relative overflow-hidden flex flex-col min-h-[calc(100vh-64px)]">
      {/* Main Hero Content */}
      <div className="container mx-auto px-4 pt-2 lg:pt-0 relative flex-1 flex flex-col justify-center max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
          {/* Left Column - Text Content */}
          <div className="max-w-2xl z-10 relative pb-6">
            <StaggerContainer staggerDelay={0.15}>
              {/* Badge */}
              <StaggerItem yOffset={0} xOffset={-50}>
                <div className="inline-block bg-[#ffedd5] text-[#FF5722] font-semibold text-xs px-4 py-1.5 rounded-full mb-3 tracking-wide uppercase">
                  #1 Job Platform
                </div>
              </StaggerItem>

              {/* Headline */}
              <StaggerItem yOffset={0} xOffset={-50}>
                <h1 className="text-4xl md:text-5xl lg:text-[54px] font-bold text-black leading-[1.15] mb-4">
                  Find the Right Job <br className="hidden md:block" />
                  for Your <span className="text-[#FF5722]">Bright Future</span>
                </h1>
              </StaggerItem>

              {/* Subtitle */}
              <StaggerItem yOffset={0} xOffset={-50}>
                <p className="text-gray-500 text-lg md:text-xl mb-6 max-w-lg leading-relaxed">
                  Explore thousands of job opportunities and take the next step in your career.
                </p>
              </StaggerItem>

              {/* Search Bar */}
              <StaggerItem yOffset={0} xOffset={-50}>
            <div className="bg-white p-2 rounded-md border border-black/15 shadow-[0_15px_40px_rgba(0,0,0,0.15)] flex flex-col md:flex-row items-center justify-between gap-3 md:gap-0 max-w-3xl mb-8 relative z-20">
              {/* Keyword Input */}
              <div className="flex items-center flex-1 w-full px-4 py-2 border-b md:border-b-0 md:border-r border-gray-200">
                <Search className="text-gray-400 h-5 w-5 mr-3 flex-shrink-0" />
                <input
                  type="text"
                  placeholder="Enter Skills/Role"
                  className="w-full bg-transparent outline-none text-gray-700 placeholder-gray-400 font-medium text-sm md:text-base"
                />
              </div>

              {/* Location Input */}
              <div className="flex items-center flex-1 w-full px-4 py-2">
                <MapPin className="text-gray-400 h-5 w-5 mr-3 flex-shrink-0" />
                <input
                  type="text"
                  placeholder="Enter Location"
                  className="w-full bg-transparent outline-none text-gray-700 placeholder-gray-400 font-medium text-sm md:text-base"
                />
              </div>

              {/* Search Button */}
              <button className="bg-[#fc6123] hover:bg-[#F4511E] text-white px-8 py-2 rounded-md font-semibold flex items-center justify-center gap-2 transition-colors w-full md:w-auto flex-shrink-0">
                Search <ArrowRight className="h-4 w-4" />
              </button>
            </div>
            </StaggerItem>

            {/* Proud to Support */}
            <FadeUp delay={0.6} yOffset={0} xOffset={-50}>
              <p className="text-sm font-bold text-black mb-3">Proud to Support</p>
              <div className="flex items-center gap-4 md:gap-6 flex-wrap">
                <Image src="/images/hero-sec-certi/certi1.png" alt="Certificate 1" width={100} height={32} className="h-6 md:h-7 w-auto object-contain" />
                <Image src="/images/hero-sec-certi/certi2.png" alt="Certificate 2" width={100} height={32} className="h-6 md:h-7 w-auto object-contain" />
                <Image src="/images/hero-sec-certi/certi3.png" alt="Certificate 3" width={100} height={32} className="h-6 md:h-7 w-auto object-contain" />
                <Image src="/images/hero-sec-certi/certi4.png" alt="Certificate 4" width={100} height={32} className="h-6 md:h-7 w-auto object-contain" />
              </div>
            </FadeUp>
            </StaggerContainer>
          </div>

          {/* Right Column - Image */}
          <div className="hidden lg:flex relative lg:absolute lg:top-0 lg:bottom-0 lg:h-auto lg:w-[55vw] lg:right-[calc(50%-50vw)] justify-end z-0 pointer-events-none">
            <FadeUp delay={0.3} duration={1} yOffset={0} xOffset={50} className="w-full h-full relative">
              <Image
                src="/images/hero-img.png"
                alt="Student looking for job"
                fill
                className="object-contain object-right-bottom"
                priority
              />
            </FadeUp>
          </div>
        </div>
      </div>

      {/* Bottom Companies Strip - Full Width */}
      <div className="bg-white border-y border-gray-100 shadow-sm relative z-20 w-full mt-0">
        <div className="container mx-auto px-4 max-w-7xl">
          <FadeUp delay={0.8} yOffset={20} className="flex flex-col sm:flex-row items-center w-full">
            {/* Left Box */}
            <div className="bg-[#fff7ed] px-6 py-4 flex-shrink-0 text-center sm:text-left border-b sm:border-b-0 sm:border-r border-gray-100 w-full sm:w-auto h-full flex flex-col justify-center min-w-[200px] -mx-4 sm:mx-0">
              <div className="text-2xl md:text-3xl font-bold text-[#FF5722]">100+</div>
              <div className="text-sm md:text-base font-bold text-black mt-1">Top Companies</div>
            </div>

            {/* Infinite Logos Ticker */}
            <CompanyTicker />
          </FadeUp>
        </div>
      </div>
    </section>
  );
}