planpost-offer-landing/src/components/contact-page.tsx

"use client";

import type React from "react";

import { useState } from "react";
import { Facebook, Twitter, Linkedin, Instagram, MapPin } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    company: "",
    message: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Form submitted:", formData);
    // toast({
    //   title: "Message sent!",
    //   description: "We'll be in touch with you shortly.",
    // });
    // Reset form
    setFormData({
      name: "",
      email: "",
      phone: "",
      company: "",
      message: "",
    });
  };

  return (
    <main className="min-h-screen bg-gray-50">
      <div className="h-20"></div>
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
          {/* Left Column - Contact Information */}
          <div className="space-y-8">
            <div>
              <h1 className="text-5xl font-bold leading-tight">
                Get in touch <br />
                with us directly
              </h1>
              <p className="mt-6 text-lg text-gray-700">
                We are here to help you! Tell us how we can help & we&apos;ll be
                in touch with an expert within the next 24 hours.
              </p>
            </div>

            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-semibold">Send us an email:</h3>
                <a
                  href="mailto:contact@adspillar.com"
                  className="text-xl hover:underline"
                >
                  contact@adspillar.com
                </a>
              </div>

              <div>
                <h3 className="text-xl font-semibold">Give us a call:</h3>
                <a
                  href="tel:+8801784493232"
                  className="text-xl hover:underline"
                >
                  +880 1784-493232
                </a>
              </div>

              <div>
                <h3 className="text-xl font-semibold mb-4">Follow us:</h3>
                <div className="flex space-x-4">
                  <a
                    href="#"
                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                    aria-label="Facebook"
                  >
                    <Facebook size={20} />
                  </a>
                  <a
                    href="#"
                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                    aria-label="Twitter"
                  >
                    <Twitter size={20} />
                  </a>
                  <a
                    href="#"
                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                    aria-label="LinkedIn"
                  >
                    <Linkedin size={20} />
                  </a>
                  <a
                    href="#"
                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                    aria-label="Instagram"
                  >
                    <Instagram size={20} />
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Contact Form */}
          <div className="bg-white p-8 rounded-lg shadow-sm">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label htmlFor="name" className="text-lg font-medium">
                    Enter your name
                  </label>
                  <Input
                    id="name"
                    name="name"
                    placeholder="Enter your name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="email" className="text-lg font-medium">
                    Email address
                  </label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="example@gmail.com"
                    value={formData.email}
                    onChange={handleChange}
                    required
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label htmlFor="phone" className="text-lg font-medium">
                    Phone number
                  </label>
                  <Input
                    id="phone"
                    name="phone"
                    placeholder="(123) 456 - 7890"
                    value={formData.phone}
                    onChange={handleChange}
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="company" className="text-lg font-medium">
                    Company
                  </label>
                  <Input
                    id="company"
                    name="company"
                    placeholder="EX Facebook"
                    value={formData.company}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <label htmlFor="message" className="text-lg font-medium">
                  Message
                </label>
                <Textarea
                  id="message"
                  name="message"
                  placeholder="Write your message here..."
                  rows={6}
                  value={formData.message}
                  onChange={handleChange}
                  required
                />
              </div>

              <Button
                type="submit"
                className="w-full md:w-auto px-8 py-6 bg-pink-500 hover:bg-pink-600 text-white text-lg rounded-full"
              >
                Submit
              </Button>
            </form>
          </div>
        </div>

        {/* Map Section */}
        <div className="mt-16 space-y-6">
          <div className="flex items-center space-x-2">
            <MapPin className="text-pink-500" size={24} />
            <h2 className="text-2xl font-semibold">Our Location</h2>
          </div>
          <p className="text-lg">
            Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
            1216)
          </p>

          <div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Ads Pillar Location"
            ></iframe>
          </div>
        </div>
      </div>
      {/* <Toaster /> */}
    </main>
  );
}