"use client";

import { useState } from "react";
import { Mail, MapPin, Phone } from "lucide-react";

export default function ContactUs() {
  const [message, setMessage] = useState({
    name: "",
    email: "",
    phone: "",
    message: "",
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();

    const whatsappNumber = "9779803287986";
    const formattedMessage = `Name: ${message.name}%0AEmail: ${message.email}%0APhone: ${message.phone}%0AMessage: ${message.message}`;

    const whatsappURL = `https://api.whatsapp.com/send?phone=${whatsappNumber}&text=${formattedMessage}`;

    window.open(whatsappURL, "_blank");

    setMessage({
      name: "",
      email: "",
      phone: "",
      message: "",
    });
  };

  return (
    <div className="min-h-screen">
      <header className="text-slate-800 py-4 text-center md:text-start md:ml-40 lg:ml-80">
        <h1 className="text-3xl md:text-4xl lg:text-5xl font-emilys font-semibold">
          Contact Us
        </h1>
        <p className="mt-2 text-sm md:text-base">
          Empowering Spiritual Connections - Feel Free to Connect with Us - Our
          Doorway to Spiritual Assistance
        </p>
      </header>

      <main className="container mx-auto px-4 py-8">
        <div className="flex justify-center">
          <div className="flex flex-wrap -mx-4 w-full max-w-7xl">
            <div className="w-full lg:w-1/3 px-4 mb-8">
              <div className="bg-white custom-border p-6">
                <StoreInfo
                  title="Nepal Store"
                  address="Gupta Rudraksha, Dakshinamurti, Guru Mandir Marg, Kathmandu 44600, Nepal"
                  email="nepali.rudrakshabeads@gmail.com"
                  phone="+9779803287986"
                />
                <StoreInfo
                  title="Malayasia Store"
                  address="14A, Villa Laman Tasik, Bandar Sri Permaisuri, Cheras 56000 Kuala Lumpur, Malaysia"
                  email="nepali.rudrakshabeads@gmail.com"
                />
                <StoreInfo
                  title="Gupta Rudraksha India"
                  address="Sector 62, Noida, Uttar Pradesh-201301"
                  email="nepali.rudrakshabeads@gmail.com"
                  phone="+919431828698"
                />
              </div>
            </div>
            <div className="w-full lg:w-2/3 px-4 mb-8">
              <div className="h-full custom-border p-6">
                <h2 className="text-4xl text-black font-semibold mb-4">
                  Connecting Souls
                </h2>
                <p className="mb-4 text-lg">
                  Reach Out, Let&apos;s Share Spiritual Moments
                </p>
                <form onSubmit={handleSubmit}>
                  <div className="flex flex-col gap-4 sm:flex-row">
                    <input
                      type="text"
                      name="name"
                      className="sm:w-full p-3 border outline-none"
                      placeholder="Full Name"
                      value={message.name}
                      onChange={handleChange}
                    />
                    <input
                      type="email"
                      name="email"
                      className="sm:w-full p-3 border outline-none"
                      placeholder="Email"
                      value={message.email}
                      onChange={handleChange}
                    />
                  </div>
                  <input
                    type="text"
                    name="phone"
                    className="w-full p-3 border outline-none my-3"
                    placeholder="Phone Number"
                    value={message.phone}
                    onChange={handleChange}
                  />
                  <textarea
                    name="message"
                    className="w-full p-2 border border-gray-300 rounded mb-4"
                    rows="6"
                    value={message.message}
                    onChange={handleChange}
                    placeholder="Your message"
                  />
                  <div className="flex justify-center">
                    <button
                      type="submit"
                      className="bg-[#c08c38] uppercase text-white py-3 px-6 hover:bg-[#7D6032] transition duration-300"
                    >
                      Send Message
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function StoreInfo({ title, address, email, phone, note }) {
  return (
    <div className="mb-6">
      <h3 className="text-3xl font-semibold text-black mb-2">{title}</h3>
      <div className="flex items-start mb-5">
        <MapPin className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
        <span>{address}</span>
      </div>
      <div className="flex items-start mb-5">
        <Mail className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
        <span>Email: {email}</span>
      </div>
      {phone && (
        <div className="flex items-start">
          <Phone className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
          <span>Phone: {phone}</span>
        </div>
      )}
      {note && (
        <p className="mt-2 p-3 border border-[#c19a5b] w-3/4">
          <span className="font-semibold">Note:</span>
          <br />
          {note}
        </p>
      )}
    </div>
  );
}