"use client";

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

export default function HeaderAbout() {
  return (
    <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="flex flex-col items-center gap-6 mb-24"
      >
        <h2 className="text-4xl font-bold mb-1">
          Mengenal Lebih Dekat Dealer Resmi{" "}
          <span className="text-[#1F6779]">Jaecoo</span>
        </h2>
        <p className="text-lg">
          Komitmen kami adalah memberikan layanan terbaik dan pengalaman premium
          di setiap kunjungan Anda.
        </p>
        <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[500px] overflow-hidden">
          <Image
            src="/journey-2.png"
            alt="about-header"
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 640px"
            priority
          />
        </div>
      </motion.div>
      <div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 my-10">
        <motion.div
          className="relative w-full lg:w-[536px] h-[300px] sm:h-[400px] lg:h-[576px] overflow-hidden"
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
          viewport={{ once: true }}
        >
          <Image
            src="/mas-group.png"
            alt="Dealer Jaecoo"
            fill
            className="object-cover object-center"
            sizes="(max-width: 768px) 100vw, 536px"
          />
        </motion.div>
        <motion.div
          className="w-full lg:w-8/12 space-y-10 "
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
          viewport={{ once: true }}
        >
          <h2 className="text-2xl sm:text-3xl font-bold text-black">
            <span className="text-[#1F6779]">Mas </span>Group
          </h2>

          <div className="flex flex-col gap-8 mt-5">
            <p className="text-black leading-relaxed text-xl">
               MAS Group began its journey as a vehicle rental service provider,
              supporting Chevron Group’s oil and gas exploration vendors in Riau
              Province. In 2002, with the entry of Ford Motor Company into the
              Indonesian market, we were appointed as an authorized Ford dealer
              for the Riau region.
            </p>
            <p className="text-black leading-relaxed text-xl">
              Thanks to our team’s extensive experience and the strength of our
              product offerings, we successfully secured large fleet contracts
              and were consistently recognized by Ford Motor Indonesia as one of
              its top-performing dealers over several consecutive years.
            </p>
            <p className="text-black leading-relaxed text-xl">
              Building on this success, we expanded our automotive portfolio to
              include Mercedes-Benz trucks dealership operations and broadened
              our car rental services to meet the increasing demand from sectors
              such as coal mining, oil and gas, palm oil plantations, and
              logistics.
            </p>
            <p className="text-black leading-relaxed text-xl">
              Today, we are proud to be a major EV dealer in Indonesia,
              representing several leading brands: Chery & Tiggo ,Great Wall
              Motors (Tank, Haval, Ora), MG, Omoda & Jaecoo and Lepas.
            </p>
          </div>
        </motion.div>
      </div>
      <div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 mt-24">
        <motion.div
          className="w-full lg:w-8/12 space-y-6 "
          initial={{ opacity: 0, x: -40 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
          viewport={{ once: true }}
        >
          <h2 className="text-2xl sm:text-4xl font-bold text-black">
            Mengenal Lebih Dekat Dealer Resmi{" "}
            <span className="text-[#1F6779]">Jaecoo</span>
          </h2>

          <div>
            <p className="text-gray-600 leading-relaxed text-xl">
              Dealer resmi Jaecoo sejak 2025, berlokasi di Kelapa Gading. Kami
              melayani penjualan, servis, serta test drive dengan fasilitas
              showroom modern dan teknisi bersertifikat.
            </p>
          </div>

          <div className="text-gray-700 text-xl space-y-2">
            <p>
              <strong>Alamat:</strong> Jaecoo 1S Kelapa Gading, Jl. Boulevard
              Raya Blok LA 6 No. 34-35, Kelapa Gading, Jakarta Utara 14240
            </p>
            <p>
              <strong>Telepon:</strong> 021-12345678
            </p>
            <p>
              <strong>Email:</strong> info@dealerjaecoo.id
            </p>
          </div>
        </motion.div>

        <motion.div
          className="relative w-full lg:w-[536px] h-[300px] sm:h-[400px] lg:h-[576px] overflow-hidden"
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
          viewport={{ once: true }}
        >
          <Image
            src="/dealer-2.png"
            alt="Dealer Jaecoo"
            fill
            className="object-cover object-center"
            sizes="(max-width: 768px) 100vw, 536px"
          />
        </motion.div>
      </div>
    </section>
  );
}