"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { motion } from "framer-motion";
import { useState } from "react";

export default function HeaderAfterSalesServices() {
  const cars = [
    {
      title: "JAECOO J7 AWD",
      image: "/j7-awd-nobg.png",
      price: "Rp 549.000.000",
      oldPrice: "Rp 544.000.000",
      capacity: "18.3kWh",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J7 SHS",
      image: "/j7-shs-nobg.png",
      price: "Rp 599.000.000",
      oldPrice: "Rp 594.000.000",
      capacity: "18.3kWh",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
    {
      title: "JAECOO J8 AWD",
      image: "/j8-awd-nobg.png",
      price: "Rp 812.000.000",
      oldPrice: "Rp 807.000.000",
      capacity: "18.3kWh",
      wheels: `19"`,
      seats: "Leather",
      display: `14.8"`,
    },
  ];
  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"
        >
          <h2 className="text-4xl font-bold mb-1">
            Layanan Konsumen After Sales
          </h2>
          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
            <Image
              src="/layanan-sales.png"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="flex flex-col items-center gap-6 mt-20"
        >
          <div className="w-full max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-6">
            <div className="relative h-[300px] sm:h-[400px] md:h-[600px] w-full overflow-hidden ">
              <Image
                src="/further-news.png"
                alt="Banner After Sales"
                fill
                className="rounded-md object-cover"
                priority
              />
            </div>

            <div className="flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-4 px-4 py-6">
              <Image
                src="/jhony.png"
                alt="Johny"
                width={150}
                height={150}
                className="rounded-md object-cover"
              />
              <div>
                <h3 className="text-xl font-semibold">Taufik</h3>
                <p className="text-sm text-gray-600 mt-1">
                  Silahkan Hubungi Taufik untuk Layanan Konsumen After Sales
                  Jaecoo Kelapa Gading
                </p>
              </div>
              <Button
                asChild
                className="bg-transparent hover:bg-green-600  mt-4 w-full border border-[#BCD4DF] text-[#1F6779]"
                size={"lg"}
              >
                <a
                  href="https://wa.me/62XXXXXXXXXX"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Whatsapp →
                </a>
              </Button>
            </div>
          </div>
        </motion.div>
      </section>
    </>
  );
}