/* ===== Подари вторую жизнь — воронка заявки на усыновление ===== */
function AdoptFlow({ a, onClose, onDone }){
  const [step, setStep] = useState(0);
  const [f, setF] = useState({
    housing:'', otherPets:'', kids:'', experience:'',
    name:'', phone:'', consent:false,
    checklist:[], contract:false,
  });
  const set = (k,v)=> setF(p=>({...p,[k]:v}));
  const toggleList = (id)=> setF(p=>({...p, checklist: p.checklist.includes(id)?p.checklist.filter(x=>x!==id):[...p.checklist,id]}));

  const CHECKS = [
    {id:'time', t:'Готов(а) уделять время каждый день', s:a.species==='dog'?'прогулки 2–3 раза в день':'игры, уход, общение'},
    {id:'money', t:'Готов(а) к расходам', s:'корм, ветеринар, прививки'},
    {id:'years', t:'Беру друга на всю его жизнь', s:'это 10–15 лет ответственности'},
    {id:'visit', t:'Согласен(на) на знакомство и визит куратора', s:'мы убедимся, что всем будет хорошо'},
  ];

  const valid = [
    f.housing && f.otherPets && f.kids && f.experience,
    f.name.trim() && f.phone.replace(/\D/g,'').length>=10 && f.consent,
    f.checklist.length===CHECKS.length,
    f.contract,
  ];
  const TITLES = ['Расскажите о себе','Контакт и согласие','Чек-лист готовности','Договор усыновления'];

  const next = ()=>{ if(step<3){ if(valid[step]) setStep(step+1); } else if(valid[3]) setStep(4); };
  const back = ()=> step>0 && step<4 ? setStep(step-1) : onClose();

  const RadioRow = ({label, k, opts})=>(
    <div style={{marginBottom:16}}>
      <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:14.5,marginBottom:9}}>{label}</div>
      <div className="chips">{opts.map(o=>(
        <button key={o.id} type="button" className={'chip'+(f[k]===o.id?' on':'')} onClick={()=>set(k,o.id)}>{o.ico}{o.label}</button>
      ))}</div>
    </div>
  );
  const fieldStyle = {width:'100%',padding:'13px 15px',borderRadius:'var(--radius-sm)',border:'1.5px solid var(--line-strong)',fontSize:15,fontFamily:'var(--font-body)',background:'var(--surface)'};

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card page" onClick={e=>e.stopPropagation()}>
        {/* header */}
        <div className="modal-head">
          <div className="row" style={{gap:11}}>
            <span style={{width:40,height:40,borderRadius:12,overflow:'hidden',flex:'none'}}><img src={a.photoUrlSm} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/></span>
            <div style={{lineHeight:1.15}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:16}}>Заявка · {a.name}</div>
              <div className="muted" style={{fontSize:12.5}}>{step<4?`Шаг ${step+1} из 4`:'Готово'}</div>
            </div>
          </div>
          <button className="iconbtn" onClick={onClose}><Icons.x/></button>
        </div>
        {step<4 && <div className="quiz-progress" style={{margin:'0 0 22px'}}><div style={{width:((step)/4*100)+'%'}}/></div>}

        {/* body */}
        <div className="modal-body">
          {step===0 && <div className="page">
            <h3 style={{fontSize:21,marginBottom:6}}>{TITLES[0]}</h3>
            <p className="muted" style={{fontSize:14.5,marginBottom:20}}>Это поможет куратору понять, подойдёт ли {a.name} вашему дому.</p>
            <RadioRow label="Где вы живёте?" k="housing" opts={[{id:'flat',label:'Квартира'},{id:'house',label:'Свой дом'}]}/>
            <RadioRow label="Есть ли уже животные?" k="otherPets" opts={[{id:'yes',label:'Да'},{id:'no',label:'Нет'}]}/>
            <RadioRow label="Есть ли маленькие дети?" k="kids" opts={[{id:'yes',label:'Да'},{id:'no',label:'Нет'}]}/>
            <RadioRow label="Был ли опыт с питомцами?" k="experience" opts={[{id:'yes',label:'Есть опыт'},{id:'no',label:'Впервые'}]}/>
          </div>}

          {step===1 && <div className="page">
            <h3 style={{fontSize:21,marginBottom:6}}>{TITLES[1]}</h3>
            <p className="muted" style={{fontSize:14.5,marginBottom:20}}>Куратор свяжется с вами по этим контактам.</p>
            <div style={{marginBottom:14}}><label style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13.5,display:'block',marginBottom:7}}>Ваше имя</label>
              <input style={fieldStyle} value={f.name} onChange={e=>set('name',e.target.value)} placeholder="Как к вам обращаться"/></div>
            <div style={{marginBottom:18}}><label style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:13.5,display:'block',marginBottom:7}}>Телефон</label>
              <input style={fieldStyle} value={f.phone} onChange={e=>set('phone',e.target.value)} placeholder="+7 ___ ___-__-__" inputMode="tel"/></div>
            <CheckRow checked={f.consent} onToggle={()=>set('consent',!f.consent)}
              label={<span>Я согласен(на) на обработку персональных данных в соответствии с <b style={{color:'var(--primary-700)'}}>152-ФЗ</b></span>}
              sub="Данные используются только для связи по этой заявке и не передаются третьим лицам."/>
          </div>}

          {step===2 && <div className="page">
            <h3 style={{fontSize:21,marginBottom:6}}>{TITLES[2]}</h3>
            <p className="muted" style={{fontSize:14.5,marginBottom:20}}>Отметьте всё — так мы убедимся, что готовы подарить дом осознанно.</p>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {CHECKS.map(c=><CheckRow key={c.id} checked={f.checklist.includes(c.id)} onToggle={()=>toggleList(c.id)} label={c.t} sub={c.s}/>)}
            </div>
          </div>}

          {step===3 && <div className="page">
            <h3 style={{fontSize:21,marginBottom:6}}>{TITLES[3]}</h3>
            <p className="muted" style={{fontSize:14.5,marginBottom:14}}>Краткие условия передачи животного новому дому.</p>
            <div className="contract-box">
              <p><b>1. Ответственное содержание.</b> Новый владелец обязуется обеспечить {a.name==='Барсик'?a.name:'питомца'} кормом, ветеринарной помощью и достойными условиями жизни.</p>
              <p><b>2. Без перепродажи.</b> Животное передаётся безвозмездно и не может быть продано или передано третьим лицам без уведомления куратора.</p>
              <p><b>3. Стерилизация.</b> Если животное ещё не стерилизовано по возрасту, владелец обязуется провести процедуру в рекомендованный срок.</p>
              <p><b>4. Контроль.</b> Куратор вправе раз в полгода узнавать о судьбе питомца в течение первого года.</p>
              <p><b>5. Возврат.</b> Если содержание станет невозможным, животное возвращается куратору, а не на улицу.</p>
            </div>
            <CheckRow checked={f.contract} onToggle={()=>set('contract',!f.contract)}
              label="Я прочитал(а) и принимаю условия договора" />
          </div>}

          {step===4 && <div className="page" style={{textAlign:'center',padding:'14px 0 6px'}}>
            <span style={{width:78,height:78,borderRadius:24,background:'var(--primary-50)',color:'var(--primary)',display:'grid',placeItems:'center',margin:'0 auto 18px'}}><Icons.checkCircle style={{width:42,height:42}}/></span>
            <h3 style={{fontSize:24,marginBottom:10}}>Заявка отправлена!</h3>
            <p className="muted" style={{fontSize:15.5,maxWidth:'32em',margin:'0 auto 18px',lineHeight:1.6}}>Спасибо, {f.name||'друг'}! Заявка на {a.name} ушла на модерацию куратору. Обычно мы отвечаем в течение дня — после проверки откроем прямой контакт.</p>
            <div className="tag" style={{margin:'0 auto'}}><Icons.shield style={{width:14,height:14}}/>Заявка на модерации</div>
          </div>}
        </div>

        {/* footer */}
        <div className="modal-foot">
          {step<4
            ? <>
                <button className="btn btn-ghost btn-sm" onClick={back}><Icons.arrowLeft/>{step===0?'Отмена':'Назад'}</button>
                <button className="btn btn-primary" onClick={next} disabled={!valid[step]} style={{opacity:valid[step]?1:.45}}>
                  {step===3?'Отправить заявку':'Далее'}<Icons.arrowRight/>
                </button>
              </>
            : <button className="btn btn-primary btn-block" onClick={onDone}><Icons.check/>Понятно, спасибо</button>}
        </div>
      </div>
    </div>
  );
}

function CheckRow({ checked, onToggle, label, sub }){
  return (
    <button type="button" className={'check-row'+(checked?' on':'')} onClick={onToggle}>
      <span className="check-box">{checked && <Icons.check style={{width:15,height:15}}/>}</span>
      <span className="check-txt"><span className="ct-label">{label}</span>{sub && <span className="ct-sub">{sub}</span>}</span>
    </button>
  );
}

window.AdoptFlow = AdoptFlow;