/* ============================================================
   Extra screens:
   ownerAuth · ShareSheet (QR) · chat · sleep ·
   insurance · services · reference
   ============================================================ */
const { useState: useStateX } = React;

/* ---------- QR placeholder (simple squares only) ---------- */
function QR({ size=158 }){
  const n=21, cell=size/n;
  const rng=(i)=> Math.abs((Math.sin(i*12.9898)*43758.5453)%1);
  const sq=[];
  for(let r=0;r<n;r++)for(let c=0;c<n;c++){
    const inFinder=(r<8&&c<8)||(r<8&&c>=n-8)||(r>=n-8&&c<8);
    if(inFinder) continue;
    if(rng(r*n+c+1)>0.52) sq.push(<rect key={r+"-"+c} x={c*cell} y={r*cell} width={cell} height={cell} rx={cell*0.18} fill="#111318"/>);
  }
  const finder=(gx,gy)=>(
    <g key={gx+"_"+gy}>
      <rect x={gx*cell} y={gy*cell} width={7*cell} height={7*cell} rx={cell*1.4} fill="#111318"/>
      <rect x={(gx+1)*cell} y={(gy+1)*cell} width={5*cell} height={5*cell} rx={cell} fill="#fff"/>
      <rect x={(gx+2)*cell} y={(gy+2)*cell} width={3*cell} height={3*cell} rx={cell*0.6} fill="var(--green)"/>
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{display:"block"}}>
      <rect width={size} height={size} rx={size*0.06} fill="#fff"/>
      {sq}{finder(0,0)}{finder(n-7,0)}{finder(0,n-7)}
    </svg>
  );
}

/* ---------- Share profile sheet (QR) ---------- */
const SHARE_TARGETS = {
  clinic:{ icon:(s)=><Icon.cross s={s}/>, label:"Клиника", hint:"Ветклиника или врач",
    fields:["Имя и фото","Вид и порода","Возраст","Вес и рост","Вакцинации","Хронические болезни","Кастрация","Аллергии"] },
  hotel:{ icon:(s)=><Icon.hotel s={s}/>, label:"Гостиница / передержка", hint:"Зоогостиница",
    fields:["Имя и фото","Порода","Возраст","Питание и режим","Кастрация","Особенности поведения","Контакты хозяина"] },
  store:{ icon:(s)=><Icon.store s={s}/>, label:"Магазин продуктов", hint:"Зоомагазин, корма",
    fields:["Вид и порода","Вес и размер","Питание / диета","Аллергии","Возраст"] },
};

