"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">
      <div className="flex flex-col items-center gap-6">
        <motion.div
          className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden "
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
          viewport={{ once: true }}
        >
          <Image
            src="/about-i.png"
            alt="about-header"
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 640px"
            priority
          />
        </motion.div>
      </div>

      <div className="w-full flex flex-col lg:flex-row gap-10 mt-10">
        <motion.div
          className="w-full lg:w-6/12 space-y-6 sm:ml-15"
          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">
            Mengenal Lebih Dekat Dealer Resmi Jaecoo
          </h2>

          <div>
            <h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-2">
              Deskripsi Singkat
            </h3>
            <p className="text-gray-600 leading-relaxed text-base">
              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-sm 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>
  );
}