import Image from "next/image";

export function Hero() {
  return (
    <section className="relative isolate h-[817px] w-full overflow-hidden bg-[#1e1e1e]">
      {/* Background image */}
      <Image
        src="/hero-cover.png"
        alt="重工机械零件背景"
        fill
        priority
        className="object-cover"
        sizes="100vw"
      />

      {/* Dark overlay at 20% opacity */}
      <div className="absolute inset-0 bg-[#1e1e1e]/20" />

      {/* Bottom gradient mask */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />

      {/* Content */}
      <div className="relative z-10 mx-auto flex h-full max-w-[1442px] flex-col justify-center px-6 sm:px-12 lg:px-[124px]">
        <div className="max-w-4xl">
          <h1 className="text-3xl font-bold leading-tight text-white sm:text-4xl lg:text-[52px] lg:leading-[1.2]">
            稳·准·高效 鼎兴智造——重工机械配套专家
          </h1>

          <p className="mt-4 text-sm text-white/90 sm:text-base lg:text-[16px]">
            Steady · Precise · Efficient Dingxing Intelligent Manufacturing —
            Expert in Heavy Machinery Supporting Parts
          </p>

          {/* Decorative cyan line */}
          <div className="mt-6 h-[8px] w-[55px] bg-[#00d6f9]" />
        </div>
      </div>
    </section>
  );
}
