import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Button } from "@/components/ui/button"; import { Calculator as CalcIcon, RotateCcw } from "lucide-react"; import { ArrowRight, MoveHorizontal, MoveVertical } from "lucide-react"; import MaterialSelect, { MATERIALS } from "../components/calculator/MaterialSelect"; import DimensionInput from "../components/calculator/DimensionInput"; import ResultCard from "../components/calculator/ResultCard"; import PlatePreview from "../components/calculator/PlatePreview"; export default function Calculator() { const [material, setMaterial] = useState(""); const [width, setWidth] = useState(""); const [height, setHeight] = useState(""); const [result, setResult] = useState(null); const [errors, setErrors] = useState({}); const [isCalculating, setIsCalculating] = useState(false); function validate() { const errs = {}; if (!material) errs.material = "Selecione um material"; if (!width || Number(width) <= 0) errs.width = "Insira uma largura válida"; if (!height || Number(height) <= 0) errs.height = "Insira uma altura válida"; setErrors(errs); return Object.keys(errs).length === 0; } function handleCalculate() { if (!validate()) return; setIsCalculating(true); // Small delay for visual feedback setTimeout(() => { const mat = MATERIALS.find((m) => m.value === material); const w = Number(width); const h = Number(height); const area = w * h; const price = area * mat.price; setResult({ price, area, materialLabel: mat.label }); setIsCalculating(false); }, 400); } function handleReset() { setMaterial(""); setWidth(""); setHeight(""); setResult(null); setErrors({}); } return (

); }