import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { useRouter } from "next/router";
export default function QuoteForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
bedrooms: "",
bathrooms: "",
kitchen: "",
extras: [],
discount: "No thanks",
});
const [quoteResult, setQuoteResult] = useState(null);
const [loading, setLoading] = useState(false);
const router = useRouter();
const bedroomOptions = [
"No Bedrooms",
"One Bedroom",
"Two Bedrooms",
"Three Bedrooms",
"Four Bedrooms",
"Five Bedrooms",
];
const bathroomOptions = [
"No Bathrooms",
"One Bathroom",
"Two Bathrooms",
"Three Bathrooms",
"Four Bathrooms",
"Five Bathrooms",
];
const kitchenOptions = [
"No Kitchen",
"Small Kitchen",
"Medium Kitchen",
"Large Kitchen",
];
const extrasList = [
"Staircase(s)",
"Blind Cleaning (Over 2\" in width)",
"Laundry Room (Including Appliances)",
"Storage/Mechanical Room (Includes Appliances)",
"Sweep & Dust Garage",
"Pets in the home",
"Smoking in the home",
];
const discountOptions = [
"I was Referred by a Current Client of Herbal Haven",
"I just want a discount",
"No thanks",
];
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
if (type === "checkbox") {
setFormData((prev) => ({
...prev,
extras: checked
? [...prev.extras, value]
: prev.extras.filter((x) => x !== value),
}));
} else {
setFormData((prev) => ({ ...prev, [name]: value }));
}
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
const response = await fetch("/api/quote", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
const data = await response.json();
setLoading(false);
setQuoteResult(data);
if (data.booking_url) {
router.push(data.booking_url);
}
};
return (
);
}