{"id":4230,"date":"2025-05-26T13:54:35","date_gmt":"2025-05-26T10:54:35","guid":{"rendered":"https:\/\/www.oneconcept.ro\/configurator\/"},"modified":"2025-07-09T23:46:40","modified_gmt":"2025-07-09T20:46:40","slug":"configurator","status":"publish","type":"page","link":"https:\/\/www.oneconcept.ro\/en\/configurator\/","title":{"rendered":"Heat Pump Configurator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4230\" class=\"elementor elementor-4230 elementor-650\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b3ff0e e-flex e-con-boxed e-con e-parent\" data-id=\"1b3ff0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3383793 elementor-widget elementor-widget-html\" data-id=\"3383793\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\n    \n        <!-- React and ReactDOM via CDN -->\n        <script crossorigin=\"\" src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n        <script crossorigin=\"\" src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n\n        <!-- Babel for JSX support -->\n        <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n        <!-- Lucide Icons -->\n        <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n        <!-- Tailwind CSS via CDN -->\n        <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n        <script>\n            tailwind.config = {\n                theme: {\n                    extend: {\n                        colors: {\n                            primary: 'hsl(209 64% 31%)',\n                            secondary: 'hsl(202 92% 60%)',\n                            'text-primary': 'hsl(0 0% 12%)',\n                            'text-secondary': 'hsl(0 0% 40%)',\n                            border: 'hsl(220 13% 91%)',\n                            warning: 'hsl(2 61% 57%)',\n                        },\n                        fontFamily: {\n                            sans: ['Poppins', 'sans-serif'],\n                        },\n                    },\n                },\n            }\n        <\/script>\n\n        <style>\n            @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n\n            .animate-fade-in-up {\n                animation: fadeInUp 0.5s ease-out;\n            }\n\n            @keyframes fadeInUp {\n                from {\n                    opacity: 0;\n                    transform: translateY(10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            .animate-pulse-subtle {\n                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n            }\n\n            @keyframes pulse {\n                0%,\n                100% {\n                    opacity: 1;\n                }\n                50% {\n                    opacity: 0.8;\n                }\n            }\n        <\/style>\n    \n\n    \n        <div id=\"root\"><\/div>\n        <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->\n        <script type=\"text\/babel\">\n            \/\/ Utility function for class names\n            const cn = (...classes) => classes.filter(Boolean).join(' ')\n\n            \/\/ City project temperatures\n            const cityProjectTemperatures = [\n                { city: 'Bucure\u0219ti', temp: -15 },\n                { city: 'Cluj-Napoca', temp: -18 },\n                { city: 'Timi\u0219oara', temp: -16 },\n                { city: 'Ia\u0219i', temp: -18 },\n                { city: 'Constan\u021ba', temp: -12 },\n                { city: 'Bra\u0219ov', temp: -20 },\n                { city: 'Oradea', temp: -15 },\n                { city: 'Craiova', temp: -15 },\n                { city: 'Sibiu', temp: -18 },\n                { city: 'Gala\u021bi', temp: -18 },\n                { city: 'Arad', temp: -15 },\n                { city: 'Ploie\u0219ti', temp: -15 },\n                { city: 'Bac\u0103u', temp: -18 },\n                { city: 'T\u00e2rgu Mure\u0219', temp: -21 },\n                { city: 'Baia Mare', temp: -18 },\n                { city: 'Suceava', temp: -21 },\n                { city: 'Boto\u0219ani', temp: -18 },\n                { city: 'Pite\u0219ti', temp: -15 },\n                { city: 'Satu Mare', temp: -18 },\n                { city: 'R\u00e2mnicu V\u00e2lcea', temp: -15 },\n                { city: 'T\u00e2rgovi\u0219te', temp: -15 },\n                { city: 'Foc\u0219ani', temp: -18 },\n                { city: 'Bistri\u021ba', temp: -21 },\n                { city: 'Tulcea', temp: -15 },\n                { city: 'Deva', temp: -18 },\n                { city: 'Hunedoara', temp: -15 },\n                { city: 'Zal\u0103u', temp: -18 },\n                { city: 'Re\u0219i\u021ba', temp: -12 },\n                { city: 'Slatina', temp: -15 },\n                { city: 'Alba Iulia', temp: -18 },\n                { city: 'Alexandria', temp: -15 },\n                { city: 'Baraolt', temp: -24 },\n                { city: 'Beclean', temp: -21 },\n                { city: 'Beiu\u0219', temp: -18 },\n                { city: 'B\u00e2rlad', temp: -18 },\n                { city: 'Blaj', temp: -18 },\n                { city: 'Br\u0103ila', temp: -15 },\n                { city: 'Buz\u0103u', temp: -15 },\n                { city: 'C\u0103l\u0103ra\u0219i', temp: -15 },\n                { city: 'Ceahl\u0103u', temp: -21 },\n                { city: 'C\u00e2mpulung Muscel', temp: -18 },\n                { city: 'Cristuru Secuiesc', temp: -21 },\n                { city: 'F\u0103g\u0103ra\u0219', temp: -21 },\n                { city: 'Gheorgheni', temp: -21 },\n                { city: 'Giurgiu', temp: -15 },\n                { city: 'Huedin', temp: -18 },\n                { city: 'Lugoj', temp: -12 },\n                { city: 'Miercurea Ciuc', temp: -24 },\n                { city: 'Petro\u0219ani', temp: -18 },\n                { city: 'Piatra Neam\u021b', temp: -18 },\n                { city: 'Reghin', temp: -21 },\n                { city: 'Roman', temp: -18 },\n                { city: 'Sf\u00e2ntu Gheorghe', temp: -24 },\n                { city: 'Sighi\u0219oara', temp: -18 },\n                { city: 'Sinaia', temp: -18 },\n                { city: 'S\u00e2ngeorgiul de P\u0103dure', temp: -21 },\n                { city: 'Slobozia', temp: -15 },\n                { city: 'Sovata', temp: -24 },\n                { city: 'Tecuci', temp: -18 },\n                { city: 'T\u00e2rgu Jiu', temp: -15 },\n                { city: 'T\u00e2rgu Ocna', temp: -18 },\n                { city: 'Turnu Severin', temp: -12 },\n                { city: 'Vaslui', temp: -18 },\n                { city: 'Vatra Dornei', temp: -21 },\n            ]\n            const BTU_TAGS = [\n                7000, 9000, 12000, 14700, 15000, 18000, 24000, 27300, 34000,\n                36000, 37500, 40000, 42000, 47800, 48000, 54000, 54600, 55000,\n                60000, 62000, 68200, 81900, 86000, 90000, 96000,\n            ]\n\n            \/\/ Form step options\n            const formStepOptions = {\n                insulationLevels: [\n                    'Slab',\n                    'Mediu (Polistiren 5-10cm)',\n                    'Bun (Polistiren, Vat\u0103 > 15 cm)',\n                ],\n                terminalUnits: [\n                    'Radiatoare',\n                    '\u00cenc\u0103lzire \u00een pardoseal\u0103',\n                    'Ventiloconvectoare',\n                ],\n                connectionTypes: ['Monofazat', 'Trifazat'],\n            }\n\n            \/\/ Insulation coefficients\n            const insulationCoefficients = {\n                'Bun (Polistiren, Vat\u0103 > 15 cm)': 0.6,\n                'Mediu (Polistiren 5-10cm)': 0.85,\n                Slab: 1.4,\n            }\n\n            \/\/ Terminal unit correction factors\n            const terminalUnitCorrections = {\n                '\u00cenc\u0103lzire \u00een pardoseal\u0103': 1,\n                Radiatoare: 1.3,\n                Ventiloconvectoare: 1.25,\n            }\n\n            \/\/ Calculate heat pump capacity\n            function calculateHeatPumpCapacity(params) {\n                const insulationCoef =\n                    insulationCoefficients[params.insulationLevel]\n                const terminalCorrection =\n                    terminalUnitCorrections[params.terminalUnits]\n\n                if (\n                    insulationCoef === undefined ||\n                    terminalCorrection === undefined\n                ) {\n                    return 0\n                }\n\n                const capacity =\n                    ((insulationCoef *\n                        params.surfaceArea *\n                        params.roomHeight *\n                        (params.desiredTemp - params.projectTemp)) \/\n                        1000) *\n                    terminalCorrection\n\n                return Math.max(0, Math.round(capacity * 100) \/ 100)\n            }\n            function getNearestBtuTag(btu) {\n                return BTU_TAGS.reduce((prev, curr) =>\n                    Math.abs(curr - btu) < Math.abs(prev - btu) ? curr : prev\n                )\n            }\n            \/\/ ProgressBar Component\n            const ProgressBar = ({ currentStep, totalSteps }) => {\n                const progress = (currentStep \/ totalSteps) * 100\n\n                return (\n                    <div className='w-full mb-8'>\n                        <div className='flex justify-between items-center mb-2'>\n                            <span className='text-sm text-text-secondary font-medium'>\n                                Pasul {currentStep} din {totalSteps}\n                            <\/span>\n                            <span className='text-sm font-medium text-primary'>\n                                {Math.round(progress)}%\n                            <\/span>\n                        <\/div>\n                        <div className='w-full h-2 bg-gray-100 rounded-full overflow-hidden'>\n                            <div className='h-full bg-primary rounded-full transition-all duration-500 ease-out' style={{ width: `${progress}%` }} \/>\n                        <\/div>\n                    <\/div>\n                )\n            }\n\n            \/\/ QuestionHeader Component\n            const QuestionHeader = ({ question, helperText }) => {\n                return (\n                    <div className='mb-8 animate-fade-in-up'>\n                        <h2 className='text-3xl md:text-4xl font-bold text-text-primary mb-3'>\n                            {question}\n                        <\/h2>\n                        {helperText && (\n                            <p className='text-text-secondary text-lg'>\n                                {helperText}\n                            <\/p>\n                        )}\n                    <\/div>\n                )\n            }\n\n            \/\/ NumericInput Component\n            const NumericInput = ({\n                value,\n                onChange,\n                min = 0,\n                max = 1000,\n                step = 0.1,\n                placeholder = '0',\n                unit,\n            }) => {\n                const [inputValue, setInputValue] = React.useState(\n                    value?.toString() || ''\n                )\n\n                const handleChange = (e) => {\n                    const newValue = e.target.value.replace(\/[^\\d.]\/g, '')\n\n                    if (newValue.split('.').length > 2) {\n                        return\n                    }\n\n                    setInputValue(newValue)\n\n                    if (newValue === '' || newValue === '.') {\n                        return\n                    }\n\n                    const numericValue = parseFloat(newValue)\n\n                    if (!isNaN(numericValue)) {\n                        onChange(numericValue)\n                    }\n                }\n\n                React.useEffect(() => {\n                    if (\n                        value !== undefined &&\n                        value.toString() !== inputValue\n                    ) {\n                        setInputValue(value.toString())\n                    }\n                }, [value])\n\n                const handleBlur = () => {\n                    if (inputValue === '' || inputValue === '.') {\n                        setInputValue(min.toString())\n                        onChange(min)\n                        return\n                    }\n\n                    const numericValue = parseFloat(inputValue)\n\n                    if (isNaN(numericValue)) {\n                        setInputValue(min.toString())\n                        onChange(min)\n                    } else {\n                        const boundedValue = Math.max(\n                            min,\n                            Math.min(max, numericValue)\n                        )\n                        setInputValue(boundedValue.toString())\n                        onChange(boundedValue)\n                    }\n                }\n\n                return (\n                    <div className='relative w-[300px] animate-fade-in-up'>\n                        <input\n                            type='text'\n                            inputMode='decimal'\n                            value={inputValue}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            step={step}\n                            placeholder={placeholder}\n                            className='w-full text-2xl font-medium py-6 px-4 rounded-2xl border-2 border-border focus:border-primary'\n                            style={{ paddingRight: unit ? '3rem' : '1rem' }}\n                        \/>\n                        {unit && (\n                            <div className='absolute right-4 top-1\/2 transform -translate-y-1\/2 text-text-secondary text-lg pointer-events-none'>\n                                {unit}\n                            <\/div>\n                        )}\n                    <\/div>\n                )\n            }\n\n            \/\/ OptionCard Component\n            const OptionCard = ({ label, description, selected, onClick }) => {\n                return (\n                    <div className={cn( 'border border-border rounded-xl p-4 cursor-pointer transition-all duration-200 hover:border-primary', selected ? 'border-primary bg-primary\/5' : '' )} onClick={onClick}>\n                        <div className='flex items-center p-1'>\n                            <div className={cn( 'w-5 h-5 rounded-full border-2 mr-3 flex items-center justify-center', selected ? 'border-primary' : 'border-gray-300' )}>\n                                {selected && (\n                                    <div className='w-2.5 h-2.5 rounded-full bg-primary' \/>\n                                )}\n                            <\/div>\n                            <div>\n                                <h3 className='font-medium text-lg'>{label}<\/h3>\n                                {description && (\n                                    <p className='text-text-secondary text-sm'>\n                                        {description}\n                                    <\/p>\n                                )}\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                )\n            }\n\n            \/\/ CitySelector Component\n            const CitySelector = ({ selectedCity, onCitySelect }) => {\n                const [open, setOpen] = React.useState(false)\n                const [searchQuery, setSearchQuery] = React.useState('')\n\n                const selectedCityData = cityProjectTemperatures.find(\n                    (item) => item.city === selectedCity\n                )\n\n                const handleCitySelection = (value) => {\n                    const selectedItem = cityProjectTemperatures.find(\n                        (item) => item.city === value\n                    )\n                    if (selectedItem) {\n                        onCitySelect(selectedItem.city, selectedItem.temp)\n                        setOpen(false)\n                    }\n                }\n\n                const filteredCities = cityProjectTemperatures.filter((item) =>\n                    item.city.toLowerCase().includes(searchQuery.toLowerCase())\n                )\n\n                return (\n                    <div className='w-full max-w-md animate-fade-in-up'>\n                        <div className='relative'>\n                            <button onClick={() => setOpen(!open)}\n                                className='w-full justify-between text-lg py-6 px-4 rounded-2xl border-2 border-border flex items-center'\n                            >\n                                {selectedCity\n                                    ? selectedCity\n                                    : 'Selecteaz\u0103 ora\u0219ul...'}\n                                <svg\n                                    className='ml-2 h-4 w-4 shrink-0 opacity-50'\n                                    viewBox='0 0 24 24'\n                                    fill='none'\n                                    stroke='currentColor'\n                                    strokeWidth='2'\n                                >\n                                    <path d='M6 9l6 6 6-6' \/>\n                                <\/svg>\n                            <\/button>\n\n                            {open && (\n                                <div className='absolute w-full mt-1 bg-white border border-border rounded-lg shadow-lg z-50'>\n                                    <div className='p-2 border-b'>\n                                        <input\n                                            type='text'\n                                            placeholder='Caut\u0103 ora\u0219...'\n                                            className='w-full p-2 border rounded'\n                                            value={searchQuery}\n                                            onChange={(e) =>\n                                                setSearchQuery(e.target.value)\n                                            }\n                                        \/>\n                                    <\/div>\n                                    <div className='max-h-[300px] overflow-y-auto'>\n                                        {filteredCities.length === 0 ? (\n                                            <div className='py-6 text-center text-sm'>\n                                                Nu s-a g\u0103sit niciun ora\u0219.\n                                            <\/div>\n                                        ) : (\n                                            <div className='p-1'>\n                                                {filteredCities.map((item) => (\n                                                    <div key={item.city} className='relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent' onClick={() =>\n                                                            handleCitySelection(\n                                                                item.city\n                                                            )\n                                                        }\n                                                    >\n                                                        {selectedCity ===\n                                                            item.city && (\n                                                            <svg\n                                                                className='mr-2 h-4 w-4'\n                                                                viewBox='0 0 24 24'\n                                                                fill='none'\n                                                                stroke='currentColor'\n                                                                strokeWidth='2'\n                                                            >\n                                                                <path d='M20 6L9 17l-5-5' \/>\n                                                            <\/svg>\n                                                        )}\n                                                        {item.city} ({item.temp}\n                                                        \u00b0C)\n                                                    <\/div>\n                                                ))}\n                                            <\/div>\n                                        )}\n                                    <\/div>\n                                <\/div>\n                            )}\n                        <\/div>\n                        {selectedCityData && (\n                            <p className='text-text-secondary mt-2 text-sm'>\n                                Temperatura de proiectare:{' '}\n                                <span className='font-medium'>\n                                    {selectedCityData.temp}\u00b0C\n                                <\/span>\n                            <\/p>\n                        )}\n                    <\/div>\n                )\n            }\n\n            \/\/ ResultSection Component\n            const ResultSection = ({ capacity, onRestart }) => {\n                const showWarning = capacity > 15\n                const btuValue = Math.round(capacity * 3412.142) \/\/ Convert kW to BTU\/h\n\n                const nearestTag = getNearestBtuTag(btuValue)\n                const categoryUrl = `\/product-category\/pompe-de-caldura-aer-apa\/?product_tag=${nearestTag}-btu`\n\n                return (\n                    <div className='animate-fade-in-up text-center'>\n                        <h2 className='text-3xl md:text-4xl font-bold mb-8'>\n                            Capacitatea estimat\u0103 a pompei de c\u0103ldur\u0103\n                        <\/h2>\n\n                        <div className='mb-8 py-10 px-6 bg-primary\/5 rounded-2xl flex flex-col items-center justify-center'>\n                            <div className='text-5xl md:text-6xl font-bold text-primary mb-4 animate-pulse-subtle'>\n                                {capacity} kW\n                            <\/div>\n                            <div className='text-2xl text-text-secondary mb-4'>\n                                \u2248 {btuValue.toLocaleString()} BTU\/h\n                            <\/div>\n                            <p className='text-lg text-text-secondary'>\n                                Pentru condi\u021biile alese, estimarea este de{' '}\n                                {capacity} kW.\n                            <\/p>\n\n                            {showWarning && (\n                                <div className='mt-6 p-4 bg-warning\/10 border-l-4 border-warning rounded-r-lg text-left'>\n                                    <p className='text-text-primary font-medium'>\n                                        Aten\u021bie!\n                                    <\/p>\n                                    <p className='text-text-secondary'>\n                                        Capacitatea estimat\u0103 dep\u0103\u0219e\u0219e\u0219te 15kW.\n                                        Pentru sarcini termice mari, v\u0103\n                                        recomand\u0103m s\u0103 consulta\u021bi un specialist.\n                                    <\/p>\n                                <\/div>\n                            )}\n                        <\/div>\n\n                        <div className='mt-8 flex flex-col items-center gap-4'>\n                            <div className='flex gap-4'>\n                                <button onClick={onRestart} className='btn-primary flex items-center'>\n                                    <span>Recalculeaz\u0103<\/span>\n                                    <svg\n                                        className='ml-2 h-5 w-5'\n                                        viewBox='0 0 24 24'\n                                        fill='none'\n                                        stroke='currentColor'\n                                        strokeWidth='2'\n                                    >\n                                        <path d='M5 12h14M12 5l7 7-7 7' \/>\n                                    <\/svg>\n                                <\/button>\n                                <button type='button' onClick={() =>\n                                        window.open(categoryUrl, '_blank')\n                                    }\n                                    className='bg-secondary hover:bg-secondary\/90 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 flex items-center gap-2'\n                                >\n                                    <span>Vezi op\u021biuni potrivite<\/span>\n                                    <svg\n                                        className='h-5 w-5'\n                                        viewBox='0 0 24 24'\n                                        fill='none'\n                                        stroke='currentColor'\n                                        strokeWidth='2'\n                                    >\n                                        <path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' \/>\n                                        <polyline points='15 3 21 3 21 9' \/>\n                                        <line x1='10' y1='14' x2='21' y2='3' \/>\n                                    <\/svg>\n                                <\/button>\n                            <\/div>\n\n                            <p className='mt-6 text-text-secondary text-sm'>\n                                Acest calculator ofer\u0103 o estimare orientativ\u0103.\n                                Pentru dimensionarea precis\u0103 a sistemului,\n                                recomand\u0103m consultarea unui specialist \u00een pompe\n                                de c\u0103ldur\u0103.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                )\n            }\n\n            \/\/ Main Configurator Component\n            const Configurator = () => {\n                const [currentStep, setCurrentStep] = React.useState(1)\n                const [formData, setFormData] = React.useState({\n                    surfaceArea: 0,\n                    roomHeight: 0,\n                    desiredTemp: 22,\n                    insulationLevel: '',\n                    terminalUnits: '',\n                    city: '',\n                    projectTemp: 0,\n                    connectionType: '',\n                })\n\n                const [capacity, setCapacity] = React.useState(null)\n                const totalSteps = 7\n\n                const isStepComplete = () => {\n                    switch (currentStep) {\n                        case 1:\n                            return formData.surfaceArea > 0\n                        case 2:\n                            return formData.roomHeight > 0\n                        case 3:\n                            return formData.desiredTemp > 0\n                        case 4:\n                            return !!formData.insulationLevel\n                        case 5:\n                            return !!formData.terminalUnits\n                        case 6:\n                            return !!formData.city\n                        case 7:\n                            return !!formData.connectionType\n                        default:\n                            return false\n                    }\n                }\n\n                const handleNextStep = () => {\n                    if (currentStep < totalSteps) {\n                        setCurrentStep(currentStep + 1)\n                    } else {\n                        const result = calculateHeatPumpCapacity(formData)\n                        setCapacity(result)\n                    }\n                }\n\n                const handlePrevStep = () => {\n                    if (currentStep > 1) {\n                        setCurrentStep(currentStep - 1)\n                    }\n                }\n\n                const handleRestart = () => {\n                    setFormData({\n                        surfaceArea: 0,\n                        roomHeight: 0,\n                        desiredTemp: 22,\n                        insulationLevel: '',\n                        terminalUnits: '',\n                        city: '',\n                        projectTemp: 0,\n                        connectionType: '',\n                    })\n                    setCapacity(null)\n                    setCurrentStep(1)\n                }\n\n                const updateFormData = (fieldName, value) => {\n                    setFormData((prevData) => ({\n                        ...prevData,\n                        [fieldName]: value,\n                    }))\n                }\n\n                const handleCitySelect = (city, projectTemp) => {\n                    setFormData((prevData) => ({\n                        ...prevData,\n                        city,\n                        projectTemp,\n                    }))\n                }\n\n                const renderStepContent = () => {\n                    switch (currentStep) {\n                        case 1:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Care este suprafa\u021ba locuin\u021bei (mp)?'\n                                        helperText='Introduce\u021bi suprafa\u021ba total\u0103 a locuin\u021bei \u00een metri p\u0103tra\u021bi.'\n                                    \/>\n                                    <NumericInput\n                                        value={formData.surfaceArea}\n                                        onChange={(value) =>\n                                            updateFormData('surfaceArea', value)\n                                        }\n                                        min={10}\n                                        max={1000}\n                                        step={1}\n                                        unit='mp'\n                                    \/>\n                                <\/>\n                            )\n\n                        case 2:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Care este \u00een\u0103l\u021bimea medie a camerelor (m)?'\n                                        helperText='Introduce\u021bi \u00een\u0103l\u021bimea medie a camerelor \u00een metri.'\n                                    \/>\n                                    <NumericInput\n                                        value={formData.roomHeight}\n                                        onChange={(value) =>\n                                            updateFormData('roomHeight', value)\n                                        }\n                                        min={2}\n                                        max={5}\n                                        step={0.1}\n                                        unit='m'\n                                    \/>\n                                <\/>\n                            )\n\n                        case 3:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Ce temperatur\u0103 interioar\u0103 dore\u0219ti (\u00b0C)?'\n                                        helperText='Introduce\u021bi temperatura dorit\u0103 \u00een interiorul locuin\u021bei.'\n                                    \/>\n                                    <NumericInput\n                                        value={formData.desiredTemp}\n                                        onChange={(value) =>\n                                            updateFormData('desiredTemp', value)\n                                        }\n                                        min={18}\n                                        max={26}\n                                        step={0.5}\n                                        unit='\u00b0C'\n                                    \/>\n                                <\/>\n                            )\n\n                        case 4:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Care este nivelul de izola\u021bie?'\n                                        helperText='Selecta\u021bi nivelul de izola\u021bie termic\u0103 al locuin\u021bei.'\n                                    \/>\n                                    <div className='space-y-4 w-full max-w-md'>\n                                        {formStepOptions.insulationLevels.map(\n                                            (level) => (\n                                                <OptionCard\n                                                    key={level}\n                                                    label={level}\n                                                    selected={\n                                                        formData.insulationLevel ===\n                                                        level\n                                                    }\n                                                    onClick={() =>\n                                                        updateFormData(\n                                                            'insulationLevel',\n                                                            level\n                                                        )\n                                                    }\n                                                \/>\n                                            )\n                                        )}\n                                    <\/div>\n                                <\/>\n                            )\n\n                        case 5:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Ce unit\u0103\u021bi terminale ai?'\n                                        helperText='Selecta\u021bi tipul de unit\u0103\u021bi terminale instalate.'\n                                    \/>\n                                    <div className='space-y-4 w-full max-w-md'>\n                                        {formStepOptions.terminalUnits.map(\n                                            (unit) => (\n                                                <OptionCard\n                                                    key={unit}\n                                                    label={unit}\n                                                    selected={\n                                                        formData.terminalUnits ===\n                                                        unit\n                                                    }\n                                                    onClick={() =>\n                                                        updateFormData(\n                                                            'terminalUnits',\n                                                            unit\n                                                        )\n                                                    }\n                                                \/>\n                                            )\n                                        )}\n                                    <\/div>\n                                <\/>\n                            )\n\n                        case 6:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='\u00cen ce zon\u0103 geografic\u0103 se monteaz\u0103?'\n                                        helperText='Selecta\u021bi ora\u0219ul \u00een care va fi instalat\u0103 pompa de c\u0103ldur\u0103.'\n                                    \/>\n                                    <CitySelector\n                                        selectedCity={formData.city}\n                                        onCitySelect={handleCitySelect}\n                                    \/>\n                                <\/>\n                            )\n\n                        case 7:\n                            return (\n                                <>\n                                    <QuestionHeader\n                                        question='Ce tip de bran\u0219ament ave\u021bi?'\n                                        helperText='Selecta\u021bi tipul de bran\u0219ament electric disponibil.'\n                                    \/>\n                                    <div className='space-y-4 w-full max-w-md'>\n                                        {formStepOptions.connectionTypes.map(\n                                            (type) => (\n                                                <OptionCard\n                                                    key={type}\n                                                    label={type}\n                                                    selected={\n                                                        formData.connectionType ===\n                                                        type\n                                                    }\n                                                    onClick={() =>\n                                                        updateFormData(\n                                                            'connectionType',\n                                                            type\n                                                        )\n                                                    }\n                                                \/>\n                                            )\n                                        )}\n                                    <\/div>\n                                <\/>\n                            )\n\n                        default:\n                            return null\n                    }\n                }\n\n                if (capacity !== null) {\n                    return (\n                        <ResultSection\n                            capacity={capacity}\n                            onRestart={handleRestart}\n                        \/>\n                    )\n                }\n\n                return (\n                    <div className='w-full max-w-3xl mx-auto'>\n                        <ProgressBar\n                            currentStep={currentStep}\n                            totalSteps={totalSteps}\n                        \/>\n\n                        <div className='min-h-[300px]'>\n                            {renderStepContent()}\n                        <\/div>\n\n                        <div className='mt-12 flex justify-end'>\n                            {currentStep > 1 ? (\n                                <button onClick={handlePrevStep} className='flex items-center px-6 py-3 text-text-secondary hover:text-primary transition-colors'>\n                                    <svg\n                                        className='mr-2 h-5 w-5'\n                                        viewBox='0 0 24 24'\n                                        fill='none'\n                                        stroke='currentColor'\n                                        strokeWidth='2'\n                                    >\n                                        <path d='M19 12H5M12 19l-7-7 7-7' \/>\n                                    <\/svg>\n                                    <span>\u00cenapoi<\/span>\n                                <\/button>\n                            ) : null}\n\n                            <button onClick={handleNextStep} disabled={!isStepComplete()} className={cn( 'bg-primary hover:bg-primary\/90 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 flex items-center gap-2', !isStepComplete() ? 'opacity-50 cursor-not-allowed' : '' )}>\n                                <span>\n                                    {currentStep === totalSteps\n                                        ? 'Vezi rezultatul'\n                                        : 'Pasul urm\u0103tor'}\n                                <\/span>\n                                <svg\n                                    className='h-5 w-5'\n                                    viewBox='0 0 24 24'\n                                    fill='none'\n                                    stroke='currentColor'\n                                    strokeWidth='2'\n                                >\n                                    <path d='M5 12h14M12 5l7 7-7 7' \/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                )\n            }\n\n            \/\/ App Component\n            const App = () => {\n                return (\n                    <div>\n                        <div className='max-w-3xl mx-auto px-4 py-10 md:py-20'>\n                            <Configurator \/>\n                        <\/div>\n                    <\/div>\n                )\n            }\n\n            \/\/ Render the app\n            const root = ReactDOM.createRoot(document.getElementById('root'))\n            root.render(<App \/>)\n        <!-- wpml:html_fragment <\/script>  --&gt;\n    \n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8211;&gt;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4230","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Heat Pump Configurator - One Concept<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oneconcept.ro\/en\/configurator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Heat Pump Configurator - One Concept\" \/>\n<meta property=\"og:description\" content=\"&#8211;&gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oneconcept.ro\/en\/configurator\/\" \/>\n<meta property=\"og:site_name\" content=\"One Concept\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-09T20:46:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.oneconcept.ro\/en\/configurator\/\",\"url\":\"https:\/\/www.oneconcept.ro\/en\/configurator\/\",\"name\":\"Heat Pump Configurator - One Concept\",\"isPartOf\":{\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#website\"},\"datePublished\":\"2025-05-26T10:54:35+00:00\",\"dateModified\":\"2025-07-09T20:46:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.oneconcept.ro\/en\/configurator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.oneconcept.ro\/en\/configurator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.oneconcept.ro\/en\/configurator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/www.oneconcept.ro\/en\/home\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Heat Pump Configurator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#website\",\"url\":\"https:\/\/www.oneconcept.ro\/en\/\",\"name\":\"One Concept\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.oneconcept.ro\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#organization\",\"name\":\"One Concept\",\"url\":\"https:\/\/www.oneconcept.ro\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.oneconcept.ro\/wp-content\/uploads\/2025\/07\/cropped-v1.png\",\"contentUrl\":\"https:\/\/www.oneconcept.ro\/wp-content\/uploads\/2025\/07\/cropped-v1.png\",\"width\":512,\"height\":512,\"caption\":\"One Concept\"},\"image\":{\"@id\":\"https:\/\/www.oneconcept.ro\/en\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Heat Pump Configurator - One Concept","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oneconcept.ro\/en\/configurator\/","og_locale":"en_US","og_type":"article","og_title":"Heat Pump Configurator - One Concept","og_description":"&#8211;&gt;","og_url":"https:\/\/www.oneconcept.ro\/en\/configurator\/","og_site_name":"One Concept","article_modified_time":"2025-07-09T20:46:40+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.oneconcept.ro\/en\/configurator\/","url":"https:\/\/www.oneconcept.ro\/en\/configurator\/","name":"Heat Pump Configurator - One Concept","isPartOf":{"@id":"https:\/\/www.oneconcept.ro\/en\/#website"},"datePublished":"2025-05-26T10:54:35+00:00","dateModified":"2025-07-09T20:46:40+00:00","breadcrumb":{"@id":"https:\/\/www.oneconcept.ro\/en\/configurator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oneconcept.ro\/en\/configurator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.oneconcept.ro\/en\/configurator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/www.oneconcept.ro\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Heat Pump Configurator"}]},{"@type":"WebSite","@id":"https:\/\/www.oneconcept.ro\/en\/#website","url":"https:\/\/www.oneconcept.ro\/en\/","name":"One Concept","description":"","publisher":{"@id":"https:\/\/www.oneconcept.ro\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oneconcept.ro\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.oneconcept.ro\/en\/#organization","name":"One Concept","url":"https:\/\/www.oneconcept.ro\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneconcept.ro\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.oneconcept.ro\/wp-content\/uploads\/2025\/07\/cropped-v1.png","contentUrl":"https:\/\/www.oneconcept.ro\/wp-content\/uploads\/2025\/07\/cropped-v1.png","width":512,"height":512,"caption":"One Concept"},"image":{"@id":"https:\/\/www.oneconcept.ro\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/pages\/4230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/comments?post=4230"}],"version-history":[{"count":2,"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/pages\/4230\/revisions"}],"predecessor-version":[{"id":4428,"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/pages\/4230\/revisions\/4428"}],"wp:attachment":[{"href":"https:\/\/www.oneconcept.ro\/en\/wp-json\/wp\/v2\/media?parent=4230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}