const Calculator = () => {
  const [base, setBase] = React.useState("manicure");
  const [design, setDesign] = React.useState("single");
  const [length, setLength] = React.useState("short");
  const [extras, setExtras] = React.useState([]);
  const [removal, setRemoval] = React.useState(false);

  const BASE = [
    { id:"japanese", label:"Японский", px:2800 },
    { id:"manicure", label:"Маникюр + покрытие", px:3500 },
    { id:"pedicure", label:"Педикюр", px:3400 },
    { id:"extension", label:"Наращивание", px:5200 },
  ];
  const DESIGN = [
    { id:"none", label:"Без дизайна", px:0 },
    { id:"single", label:"1-2 ноготка", px:600 },
    { id:"half", label:"На каждом", px:1400 },
    { id:"all", label:"Полный арт", px:2600 },
  ];
  const LENGTH = [
    { id:"short", label:"Короткая", px:0 },
    { id:"medium", label:"Средняя", px:400 },
    { id:"long", label:"Длинная", px:900 },
  ];
  const EXTRAS = [
    { id:"parafin", label:"Парафин-уход", px:700 },
    { id:"strengthen", label:"Укрепление", px:600 },
    { id:"french", label:"Френч-контур", px:500 },
  ];

  const toggle = (id) => setExtras(e => e.includes(id) ? e.filter(x=>x!==id) : [...e, id]);

  const sumBase = BASE.find(x=>x.id===base)?.px || 0;
  const sumDesign = DESIGN.find(x=>x.id===design)?.px || 0;
  const sumLen = LENGTH.find(x=>x.id===length)?.px || 0;
  const sumExtras = EXTRAS.filter(x=>extras.includes(x.id)).reduce((a,b)=>a+b.px,0);
  const sumRemoval = removal ? 900 : 0;
  const total = sumBase + sumDesign + sumLen + sumExtras + sumRemoval;

  return (
    <section className="section shell" id="calculator">
      <div className="services-head">
        <div>
          <div className="overline">Калькулятор</div>
          <h2>Посчитайте <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--olive)"}}>ваш визит</em><br/>за полминуты.</h2>
        </div>
        <p>Точную цену назову после осмотра — калькулятор даёт вилку ±10%. Снятие моей работы — бесплатно.</p>
      </div>

      <div className="calc">
        <div className="calc-form">
          <div className="calc-group">
            <label>Базовая услуга <span className="hint">выберите одну</span></label>
            <div className="opt-row">
              {BASE.map(o => (
                <button key={o.id} className={`opt ${base===o.id?"active":""}`} onClick={()=>setBase(o.id)}>
                  {o.label} <span className="px">{o.px}₽</span>
                </button>
              ))}
            </div>
          </div>

          <div className="calc-group">
            <label>Дизайн</label>
            <div className="opt-row">
              {DESIGN.map(o => (
                <button key={o.id} className={`opt ${design===o.id?"active":""}`} onClick={()=>setDesign(o.id)}>
                  {o.label} {o.px?<span className="px">+{o.px}₽</span>:null}
                </button>
              ))}
            </div>
          </div>

          <div className="calc-group">
            <label>Длина</label>
            <div className="opt-row">
              {LENGTH.map(o => (
                <button key={o.id} className={`opt ${length===o.id?"active":""}`} onClick={()=>setLength(o.id)}>
                  {o.label} {o.px?<span className="px">+{o.px}₽</span>:null}
                </button>
              ))}
            </div>
          </div>

          <div className="calc-group">
            <label>Доп-уходы <span className="hint">можно несколько</span></label>
            <div className="opt-row">
              {EXTRAS.map(o => (
                <button key={o.id} className={`opt ${extras.includes(o.id)?"active":""}`} onClick={()=>toggle(o.id)}>
                  {extras.includes(o.id) && <Icon name="check" size={12}/>} {o.label} <span className="px">+{o.px}₽</span>
                </button>
              ))}
              <button className={`opt ${removal?"active":""}`} onClick={()=>setRemoval(r=>!r)}>
                {removal && <Icon name="check" size={12}/>} Снятие чужой работы <span className="px">+900₽</span>
              </button>
            </div>
          </div>
        </div>

        <div className="calc-result">
          <div className="deco"/>
          <div className="lbl">Итого за визит</div>
          <div className="total">
            {total.toLocaleString("ru-RU")} <small>₽</small>
          </div>
          <div className="breakdown">
            <div>База <b>{sumBase} ₽</b></div>
            {sumDesign>0 && <div>Дизайн <b>+{sumDesign} ₽</b></div>}
            {sumLen>0 && <div>Длина <b>+{sumLen} ₽</b></div>}
            {sumExtras>0 && <div>Доп-уход ({extras.length}) <b>+{sumExtras} ₽</b></div>}
            {sumRemoval>0 && <div>Снятие <b>+{sumRemoval} ₽</b></div>}
          </div>
          <div className="book-btn">
            <a href="#booking" className="btn btn-blush" style={{width:"100%"}}>
              Записаться с этими опциями <Icon name="arrowUpRight" size={14}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Calculator });