"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.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-3 mt-1">
            <p className="text-black leading-relaxed text-xl">
              PT MAYAPADA AUTO SEMPURNA (MAS) dimulai pada bulan Maret 2001.
            </p>
            <p className="text-black leading-relaxed text-xl">
              MAS merupakan Perusahaan otomotif termuka yang berawal sebagai
              penjual, penyedia dan penyewaan kendaraan.
            </p>
            <p className="text-black leading-relaxed text-xl">
              Berangkat dari industry otomotif, MAS Group merupakan salah satu
              Perusahaan terkemuka di wilayah Sumatra dan DKI Jakarta.
            </p>
            <p className="text-black leading-relaxed text-xl">
              Sampai saat ini MAS Group telah mensupply lebih dari 10.000 unit
              dan menyewakan berbagai kendaraan dengan segala jenis merek serta
              memiliki beberapa Authorized Dealer Otomotif Brand Terkemuka di
              Indonesia seperti Ford , Mercedes Benz dan MG.
            </p>
            <p className="text-black leading-relaxed text-xl">
              24 tahun sudah usia MAS Group dan seiring dengan perkembangan, MAS
              Group terus membuka beberapa Authorized Dealer Brand lain seperti
              :
            </p>
            <p className="text-black leading-relaxed text-xl">
              GWM, Chery Authorized Dealer & Body Repair, Omoda- Jaeco, serta
              Lepas
            </p>
            <p className="text-black leading-relaxed text-xl">
              MAS Group terus berkomitmen menghadirkan Solusi otomotif terbaik
              melalui jaringan purna jual serta inovasi bisnis pada masa depan
              ramah lingkungan.
            </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 2023, berlokasi di pusat Bandung. 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 Cihampelas Bandung, Jl. Cihampelas
              No. 264-268, Bandung, Jawa Barat 40131
            </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.png"
            alt="Dealer Jaecoo"
            fill
            className="object-cover object-center"
            sizes="(max-width: 768px) 100vw, 536px"
          />
        </motion.div>
      </div>
    </section>
  );
}