"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-[400px] max-md:py-10 overflow-hidden flex items-center justify-center">

      {/* 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">
        {/* 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>
  );
}