function ShareSheet({ open, onClose }){
  const [target,setTarget]=useStateX(null);
  if(!open) return null;
  const close=()=>{ setTarget(null); onClose(); };
  const t = target ? SHARE_TARGETS[target] : null;
  return (
    <div onClick={close} style={{position:"absolute",inset:0,zIndex:80,background:"rgba(17,19,24,.42)",
      backdropFilter:"blur(2px)",display:"flex",alignItems:"flex-end",animation:"scr .2s ease"}}>
      <div onClick={(e)=>e.stopPropagation()} style={{width:"100%",background:"#fff",
        borderRadius:"30px 30px 0 0",padding:"12px 20px 30px",maxHeight:"88%",overflowY:"auto",boxShadow:"var(--shadow-float)"}}>
        <div style={{width:42,height:5,borderRadius:3,background:"#D7DCE2",margin:"0 auto 14px"}}/>

        {!t && <>
          <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:4}}>
            <div style={{width:46,height:46,borderRadius:14,background:"var(--green-soft)",color:"var(--green)",display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}><Icon.qr s={24}/></div>
            <div className="col">
              <div style={{fontSize:22,fontWeight:800,letterSpacing:"-.01em"}}>Поделиться профилем</div>
              <div className="muted" style={{fontSize:14,fontWeight:500}}>Выберите, с кем поделиться</div>
            </div>
          </div>
          <div className="col" style={{gap:12,marginTop:16}}>
            {Object.keys(SHARE_TARGETS).map(k=>{
              const o=SHARE_TARGETS[k];
              return (
                <button key={k} onClick={()=>setTarget(k)} className="tap" style={{display:"flex",alignItems:"center",gap:14,
                  width:"100%",textAlign:"left",background:"var(--card-gray)",borderRadius:20,padding:"16px 16px"}}>
                  <div style={{width:50,height:50,borderRadius:15,background:"#fff",color:"var(--green)",display:"flex",alignItems:"center",justifyContent:"center",flex:"none",boxShadow:"var(--shadow-soft)"}}>{o.icon(26)}</div>
                  <div className="col" style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:17,fontWeight:700}}>{o.label}</div>
                    <div className="muted" style={{fontSize:13.5,fontWeight:500,marginTop:1}}>{o.hint}</div>
                  </div>
                  <Icon.chevR s={20} style={{color:"var(--gray)"}}/>
                </button>
              );
            })}
          </div>
          <div style={{textAlign:"center",marginTop:16}}>
            <span className="muted" style={{fontSize:13,fontWeight:500}}>Передаются только выбранные поля профиля</span>
          </div>
        </>}

        {t && <>
          <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
            <button className="iconbtn" style={{width:36,height:36}} onClick={()=>setTarget(null)}><Icon.back s={20}/></button>
            <div style={{fontSize:20,fontWeight:800,letterSpacing:"-.01em"}}>{t.label}</div>
          </div>
          <div style={{display:"flex",justifyContent:"center"}}>
            <div style={{padding:14,borderRadius:24,background:"var(--green-soft)"}}><QR/></div>
          </div>
          <div style={{textAlign:"center",marginTop:12}}>
            <span className="tag tag--outline" style={{padding:"8px 14px"}}>{t.icon(15)} Покажите код {t.label.toLowerCase()}</span>
          </div>
          <div style={{marginTop:18}}>
            <div style={{fontSize:14,fontWeight:700,color:"var(--gray)",textTransform:"uppercase",letterSpacing:".03em",marginBottom:10}}>Будут переданы поля</div>
            <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
              {t.fields.map((f,i)=>(
                <span key={i} className="tag tag--gray" style={{color:"var(--ink)"}}><Icon.check s={14} style={{color:"var(--green)"}}/> {f}</span>
              ))}
            </div>
          </div>
          <button className="btn" style={{marginTop:20}} onClick={onClose}><Icon.share s={20}/> Отправить ссылку</button>
        </>}
      </div>
    </div>
  );
}
window.ShareSheet = ShareSheet;

/* ---------- Owner auth / registration ---------- */
function AuthField({ icon, label, value }){
  return (
    <div style={{display:"flex",alignItems:"center",gap:12,background:"var(--card-gray)",borderRadius:16,padding:"14px 15px"}}>
      <span style={{color:"var(--gray)",flex:"none"}}>{icon}</span>
      <div className="col" style={{flex:1,minWidth:0}}>
        <div style={{fontSize:12,fontWeight:600,color:"var(--gray-2)"}}>{label}</div>
        <div style={{fontSize:16,fontWeight:600,color:"var(--ink)",marginTop:1}}>{value}</div>
      </div>
    </div>
  );
}

