"use client";

import { useState, useEffect, useRef } from "react";
import agricultureImg from "../../public/assets/business-units/agricultural/agricultureImg01.webp";

export default function AgricultureAmbition() {
  // Tractor position in px
  const [truckX, setTruckX] = useState(-100);

  const sectionRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleWheel = (event: WheelEvent) => {
      if (!sectionRef.current) return;

      const section = sectionRef.current;
      const rect = section.getBoundingClientRect();

      // Only work when section is visible on screen
      const isVisible =
        rect.top < window.innerHeight && rect.bottom > 0;

      if (!isVisible) return;

      // One wheel movement = 10px
      const step = 10;

      setTruckX((currentX) => {
        if (event.deltaY > 0) {
          // Scroll down → move right
          return currentX + step;
        } else {
          // Scroll up → move left
          return currentX - step;
        }
      });
    };

    window.addEventListener("wheel", handleWheel, {
      passive: true,
    });

    return () => {
      window.removeEventListener("wheel", handleWheel);
    };
  }, []);

  return (
    <section
      ref={sectionRef}
      className="relative min-h-[650px] md:min-h-[700px] overflow-hidden bg-cover bg-center"
      style={{
        backgroundImage: `url(${agricultureImg.src})`,
      }}
    >
      {/* Tractor */}
      <div className="absolute inset-0 z-0 flex items-end justify-center overflow-hidden pointer-events-none">
        <img
          src="https://nayonacademy.com/html/agrizen/assets/img/home-3/jip-img.png"
          alt="Agricultural tractor representing modern farming innovation"
          className="
            absolute
            -bottom-11
            left-[500px]
            w-[300px]
            sm:w-[400px]
            md:w-[500px]
            lg:w-[600px]
            max-w-none
            object-contain
          "
          style={{
            transform: `translateX(calc(-70% + ${truckX}px))`,
            transition: "transform 0.15s linear",
            willChange: "transform",
          }}
        />
      </div>

      {/* Overlay */}
      <div className="absolute inset-0 z-10 bg-black/50" />

      {/* Content */}
      <div className="relative z-20 flex min-h-[650px] md:min-h-[700px] items-center justify-center px-5 py-16 sm:px-8 md:px-10">
        <div className="mx-auto flex w-full max-w-4xl items-center justify-center">
          <div className="w-full text-center text-white">
            <p className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-lime-400 sm:text-sm">
              Our Ambition
            </p>

            <h2 className="mb-6 text-3xl font-extrabold leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
              Empowering the Farmer.
              <br />
              Strengthening the Nation.
            </h2>

            <div className="mx-auto max-w-3xl">
              <p className="mb-4 text-sm leading-7 text-white/95 sm:text-base md:text-lg">
                Bangladesh agriculture faces a defining challenge: producing
                more from limited land while responding to labour constraints,
                climate pressure, soil health, food-quality expectations and
                changing consumer demand.
              </p>

              <p className="mb-4 text-sm leading-7 text-white/95 sm:text-base md:text-lg">
                SQ Agriculture sees these challenges as opportunities for
                innovation.
              </p>

              <p className="mb-6 text-sm leading-7 text-white/95 sm:text-base md:text-lg">
                Our ambition is to build one of Bangladesh's most trusted and
                integrated agricultural businesses—connecting technology,
                inputs, knowledge, service and markets around the farmer.
              </p>
            </div>

            <ul className="mx-auto mb-8 max-w-3xl space-y-3 text-left text-sm leading-6 text-white/95 sm:text-base md:text-lg">
              <li className="flex items-start justify-center gap-3">
                <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-white" />
                <span>
                  When farmers become more productive, rural communities become
                  stronger.
                </span>
              </li>

              <li className="flex items-start justify-center gap-3">
                <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-white" />
                <span>
                  When agriculture becomes more efficient, food security
                  improves.
                </span>
              </li>

              <li className="flex items-start justify-center gap-3">
                <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-white" />
                <span>
                  When Bangladesh creates greater value from what it grows, the
                  entire economy benefits.
                </span>
              </li>
            </ul>

            <p className="text-base font-bold italic text-lime-400 sm:text-lg md:text-xl">
              Empowering Farmers. Advancing Agriculture. Enriching Lives.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}