import Image from "next/image";
import React from "react";
import { FadeUp } from "./animations/FadeUp";

export function EmployerBanner() {
  return (
    <section className="bg-gradient-to-t from-[#ffe8de] to-white overflow-hidden pt-8 lg:pt-0">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="flex flex-col lg:flex-row items-end">
          
          {/* Left: Image */}
          <FadeUp delay={0.1} xOffset={-30} yOffset={0} className="lg:w-1/2 w-full flex justify-center lg:justify-start">
            <Image 
              src="/images/home-employer.png" 
              alt="Employers" 
              width={400} 
              height={400} 
              className="w-[65%] md:w-[50%] lg:w-[65%] max-w-[380px] h-auto object-contain object-bottom -mb-1 drop-shadow-xl translate-x-[60px]"
            />
          </FadeUp>

          {/* Right: Content */}
          <FadeUp delay={0.2} xOffset={30} yOffset={0} className="lg:w-1/2 w-full flex flex-col items-center lg:items-start text-center lg:text-left pb-6 pt-4 lg:py-10 lg:pl-8 z-10">
            <div className="bg-white/90 px-3 py-1 rounded text-[#FF5722] text-[10px] font-bold tracking-wider uppercase mb-2 shadow-sm border border-white">
              Jobvumi For Employer
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3 leading-tight">
              Hire top talent, faster
            </h2>
            
            <p className="text-gray-600 text-sm md:text-base mb-4 max-w-md leading-relaxed">
              Post jobs, connect with verified candidates, and build your dream team.
            </p>
            
            <button className="bg-[#309e33] hover:bg-[#298c2c] text-white px-15 py-2.5 rounded-lg font-semibold text-sm md:text-base transition-all shadow-md hover:shadow-lg cursor-pointer">
              Post Job
            </button>
          </FadeUp>

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