function OwnerAuthScreen({ go }){
  const [mode,setMode]=useStateX("login");
  const reg = mode==="reg";
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar/>
      <div style={{padding:"48px 24px 0",display:"flex",flexDirection:"column",alignItems:"center"}}>
        <div style={{width:74,height:74,borderRadius:24,background:"#fff",border:"2.5px solid var(--green)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--green)",boxShadow:"var(--shadow-soft)"}}><Icon.paw s={40}/></div>
        <div style={{fontSize:26,fontWeight:800,letterSpacing:"-.01em",lineHeight:1.15,textAlign:"center",marginTop:20}}>Цифровой двойник питомца</div>
        <div style={{fontSize:16,color:"var(--gray)",fontWeight:500,textAlign:"center",marginTop:10,lineHeight:1.35}}>{reg?"Создайте профиль хозяина":"Вход в личный кабинет хозяина"}</div>
      </div>

      <div style={{padding:"22px 22px 0"}}>
        <div style={{display:"flex",background:"var(--card-gray)",borderRadius:16,padding:5,gap:4,marginBottom:18}}>
          {[["login","Войти"],["reg","Регистрация"]].map(([k,l])=>(
            <button key={k} onClick={()=>setMode(k)} style={{flex:1,height:44,borderRadius:12,fontSize:16,fontWeight:700,
              background:mode===k?"#fff":"transparent",color:mode===k?"var(--ink)":"var(--gray)",boxShadow:mode===k?"var(--shadow-soft)":"none"}}>{l}</button>
          ))}
        </div>

        <div className="col" style={{gap:12}}>
          {reg && <AuthField icon={<Icon.person s={20}/>} label="имя" value="Алексей"/>}
          <AuthField icon={<Icon.phone s={20}/>} label="телефон" value="+7 999 123-45-67"/>
          {reg && <AuthField icon={<Icon.mail s={20}/>} label="e-mail" value="alex@mail.ru"/>}
          <AuthField icon={<Icon.lock s={20}/>} label={reg?"придумайте пароль":"пароль"} value="••••••••"/>
        </div>

        <button className="btn" style={{marginTop:20}} onClick={()=>go(reg?"onboard1":"home")}>
          {reg?"Создать аккаунт":"Войти"}
        </button>

        <div style={{display:"flex",alignItems:"center",gap:12,margin:"18px 0"}}>
          <div style={{flex:1,height:1,background:"var(--line)"}}/>
          <span className="muted" style={{fontSize:13,fontWeight:600}}>или</span>
          <div style={{flex:1,height:1,background:"var(--line)"}}/>
        </div>

        <button className="btn btn--ghost" style={{gap:10,border:"1.5px solid var(--green-soft)"}} onClick={()=>go(reg?"onboard1":"home")}>
          <span style={{width:26,height:26,borderRadius:8,background:"var(--green)",color:"#fff",fontSize:14,fontWeight:800,display:"flex",alignItems:"center",justifyContent:"center"}}>ID</span>
          Войти по Сбер ID
        </button>

        <div style={{textAlign:"center",marginTop:18}}>
          <span className="muted" style={{fontSize:12.5,fontWeight:500,lineHeight:1.4,display:"inline-block"}}>Продолжая, вы соглашаетесь с условиями<br/>и политикой обработки данных</span>
        </div>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.OwnerAuthScreen = OwnerAuthScreen;

/* ---------- Chat list (support + doctors) ---------- */
function ChatRow({ avatar, name, role, msg, time, unread, online, onClick }){
  return (
    <button onClick={onClick} className="tap" style={{display:"flex",alignItems:"center",gap:13,width:"100%",
      textAlign:"left",padding:"13px 6px",borderBottom:"1px solid var(--line)"}}>
      <div style={{position:"relative",flex:"none"}}>
        {avatar}
        {online && <span style={{position:"absolute",right:-1,bottom:-1,width:14,height:14,borderRadius:"50%",background:"var(--green)",border:"2.5px solid #fff"}}/>}
      </div>
      <div className="col" style={{flex:1,minWidth:0}}>
        <div style={{display:"flex",alignItems:"center",gap:8}}>
          <span style={{fontSize:16.5,fontWeight:700,flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{name}</span>
          <span style={{fontSize:12.5,fontWeight:600,color:"var(--gray-2)",flex:"none"}}>{time}</span>
        </div>
        {role && <div style={{fontSize:12.5,fontWeight:600,color:"var(--green-text)",marginTop:1}}>{role}</div>}
        <div style={{display:"flex",alignItems:"center",gap:8,marginTop:2}}>
          <span className="muted" style={{fontSize:14,fontWeight:500,flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{msg}</span>
          {unread>0 && <span style={{flex:"none",minWidth:20,height:20,borderRadius:10,background:"var(--green)",color:"#fff",fontSize:12,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 6px"}}>{unread}</span>}
        </div>
      </div>
    </button>
  );
}

function SupportAvatar({ size=52 }){
  return <div style={{width:size,height:size,borderRadius:16,background:"var(--green)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon.headset s={size*0.5}/></div>;
}

function ChatScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Чат</div>
        <div className="sub">Поддержка и ваши врачи</div>
        <div style={{display:"flex",alignItems:"center",gap:10,background:"#fff",borderRadius:18,padding:"14px 16px",marginTop:16,boxShadow:"var(--shadow-soft)",color:"var(--gray)"}}>
          <Icon.search s={20}/><span style={{fontSize:16}}>Поиск по чатам</span>
        </div>
      </div>

      <div style={{padding:"10px 22px 0"}}>
        <div style={{fontSize:13,fontWeight:700,color:"var(--gray)",textTransform:"uppercase",letterSpacing:".03em",margin:"10px 0 2px"}}>Поддержка</div>
        <ChatRow avatar={<SupportAvatar/>} name="Поддержка сервиса" role="Онлайн · отвечаем за 2 мин" msg="Подскажите, как добавить второго питомца?" time="9:24" unread={1} online onClick={()=>go("chatThread")}/>

        <div style={{fontSize:13,fontWeight:700,color:"var(--gray)",textTransform:"uppercase",letterSpacing:".03em",margin:"18px 0 2px"}}>Врачи</div>
        <ChatRow avatar={<DocAvatar size={52} hue={20}/>} name="Анна Соколова" role="Дерматолог · ВетПлюс" msg="Пришлите фото лап после прогулки" time="Вчера" unread={2} online onClick={()=>go("chatThread")}/>
        <ChatRow avatar={<DocAvatar size={52} hue={250}/>} name="Илья Морозов" role="Гастроэнтеролог · Белый хвост" msg="Продолжайте диету ещё неделю" time="Пн" unread={0} onClick={()=>go("chatThread")}/>
        <ChatRow avatar={<DocAvatar size={52} hue={150}/>} name="Клиника ДокВет" role="Регистратура" msg="Приём перенесён на 18 июня, 11:30" time="28 мая" unread={0} onClick={()=>go("chatThread")}/>
      </div>
      <div className="dock"><button className="btn" onClick={()=>go("chatThread")}><Icon.headset s={20}/> Написать в поддержку</button></div>
      <div className="homebar"/>
    </div>
  );
}
window.ChatScreen = ChatScreen;

/* ---------- A chat thread (doctor) ---------- */
function CBubble({ bot, time, children }){
  return (
    <div style={{display:"flex",flexDirection:"column",alignItems:bot?"flex-start":"flex-end"}}>
      <div style={{maxWidth:"80%",background:bot?"#fff":"var(--green-soft)",color:"var(--ink)",
        borderRadius:bot?"6px 20px 20px 20px":"20px 20px 6px 20px",padding:"12px 15px",fontSize:15.5,lineHeight:1.4,
        boxShadow:bot?"var(--shadow-soft)":"none",fontWeight:500}}>{children}</div>
      <span style={{fontSize:11.5,color:"var(--gray-2)",fontWeight:600,margin:"4px 6px 0"}}>{time}</span>
    </div>
  );
}

function ChatThreadScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter" style={{display:"flex",flexDirection:"column",overflow:"hidden"}}>
      <StatusBar/>
      <AppBar onBack={()=>go("chat")}
        title={null}
        right={<button className="iconbtn"><Icon.phone s={22}/></button>}/>
      <div style={{padding:"0 18px 8px",display:"flex",alignItems:"center",gap:12}}>
        <DocAvatar size={48} hue={20}/>
        <div className="col">
          <div style={{fontSize:18,fontWeight:700}}>Анна Соколова</div>
          <div style={{fontSize:13,fontWeight:600,color:"var(--green-text)"}}>Дерматолог · онлайн</div>
        </div>
      </div>

      <div style={{flex:1,overflowY:"auto",padding:"10px 18px 6px",display:"flex",flexDirection:"column",gap:14}}>
        <div style={{textAlign:"center"}}><span className="tag tag--gray" style={{fontSize:12.5}}>Сегодня</span></div>
        <CBubble bot time="9:02">Здравствуйте! Видела наблюдения Лилу в дневнике — зуд и беспокойный сон. Давно началось?</CBubble>
        <CBubble time="9:10">Третий день. После того как сменили корм.</CBubble>
        <CBubble bot time="9:12">Понятно. Пришлите, пожалуйста, фото лап и живота после прогулки.</CBubble>
        <div style={{display:"flex",justifyContent:"flex-end"}}>
          <div style={{width:120,height:90,borderRadius:16,overflow:"hidden",background:"repeating-linear-gradient(45deg,#E7EBEF,#E7EBEF 7px,#DDE2E7 7px,#DDE2E7 14px)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gray-2)"}}><Icon.camera s={26}/></div>
        </div>
        <CBubble bot time="9:15">Спасибо. Похоже на пищевую реакцию. Предлагаю записаться на приём — посмотрю вживую.</CBubble>
      </div>

      <div style={{padding:"6px 16px 0"}}>
        <div style={{display:"flex",gap:10,overflowX:"auto",paddingBottom:10}}>
          <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:8,padding:"0 14px"}} onClick={()=>go("booking")}><Icon.personPlus s={16} style={{color:"var(--green)"}}/> Записаться</button>
          <button className="btn btn--ghost btn--sm" style={{flex:"none",gap:8,padding:"0 14px"}} onClick={()=>go("passport")}><Icon.doc s={16} style={{color:"var(--green)"}}/> Паспорт</button>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:10,padding:"0 0 16px"}}>
          <button className="iconbtn" style={{background:"var(--card-gray)",width:46,height:46,flex:"none"}}><Icon.camera s={22} style={{color:"var(--gray)"}}/></button>
          <div style={{flex:1,background:"#fff",borderRadius:18,padding:"14px 18px",color:"var(--gray)",fontSize:16,boxShadow:"var(--shadow-soft)"}}>Сообщение…</div>
          <button className="iconbtn" style={{background:"var(--green)",color:"#fff",width:50,height:50,boxShadow:"0 8px 20px rgba(32,168,58,.3)",flex:"none"}}><Icon.send2 s={22}/></button>
        </div>
      </div>
      <div className="homebar"/>
    </div>
  );
}
window.ChatThreadScreen = ChatThreadScreen;

/* ---------- Sleep dynamics ---------- */
function SleepChart({ data }){
  const W=320,H=170,padL=22,padR=10,padT=14,padB=24;
  const max=12;
  const bw=(W-padL-padR)/data.length;
  const y=h=> padT+(H-padT-padB)*(1-h/max);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{display:"block"}}>
      {[3,6,9,12].map(v=>(
        <g key={v}>
          <line x1={padL} y1={y(v)} x2={W-padR} y2={y(v)} stroke="#EDF0F3" strokeWidth="1"/>
          <text x="4" y={y(v)+4} fontSize="10.5" fill="#A2A8B0" fontWeight="500">{v}</text>
        </g>
      ))}
      {data.map((d,i)=>{
        const x=padL+bw*i+bw*0.22, w=bw*0.56, top=y(d.h);
        return <g key={i}>
          <rect x={x} y={top} width={w} height={H-padB-top} rx={w*0.4} fill={d.bad?"#2A6FDB":"rgba(42,111,219,.32)"}/>
          <text x={x+w/2} y={H-8} fontSize="10.5" fill="#8B929C" fontWeight="500" textAnchor="middle">{d.x}</text>
        </g>;
      })}
    </svg>
  );
}
const sleepData=[{x:"Пн",h:8.2},{x:"Вт",h:7.8},{x:"Ср",h:7.1},{x:"Чт",h:6.4,bad:true},{x:"Пт",h:6.5,bad:true},{x:"Сб",h:6.1,bad:true},{x:"Вс",h:7.0}];

function SleepScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("diary")} right={<button className="iconbtn"><Icon.gear/></button>}/>
      <div style={{padding:"0 22px",display:"flex",alignItems:"center",gap:14}}>
        <div style={{width:56,height:56,borderRadius:16,background:"#EAF0FB",display:"flex",alignItems:"center",justifyContent:"center",color:"#2A6FDB",flex:"none"}}><Icon.moon s={28}/></div>
        <div className="col">
          <div className="h1" style={{fontSize:28,margin:0,whiteSpace:"nowrap"}}>Динамика сна</div>
          <div className="sub" style={{fontSize:15,whiteSpace:"nowrap"}}>Наблюдения хозяина · 7 дней</div>
        </div>
      </div>

      <div style={{padding:"16px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <div className="card" style={{background:"var(--warn-soft)",boxShadow:"none",padding:18,display:"flex",gap:12}}>
          <Icon.sparkle s={20} style={{color:"var(--warn)",flex:"none",marginTop:2}}/>
          <div>
            <div style={{fontWeight:700,fontSize:15,color:"var(--ink)"}}>AI-комментарий</div>
            <div className="muted" style={{fontSize:15,fontWeight:500,marginTop:3,lineHeight:1.4}}>За последние 3 ночи сон сократился до 6 часов и стал беспокойным. Совпадает с зудом — стоит показать врачу.</div>
          </div>
        </div>

        <div className="card" style={{display:"flex",padding:"20px 22px"}}>
          <div style={{flex:1,borderRight:"1px solid var(--line)"}}>
            <div className="muted" style={{fontSize:15,fontWeight:600}}>Сон в среднем</div>
            <div style={{fontSize:34,fontWeight:800,letterSpacing:"-.02em",marginTop:2}}>6,5 <span style={{fontSize:20,color:"var(--gray)"}}>ч</span></div>
            <div style={{marginTop:8}}><Tag variant="warn"><Icon.clock s={15}/> ниже нормы</Tag></div>
          </div>
          <div style={{flex:1,paddingLeft:20}}>
            <div className="muted" style={{fontSize:15,fontWeight:600}}>Пробуждений</div>
            <div style={{fontSize:34,fontWeight:800,letterSpacing:"-.02em",marginTop:2,color:"#2A6FDB"}}>3–4 <span style={{fontSize:20,color:"var(--gray)"}}>/ ночь</span></div>
            <div className="muted" style={{fontSize:14,fontWeight:500,marginTop:8}}>беспокойный сон</div>
          </div>
        </div>

        <div className="card" style={{padding:"18px 14px 14px"}}>
          <div style={{fontSize:16,fontWeight:700,padding:"0 8px 8px"}}>Часы сна по дням</div>
          <SleepChart data={sleepData}/>
        </div>

        <div className="card" style={{padding:"8px 18px"}}>
          <div style={{fontSize:18,fontWeight:700,padding:"12px 0 4px"}}>Записи о сне</div>
          {[["Сегодня","6,1 ч","Часто вставал, чесался"],["Вчера","6,5 ч","Беспокойный сон"],["2 дня назад","6,4 ч","Долго не мог уснуть"]].map((e,i)=>(
            <div key={i} style={{display:"flex",alignItems:"center",gap:13,padding:"13px 0",borderTop:"1px solid var(--line)"}}>
              <Icon.moon s={20} style={{color:"#2A6FDB",flex:"none"}}/>
              <span style={{fontSize:14.5,fontWeight:600,width:92,flex:"none"}}>{e[0]}</span>
              <span style={{fontSize:15,fontWeight:700,width:54,flex:"none"}}>{e[1]}</span>
              <span className="muted" style={{fontSize:13.5,fontWeight:500,flex:1,minWidth:0}}>{e[2]}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{height:16}}/>
      <div className="dock"><button className="btn" onClick={()=>go("diary")}><Icon.plus s={20}/> Записать сон</button></div>
      <div className="homebar"/>
    </div>
  );
}
window.SleepScreen = SleepScreen;

/* ---------- ДМС / страховка / антиклещ ---------- */
function PolicyCard({ icon, color="var(--green)", bg="var(--green-soft)", title, status, statusVar, lines, cta }){
  return (
    <div className="card" style={{padding:18}}>
      <div style={{display:"flex",alignItems:"center",gap:13}}>
        <div style={{width:50,height:50,borderRadius:15,background:bg,color,display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{icon}</div>
        <div className="col" style={{flex:1,minWidth:0}}>
          <div style={{fontSize:18,fontWeight:700,lineHeight:1.1}}>{title}</div>
          <div style={{marginTop:5}}><Tag variant={statusVar}>{status}</Tag></div>
        </div>
      </div>
      <div className="col" style={{gap:10,marginTop:14}}>
        {lines.map((l,i)=>(
          <div key={i} style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:12,fontSize:14.5}}>
            <span className="muted" style={{fontWeight:500,flex:"1 1 auto",minWidth:0}}>{l[0]}</span>
            <span style={{fontWeight:700,color:"var(--ink)",flex:"none",whiteSpace:"nowrap"}}>{l[1]}</span>
          </div>
        ))}
      </div>
      <button className="btn btn--sm" style={{marginTop:14,height:46}}>{cta}</button>
    </div>
  );
}

function InsuranceScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">ДМС, страховка<br/>и защита</div>
        <div className="sub">Полисы и подписки для Лилу</div>
      </div>
      <div style={{padding:"18px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <PolicyCard icon={<Icon.cross s={26}/>} title="ДМС для питомца" status="активен до 12.2026"
          lines={[["Покрытие","до 150 000 ₽"],["Клиники","8 рядом"],["Осталось приёмов","6 из 10"]]} cta="Открыть полис"/>
        <PolicyCard icon={<Icon.umbrella s={26}/>} bg="#EAF0FB" color="#2A6FDB" title="Страховка от травм" status="не оформлена" statusVar="gray"
          lines={[["Стоимость","от 390 ₽ / мес"],["Выплата","до 100 000 ₽"]]} cta="Оформить"/>
        <PolicyCard icon={<Icon.bug s={26}/>} title="Подписка «Антиклещ»" status="продлится 18 мая" statusVar="warn"
          lines={[["Препарат","Бравекто 20–40 кг"],["Доставка","каждые 12 недель"],["Напоминания","включены"]]} cta="Управлять подпиской"/>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.InsuranceScreen = InsuranceScreen;

/* ---------- Прочие услуги ---------- */
function ServicesScreen({ go }){
  const items=[
    {icon:<Icon.scissors s={24}/>,t:"Груминг",m:"Стрижка, мытьё, когти",p:"от 1 500 ₽",hue:false},
    {icon:<Icon.hotel s={24}/>,t:"Передержка и гостиница",m:"Когда вы в отъезде",p:"от 900 ₽ / сутки",hue:true},
    {icon:<Icon.paw s={24}/>,t:"Дрессировка",m:"Кинолог, коррекция поведения",p:"от 2 000 ₽",hue:false},
    {icon:<Icon.phone s={24}/>,t:"Зоотакси",m:"Поездка в клинику",p:"от 600 ₽",hue:true},
    {icon:<Icon.bowl s={24}/>,t:"Доставка корма",m:"Гипоаллергенный, по подписке",p:"от 1 200 ₽",hue:false},
    {icon:<Icon.camera s={24}/>,t:"Фотосессия питомца",m:"Студия или на прогулке",p:"от 3 000 ₽",hue:true},
  ];
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Прочие услуги</div>
        <div className="sub">Проверенные партнёры рядом</div>
        <div style={{display:"flex",alignItems:"center",gap:10,background:"#fff",borderRadius:18,padding:"14px 16px",marginTop:16,boxShadow:"var(--shadow-soft)",color:"var(--gray)"}}>
          <Icon.search s={20}/><span style={{fontSize:16}}>Поиск услуги</span>
        </div>
      </div>
      <div className="grid2" style={{padding:"18px 18px 0",gap:14}}>
        {items.map((it,i)=>(
          <button key={i} className="card tap col" style={{alignItems:"flex-start",gap:10,padding:"18px 16px",textAlign:"left"}}>
            <div style={{width:48,height:48,borderRadius:15,background:it.hue?"#EAF0FB":"var(--green-soft)",color:it.hue?"#2A6FDB":"var(--green)",display:"flex",alignItems:"center",justifyContent:"center"}}>{it.icon}</div>
            <div style={{fontSize:16,fontWeight:700,lineHeight:1.15,marginTop:2}}>{it.t}</div>
            <div className="muted" style={{fontSize:13,fontWeight:500,lineHeight:1.3}}>{it.m}</div>
            <div style={{fontSize:14,fontWeight:700,color:"var(--green-text)",marginTop:2}}>{it.p}</div>
          </button>
        ))}
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.ServicesScreen = ServicesScreen;

/* ---------- Справочник по питомцу ---------- */
function RefSection({ icon, title, children }){
  return (
    <div className="card" style={{padding:20}}>
      <div style={{display:"flex",alignItems:"center",gap:11,marginBottom:10}}>
        <div style={{width:40,height:40,borderRadius:12,background:"var(--green-soft)",color:"var(--green)",display:"flex",alignItems:"center",justifyContent:"center",flex:"none"}}>{icon}</div>
        <div style={{fontSize:18,fontWeight:700}}>{title}</div>
      </div>
      <div className="muted" style={{fontSize:15,fontWeight:500,lineHeight:1.45}}>{children}</div>
    </div>
  );
}

function ReferenceScreen({ go }){
  return (
    <div className="screen screen--plain screen-enter">
      <StatusBar/>
      <AppBar onBack={()=>go("home")} right={<button className="iconbtn" onClick={()=>go("ai")}><Icon.sparkle/></button>}/>
      <div style={{padding:"0 22px"}}>
        <div className="h1">Справочник<br/>по питомцу</div>
        <div className="sub">Корги · подобрано для Лилу</div>
        <div style={{display:"flex",gap:8,flexWrap:"wrap",marginTop:14}}>
          <span className="tag tag--outline"><Icon.paw s={15}/> Крупная порода</span>
          <span className="tag tag--outline"><Icon.scale s={15}/> 25–36 кг</span>
          <span className="tag tag--outline"><Icon.clock s={15}/> 10–12 лет</span>
        </div>
      </div>
      <div style={{padding:"18px 18px 0",display:"flex",flexDirection:"column",gap:14}}>
        <RefSection icon={<Icon.paw s={22}/>} title="Характер">Дружелюбный, общительный и энергичный. Хорошо ладит с детьми, нуждается в активности и внимании каждый день.</RefSection>
        <RefSection icon={<Icon.bowl s={22}/>} title="Питание">Склонны к набору веса — следите за порциями. Рекомендован корм с контролем калорий; при аллергии — гипоаллергенная линейка.</RefSection>
        <RefSection icon={<Icon.scissors s={22}/>} title="Уход">Короткая шерсть, линяет дважды в год. Регулярно проверяйте уши и когти, вычёсывайте 1–2 раза в неделю.</RefSection>
        <RefSection icon={<Icon.cross s={22}/>} title="Частые болезни">Дисплазия суставов, склонность к аллергиям и проблемам с кожей, ожирение. Рекомендованы регулярные осмотры.</RefSection>
        <div className="card" style={{background:"var(--ai-soft)",boxShadow:"none",padding:18,display:"flex",gap:12}}>
          <Icon.sparkle s={20} style={{color:"var(--green)",flex:"none",marginTop:2}}/>
          <div>
            <div style={{fontWeight:700,fontSize:15}}>Спросить AI о породе</div>
            <div className="muted" style={{fontSize:14.5,fontWeight:500,marginTop:3,lineHeight:1.4}}>Задайте вопрос с учётом истории Лилу — например, про вес или аллергию.</div>
            <button className="btn btn--sm" style={{marginTop:12,gap:8}} onClick={()=>go("ai")}><Icon.chat s={17}/> Открыть AI-ассистента</button>
          </div>
        </div>
      </div>
      <div style={{height:24}}/>
      <div className="homebar"/>
    </div>
  );
}
window.ReferenceScreen = ReferenceScreen;