import React from "react";
import {
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  Github,
  Phone,
  Mail,
  Building2,
} from "lucide-react";

export default function Contact() {
  function handleSubmit(e) {
    e.preventDefault();
    const { name } = e.target;
    alert(`Thank you, ${name.value}! We'll get back to you soon.`);
    e.target.reset();
  }

  return (
    <div className="flex flex-col lg:flex-row items-center justify-center max-w-7xl mx-auto py-16">
      <div className="max-w-xl lg:w-1/2 px-8 lg:px-16 flex flex-col justify-center">
        <h2 className="text-4xl font-bold mb-6 text-blue-900">
          Get in Touch
        </h2>
        <p className="mb-6 text-lg">
          Ready to elevate your digital presence? Whether you need a new
          website, graphics, SEO, or a mobile app, our team at
          <span className="text-[#004aad] font-medium">
            {" "}
            Digitro Solution
          </span>{" "}
          is here to help.
        </p>

        <div className="space-y-6 mb-8">
          <div className="flex items-start gap-4">
            <Phone className="text-[#004aad]" size={24} />
            <div>
              <p className="text-sm font-medium text-gray-500">Phone</p>
              <p className="text-base font-semibold">+91-1234567890</p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <Mail className="text-[#004aad]" size={24} />
            <div>
              <p className="text-sm font-medium text-gray-500">Email</p>
              <p className="text-base font-semibold">
                hello@digitrosolution.xyz
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <Building2 className="text-[#004aad]" size={24} />
            <div>
              <p className="text-sm font-medium text-gray-500">Office</p>
              <p className="text-base font-semibold">
                123 Digital Avenue, Bengaluru, India
              </p>
              <p className="text-sm text-gray-600">
                Mon - Fri: 9:00am - 6:00pm
              </p>
            </div>
          </div>
        </div>

        <div className="flex gap-4">
          <a
            href="#"
            className="text-[#004aad] hover:text-[#003366]"
            aria-label="Facebook"
          >
            <Facebook size={20} />
          </a>
          <a
            href="#"
            className="text-[#004aad] hover:text-[#003366]"
            aria-label="Twitter"
          >
            <Twitter size={20} />
          </a>
          <a
            href="#"
            className="text-[#004aad] hover:text-[#003366]"
            aria-label="Instagram"
          >
            <Instagram size={20} />
          </a>
          <a
            href="#"
            className="text-[#004aad] hover:text-[#003366]"
            aria-label="LinkedIn"
          >
            <Linkedin size={20} />
          </a>
          <a
            href="#"
            className="text-[#004aad] hover:text-[#003366]"
            aria-label="GitHub"
          >
            <Github size={20} />
          </a>
        </div>
      </div>

      <div className="w-full lg:w-1/2 px-8 lg:px-20 py-12 bg-white flex flex-col justify-center">
        <h2 className="text-2xl font-bold mb-8 text-blue-900">
          Send Us a Message
        </h2>

        <form className="space-y-6" onSubmit={handleSubmit}>
          <div>
            <label htmlFor="name" className="block text-sm mb-2">
              Name
            </label>
            <input
              id="name"
              name="name"
              type="text"
              placeholder="Your Name"
              className="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#004aad]"
              required
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm mb-2">
              Email
            </label>
            <input
              id="email"
              name="email"
              type="email"
              placeholder="you@example.com"
              className="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#004aad]"
              required
            />
          </div>

          <div>
            <label htmlFor="message" className="block text-sm mb-2">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              rows="4"
              maxLength="300"
              placeholder="How can we help you?"
              className="w-full border border-gray-300 rounded-md px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-[#004aad]"
              required
            />
          </div>

          <button
            type="submit"
            className="w-full bg-blue-900 hover:bg-blue-500 text-white font-medium py-3 rounded-md transition duration-300"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}
