"use client";

import { useState } from "react";

import { Badge } from "@/components/vritti/badge";
import { Button } from "@/components/vritti/button";
import { Input } from "@/components/vritti/input";
import { Label } from "@/components/vritti/label";
import { Textarea } from "@/components/vritti/textarea";

const OPTIONS = ["General Inquiry", "Product Support"];

export function ContactFormMap() {
  const [selectedOption, setSelectedOption] = useState("");

  return (
    <section className="py-16">
      <div className="container mx-auto">
        <div className="mb-20 text-center">
          <Badge variant="secondary">Customer Care</Badge>
          <h2 className="mt-8 mb-4 text-3xl font-bold">
            We&apos;re Here to Help
          </h2>
          <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
            Whether it&apos;s a question about our services, a request for
            technical assistance, or suggestions for improvement, our team is
            eager to hear from you.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-2">
          <img
            src="/placeholder.jpg"
            alt="Contact"
            className="h-full min-h-[400px] w-full rounded-2xl object-cover"
          />
          <form
            action="#"
            className="mx-auto max-w-lg space-y-6 lg:mx-0 lg:py-2"
          >
            <div className="space-y-4">
              <Label>Select Options for Business Engagement</Label>
              <div className="flex flex-wrap gap-2">
                {OPTIONS.map((option) => (
                  <Button
                    key={option}
                    type="button"
                    variant={selectedOption === option ? "default" : "outline"}
                    onClick={() =>
                      setSelectedOption((cur) =>
                        cur === option ? "" : option
                      )
                    }
                  >
                    {option}
                  </Button>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="first-name">First Name</Label>
                <Input id="first-name" placeholder="John" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="last-name">Last Name</Label>
                <Input id="last-name" placeholder="Doe" />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                placeholder="someone@example.com"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="message">Message</Label>
              <Textarea
                id="message"
                placeholder="Something about your request."
              />
            </div>
            <Button className="w-full">Send Message</Button>
          </form>
        </div>
      </div>
    </section>
  );
}
Contact Form Map

We're Here to Help

Installation

Dependencies
