"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Text from "../lib_components/text";

export default function HeroSection() {
  return (
    <section
      dir="ltr"
      className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
    >
      {/* <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="absolute inset-0 -z-10 mx-auto w-full h-full">
        <Image
          src="/2.jpg" 
          alt="SpetsTexnika"
          fill
          className="object-cover"
          priority
        />
      </div> */}

      <div className="relative z-20 max-w-7xl w-full 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-3 max-w-xl backdrop-blur-3xl bg-[#ffffff4a] rounded-xl py-6 px-4"
          initial={{ opacity: 0, x: -60 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
            <Text txt="hero_title"/>
          </div>

          <div className="text-xl font-medium text-secondary">
            <Text txt="hero_desc"/>
          </div>
        </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>
  );
}