"use client";

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { useState } from "react";

export default function FormJaecoo() {
  const [consent, setConsent] = useState(false);

  return (
    <section className="px-4 py-12 md:px-20 bg-white">
      <div className="max-w-full mx-auto">
        <h2 className="text-3xl font-bold mb-8 text-black">
          Get In Touch With Us
        </h2>
        <form className="space-y-6">
          <div>
            <Label htmlFor="name" className="mb-2">
              Name
            </Label>
            <Input
              id="name"
              placeholder="Type your name here…"
              className="w-full h-12 text-base"
            />
          </div>

          <div>
            <Label htmlFor="email" className="mb-2">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="Rachel@domain.com"
              className="w-full h-12 text-base"
            />
          </div>

          <div>
            <Label htmlFor="phone" className="mb-2">
              Mobile Number
            </Label>
            <Input
              id="phone"
              type="tel"
              placeholder="+62 8xxxx"
              className="w-full h-12 text-base"
            />
          </div>

          <div>
            <Label htmlFor="city" className="mb-2 block">
              City
            </Label>
            <Select>
              <SelectTrigger className="w-full h-12 text-base">
                <SelectValue placeholder="Select city" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="jakarta">Jakarta</SelectItem>
                <SelectItem value="bandung">Bandung</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="categories" className="mb-2">
              Categories
            </Label>
            <Select>
              <SelectTrigger className="w-full h-12 text-base">
                <SelectValue placeholder="Select categories" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ev">Electric Vehicle</SelectItem>
                <SelectItem value="suv">SUV</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="series" className="mb-2">
              Product Series
            </Label>
            <Select>
              <SelectTrigger className="w-full h-12 text-base">
                <SelectValue placeholder="Select product series" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="e100">E100</SelectItem>
                <SelectItem value="e200">E200</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="showroom" className="mb-2">
              Showroom
            </Label>
            <Select>
              <SelectTrigger className="w-full h-12 text-base">
                <SelectValue placeholder="Select showroom" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="jakarta">Jakarta</SelectItem>
                <SelectItem value="bandung">Bandung</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="subject" className="mb-2">
              Subject
            </Label>
            <Input
              id="subject"
              placeholder="Type your subject here…"
              className="w-full h-12 text-base"
            />
          </div>

          <div>
            <Label htmlFor="message" className="mb-2">
              Message
            </Label>
            <Textarea
              id="message"
              placeholder="Type your query here…"
              className="w-full h-32 resize-none text-base"
            />
          </div>

          <div className="flex items-start gap-2">
            <Checkbox
              id="consent"
              checked={consent}
              onCheckedChange={() => setConsent(!consent)}
            />
            <label htmlFor="consent" className="text-sm text-gray-700">
              By providing your information, you consent to the collection, use
              and disclosure of your personal data by PT. Inchcape Indomobil
              Energi Baru and our trusted third parties (our related
              corporations and affiliates, selected partners, service providers,
              agents and other Inchcape Indomobil Energi Baru companies) in
              accordance with the purposes set out in our privacy policy.
            </label>
          </div>

          <Button
            size="lg"
            type="submit"
            className="bg-[#008bcf] hover:bg-[#0072a8] w-[250px] h-[50px] rounded-full  text-white"
          >
            Submit
          </Button>
        </form>
      </div>
    </section>
  );
}