glass/src/components/Estimator.jsx

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Calculator } from 'lucide-react';
import { usePricing } from '../hooks/usePricing';

const Estimator = () => {
  const [area, setArea] = useState(20);
  const [thickness, setThickness] = useState(200);
  const { prices, loading: pricesLoading } = usePricing();

  const costPerSqM = prices[thickness] ?? (thickness === 200 ? 2000 : 3000);
  const estimatedCost = area * costPerSqM;

  return (
    <section id="estimator" style={{ backgroundColor: 'var(--bg-lighter)' }}>
      <div className="container">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '50px', alignItems: 'center' }}>

          <div style={{ flex: '1 1 400px' }}>
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, type: "spring" }}
              viewport={{ once: true }}
            >
              <h2 style={{ fontSize: '3.5rem', marginBottom: '20px' }}>
                КАЛЬКУЛЯТОР <span className="text-accent-blue">ЗАЩИТЫ</span>
              </h2>
              <p style={{ color: 'var(--text-muted)', fontSize: '1.2rem', marginBottom: '40px', lineHeight: '1.6' }}>
                Рассчитайте примерную стоимость обеспечения безопасности вашего периметра. Окончательная стоимость определяется после профессионального осмотра объекта.
              </p>

              <div className="glass-panel" style={{ padding: '40px' }}>
                <div style={{ marginBottom: '35px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '15px' }}>
                    <label style={{ fontWeight: 600, color: 'var(--text-main)', fontSize: '1.1rem' }}>Толщина пленки</label>
                  </div>
                  <select
                    value={thickness}
                    onChange={(e) => setThickness(parseInt(e.target.value))}
                    style={{
                      width: '100%', padding: '12px',
                      background: 'var(--bg-lighter)',
                      border: '2px solid var(--border-light)',
                      borderRadius: '8px',
                      color: 'var(--text-main)',
                      fontSize: '1rem',
                      outline: 'none',
                      cursor: 'pointer'
                    }}
                  >
                    <option value={200}>200 микрон (от {prices[200].toLocaleString('ru-RU')} ₽/м²)</option>
                    <option value={300}>300 микрон (от {prices[300].toLocaleString('ru-RU')} ₽/м²)</option>
                  </select>
                </div>

                <div style={{ marginBottom: '20px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '15px' }}>
                    <label style={{ fontWeight: 600, color: 'var(--text-main)', fontSize: '1.1rem' }}>Общая площадь (м²)</label>
                    <span className="text-accent-blue" style={{ fontWeight: '800', fontSize: '1.2rem' }}>{area}</span>
                  </div>
                  <input
                    type="range"
                    min="5"
                    max="500"
                    step="5"
                    value={area}
                    onChange={(e) => setArea(parseInt(e.target.value))}
                    style={{ width: '100%', accentColor: 'var(--accent-blue)', height: '8px', borderRadius: '4px' }}
                  />
                </div>
              </div>
            </motion.div>
          </div>

          <div style={{ flex: '1 1 400px' }}>
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.6, delay: 0.2, type: "spring" }}
              viewport={{ once: true }}
              className="glass-panel"
              style={{
                padding: '50px',
                textAlign: 'center',
                border: '2px solid rgba(14, 165, 233, 0.2)',
                boxShadow: '0 20px 50px rgba(14, 165, 233, 0.1)'
              }}
            >
              <motion.div
                animate={{ y: [0, -10, 0] }}
                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
              >
                <Calculator size={56} className="text-accent-blue" style={{ margin: '0 auto 25px' }} />
              </motion.div>

              <h3 style={{ fontSize: '1.3rem', color: 'var(--text-muted)', marginBottom: '15px' }}>Ориентировочная стоимость</h3>
              <div style={{ fontSize: '3.8rem', fontWeight: 800, fontFamily: 'var(--font-heading)', color: 'var(--text-main)', marginBottom: '20px' }}>
                {pricesLoading ? '...' : estimatedCost.toLocaleString('ru-RU')} ₽
              </div>
              <p style={{ fontSize: '1rem', color: 'var(--text-muted)', marginBottom: '35px', lineHeight: '1.6' }}>
                Включает бронематериалы, специализированный монтаж и финальную проверку.
              </p>

              <motion.a
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href="#contact"
                className="btn-primary"
                style={{ display: 'block', width: '100%', textAlign: 'center' }}
              >
                Запросить точный расчет
              </motion.a>
            </motion.div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default Estimator;