import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select";
export default function PoolRemodelEstimator() {
const [selections, setSelections] = useState({});
const [step, setStep] = useState(0);
const questions = [
{
label: "What is the size of your pool?",
options: ["Small", "Medium", "Large"],
key: "size"
},
{
label: "What shape is your pool?",
options: ["Rectangle", "Freeform", "Custom"],
key: "shape"
},
{
label: "What type of surface would you like?",
options: ["Plaster", "Pebble", "Tile"],
key: "surface"
},
{
label: "Would you like to add water features?",
options: ["Yes", "No"],
key: "waterFeatures"
},
{
label: "Would you like upgraded lighting?",
options: ["LED", "Fiber Optic", "None"],
key: "lighting"
},
{
label: "Choose your decking option:",
options: ["Pavers", "Concrete", "Stone"],
key: "decking"
},
{
label: "Would you like equipment upgrades?",
options: ["Pump", "Filter", "Heater", "Automation", "None"],
key: "equipment"
},
{
label: "Would you like to add a spa or hot tub?",
options: ["Yes", "No"],
key: "spa"
},
{
label: "Do you need financing?",
options: ["Yes", "No"],
key: "financing"
}
];
const handleSelect = (value) => {
const key = questions[step].key;
setSelections({ ...selections, [key]: value });
setStep(step + 1);
};
const restart = () => {
setSelections({});
setStep(0);
};
return (
{step < questions.length ? (
) : (
)}
);
}
{questions[step].label}
Your Pool Remodel Summary
-
{Object.entries(selections).map(([key, value]) => (
- {key.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase())}: {value} ))}
