import React from "react";
import Form from "../cards/Form";
import { getSiteInfo } from "@/app/lib/api";
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const ContactSect = async () => {
  const siteInfo = await getSiteInfo();
  return (
    <section className="py-20 bg-white">
      <div className="container grid lg:grid-cols-2 relative bg-slate-50 shadow">

        {/* LEFT SIDE */}
        <div className=" p-6 lg:p-14 relative z-10">

          {/* Tag */}
          <div className="flex items-center gap-3 text-amber-600 font-semibold text-sm uppercase tracking-wide ">
            <span className="h-[1px] w-8 bg-amber-300"></span>
            Get In Touch
          </div>

          {/* Heading */}
          <p className="text-2xl lg:text-3xl font-bold text-gray-800 leading-snug mb-4">
            We’re Here to Help with Your Spray Paint Needs
          </p>

          {/* Description */}
          <p className="text-gray-500 mb-8 max-w-lg">
            Whether you are looking for product information, technical support, or have any inquiries, our team is ready to assist you. Contact us today and experience our commitment to exceptional customer service.
          </p>

          {/* Form */}
          <Form />
        </div>

        {/* RIGHT SIDE IMAGE */}
        <div className="relative ">

          {/* IMAGE */}
          <img
            src={`/img/email-campaign-animate.svg`}
            alt="contact"
            title="contact"
            className="w-full h-full object-cover"
          />
        </div>

      </div>

    </section>
  );
};

export default ContactSect;