setBad(true)} />}
{name}
setBad(true)} />}
{name}
);
}
function PricingEstimator() {
const [type, setType] = React.useState(null);
const [stage, setStage] = React.useState(null);
const [maintenance, setMaintenance] = React.useState(true);
const [urgency, setUrgency] = React.useState("This quarter");
const [design, setDesign] = React.useState("Design from scratch");
const [name, setName] = React.useState("");
const [niche, setNiche] = React.useState(null);
const [palette, setPalette] = React.useState(null);
const [styleAns, setStyleAns] = React.useState(null);
const [step, setStep] = React.useState(0);
const [phase, setPhase] = React.useState("form"); // form | running | done
const [done, setDone] = React.useState(0);
const [collapsed, setCollapsed] = React.useState(false);
const [open, setOpen] = React.useState({});
const runId = React.useRef(0);
const start = () => {
if (!type || !stage) return;
const id = ++runId.current;
setPhase("running"); setDone(0); setOpen({ 0: true });
let i = 0;
const tick = () => {
if (id !== runId.current) return;
i += 1; setDone(i);
setOpen((o) => ({ ...o, [i - 1]: false, [Math.min(i, 4)]: true }));
if (i < 5) setTimeout(tick, 1650);
else setPhase("done");
};
setTimeout(tick, 1200);
};
const reset = () => { runId.current++; setPhase("form"); setDone(0); setOpen({}); setStep(0); };
const toggle = (i) => setOpen((o) => ({ ...o, [i]: !o[i] }));
const r = type && stage ? aiEstimate(type, stage, maintenance, urgency, design) : null;
const statusText = phase === "form" ? "awaiting input" : phase === "running" ? "studying your answers…" : "estimate ready";
const STEPS = r ? [
{
title: "Reading your brief", duration: "0.9s",
content: (
Tell us what you're building and how far along you are. Our estimator studies it live, then proposes a stack and an indicative price — firmed up after a 2-week discovery.