// ─── AYR — components/Accordion.jsx ─────────────────────────────────────────
// Componente genérico de accordion expansível.
// Depende de: data/constants.js (C, SF)
// ─────────────────────────────────────────────────────────────────────────────

const Acc=({icon,col,title,sub,exp,setExp,children})=>(
  <div style={{background:C.card,borderRadius:13,marginBottom:8,border:`1px solid ${exp?col+"55":C.br}`,overflow:"hidden"}}>
    <button onClick={()=>setExp(exp?null:title)} style={{background:"none",border:"none",cursor:"pointer",fontFamily:SF,color:C.cream,width:"100%",padding:"12px 14px",display:"flex",alignItems:"center",gap:11,textAlign:"left"}}>
      <div style={{width:40,height:40,borderRadius:11,background:`${col}22`,border:`1px solid ${col}44`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:20,flexShrink:0}}>{icon}</div>
      <div style={{flex:1}}><div style={{fontSize:12,fontWeight:700}}>{title}</div><div style={{fontSize:9,color:col,marginTop:2}}>{sub}</div></div>
      <span style={{color:C.dim}}>{exp?"▲":"▼"}</span>
    </button>
    {exp&&<div style={{padding:"0 14px 14px",borderTop:`1px solid ${C.br}`}}>{children}</div>}
  </div>
);