// ─── AYR — components/AnimalCard.jsx ─────────────────────────────────────────
// Card expansível de primeiros socorros animal.
// Depende de: data/constants.js (C, SF)
// ─────────────────────────────────────────────────────────────────────────────

const {useState}=React;

const AnimalCard=({card})=>{
  const [open,setOpen]=useState(false);
  return(<div style={{background:"#0d1621",borderRadius:14,marginBottom:10,border:"1px solid "+(open?card.col+"55":"#1a2a3a"),overflow:"hidden"}}>
    <button onClick={()=>setOpen(p=>!p)} style={{width:"100%",background:"none",border:"none",cursor:"pointer",padding:"12px 14px",display:"flex",alignItems:"center",gap:11,textAlign:"left",color:"#e8f0fe",fontFamily:"Nunito,sans-serif"}}>
      <div style={{width:42,height:42,borderRadius:12,background:card.col+"22",border:"1px solid "+card.col+"44",display:"flex",alignItems:"center",justifyContent:"center",fontSize:20,flexShrink:0}}>{card.icon}</div>
      <div style={{flex:1}}>
        <div style={{fontSize:12,fontWeight:700,color:"#e8f0fe"}}>{card.title}</div>
        <div style={{fontSize:9,color:card.col,marginTop:2}}>{card.signs.length} sinais · {card.steps.length} passos</div>
      </div>
      <span style={{color:"#546e7a",fontSize:14}}>{open?"▲":"▼"}</span>
    </button>
    {open&&<div style={{padding:"0 14px 14px",borderTop:"1px solid #1a2a3a"}}>
      <div style={{fontSize:8,color:card.col,fontFamily:"Share Tech Mono,monospace",letterSpacing:2,marginTop:12,marginBottom:7}}>👁 SINAIS A IDENTIFICAR:</div>
      {card.signs.map(function(s,i){return(<div key={i} style={{display:"flex",gap:8,padding:"4px 0",borderBottom:i<card.signs.length-1?"1px solid #1a2a3a22":"none",fontSize:10,color:"#546e7a",lineHeight:1.5}}><span style={{color:card.col,flexShrink:0}}>›</span><span>{s}</span></div>);})}
      <div style={{fontSize:8,color:card.col,fontFamily:"Share Tech Mono,monospace",letterSpacing:2,marginTop:12,marginBottom:7}}>⚡ O QUE FAZER — POR ORDEM:</div>
      {card.steps.map(function(s,i){return(<div key={i} style={{display:"flex",gap:10,padding:"7px 0",borderBottom:i<card.steps.length-1?"1px solid #1a2a3a22":"none",alignItems:"flex-start"}}>
        <div style={{width:22,height:22,borderRadius:6,background:card.col,display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:900,color:"#000",flexShrink:0}}>{i+1}</div>
        <span style={{fontSize:11,color:"#e8f0fe",lineHeight:1.6,paddingTop:2}}>{s}</span>
      </div>);})}
      <div style={{marginTop:10,padding:"9px 11px",background:card.col+"12",borderRadius:10,border:"1px solid "+card.col+"22",fontSize:10,color:"#546e7a",lineHeight:1.5}}>
        <span style={{color:card.col,fontWeight:700}}>💡 </span>{card.tip}
      </div>
    </div>}
  </div>);
};