"use client";

import { motion } from "framer-motion";
import Image from "next/image";

export default function HeroSection() {
  return (
    <section
      dir="ltr"
      className="relative w-full md:h-[300px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-center"
    >
      <Image
        src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
        alt="SpetsTexnika"
        width={800}
        height={400}
        className="object-contain rounded-3xl"
      />


      {/* Asosiy kontent */}
      {/* <div className="relative z-20 max-w-6xl mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
        <div className="absolute inset-0 z-10">
          <Image
            src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
            alt="SpetsTexnika"
            fill
            className="object-cover opacity-30"
            priority
          />
        </div>

        Chap tomondagi matn
        <motion.div
          className="space-y-6 max-w-xl"
          initial={{ opacity: 0, x: -60 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <h1 className="text-2xl lg:text-4xl font-extrabold leading-tight">
            Ishonchli <span className="text-yellow-400">SpesTexnika</span> —
            sizning loyihangiz uchun eng yaxshi tanlov!
          </h1>

          <p className="text-lg text-gray-600">
            Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish
            uskunalarini qulay narxda taqdim etamiz.
          </p>
        </motion.div>

        O‘ng tomondagi texnika rasmi
        <motion.div
          className="hidden md:block"
          initial={{ opacity: 0, x: 80 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
        >
          <Image
            src="/2.jpg" // texnika rasmi (public/truck.png)
            alt="SpetsTexnika yuk mashinasi"
            width={420}
            height={300}
            className="drop-shadow-2xl rounded-xl"
          />
        </motion.div>
      </div> */}

      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
      {/* <motion.div
        className="absolute bottom-0 left-0 w-full h-[100px]"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1.2 }}
      /> */}
    </section>
  );
}