"use client";
import React, { useState } from "react";
import { ChevronRight, Gem } from "lucide-react";
import authAxios from "@/utils/axios";
import Image from "next/image";

const PremiumBanner = ({ data }) => {
  const {
    header1,
    description1,
    header_quote1,
    header_quote2,
    header_quote3,
    header_quote4,
  } = data || {};
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    email: "",
    phone_number: "",
  });

  const [message, setMessage] = useState("");

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await authAxios.post(
        "/consultation/booking/create/",
        formData
      );
      if (response.status === 201) {
        setFormData({
          first_name: "",
          last_name: "",
          email: "",
          phone_number: "",
        });
        setMessage("Consultation experts will contact you shortly.");
        setTimeout(() => {
          setMessage("");
        }, 5000);
      } else {
        setMessage("An error occurred. Please try again.");
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      setMessage("An error occurred. Please try again.");
    }
  };

  return (
    <div className="min-h-screen bg-white p-2 md:p-8 flex items-center justify-center">
      <div className="max-w-6xl w-full bg-white shadow-lg rounded-xl overflow-hidden p-4 md:p-12">
        <div className="grid md:grid-cols-2 gap-8">
          {/* Left: Form Section */}
          <div className="bg-[#EDE8E0] p-2  md:p-14 flex flex-col justify-center rounded-lg ">
            <h2 className="text-4xl font-serif text-center text-[#AC8C6B]">
              Book a Free Consultation
            </h2>
            <p className="text-center text-gray-600 text-sm mt-2">
              Get expert guidance tailored to your needs.
            </p>

            <form onSubmit={handleSubmit} className="space-y-5 mt-6">
              <input
                type="text"
                name="first_name"
                placeholder="First Name"
                value={formData.first_name}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="text"
                name="last_name"
                placeholder="Last Name"
                value={formData.last_name}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />
              <input
                type="text"
                name="phone_number"
                placeholder="Phone Number"
                value={formData.phone_number}
                onChange={handleInputChange}
                className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
                required
              />

              {message && (
                <p className="text-green-700 bg-green-100 py-2 text-center rounded-md">
                  {message}
                </p>
              )}

              <button
                type="submit"
                className="w-full bg-[#AC874C] text-white font-semibold py-4 rounded-md hover:bg-[#96724f] transition"
              >
                Request Consultation
              </button>
            </form>
          </div>

          {/* Right: Benefits & App Download */}
          <div className="p-14 flex flex-col justify-center">
            <h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
              {header1 ?? "Why Choose Our Consultation?"}
            </h2>
            <p className="text-center text-gray-600 text-sm mt-2">
              {description1 ??
                "Gain expert insights and personalized guidance."}
            </p>

            <ul className="mt-6 space-y-4 text-gray-700 text-lg">
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote1 ??
                  "Expert guidance from experienced professionals"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote2 ?? "Tailored advice for your specific needs"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote3 ?? "Unlock clarity and direction in life"}
              </li>
              <li className="flex items-center">
                <ChevronRight className="text-[#AC8C6B] mr-2" />
                {header_quote3 ?? "Free initial text-based consultation"}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PremiumBanner;