const { SectionTitle, ScheduleRow, Pill, Button, Card, Icon } = window.DEOJiuJitsuDesignSystem_214613;

const GRADE={
  "Seg":[["20:00","Turma mista"]],
  "Qua":[["20:00","Turma mista"]],
  "Sex":[["20:00","Turma mista"]]
};

function SchedulePage({onLead}){
  const dias=Object.keys(GRADE);
  const [dia,setDia]=React.useState("Seg");
  return (
    <section style={{background:"var(--surface-page)"}}>
      <div className="flex flex-col gap-5 lg:gap-[var(--space-6)] max-w-[var(--container)] mx-auto px-4 py-10 lg:px-[var(--gutter)] lg:py-[var(--section-y-tight)]">
        <SectionTitle eyebrow="Grade da semana" accentWord="às 20:00" size="clamp(28px,7vw,40px)">Seg, qua e sex</SectionTitle>
        <div style={{display:"flex",gap:"var(--space-2)",flexWrap:"wrap"}}>
          {dias.map(d=>(
            <button key={d} onClick={()=>setDia(d)}
              style={{height:44,padding:"0 var(--space-5)",background:dia===d?"var(--accent)":"transparent",
                color:"var(--text-primary)",border:`var(--border-hairline) solid ${dia===d?"var(--accent)":"var(--border-subtle)"}`,
                borderRadius:"var(--radius-sm)",
                fontFamily:"var(--font-condensed)",fontSize:15,fontWeight:600,letterSpacing:"var(--tracking-label)",
                textTransform:"uppercase",cursor:"pointer",transition:"var(--transition-control)"}}>{d}</button>))}
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-[1.6fr_.9fr] gap-6 lg:gap-[var(--space-7)] items-start">
          <div>
            {GRADE[dia].map(([h,t],i)=>(
              <ScheduleRow key={h+t} time={h} turma={t} coach="Prof. Bida" days={dia} active={i===0}/>))}
            <p style={{marginTop:"var(--space-5)",fontSize:"var(--text-small)",color:"var(--text-muted)"}}>
              Por enquanto é só esse horário. Turmas novas entram aqui quando a academia abrir.</p>
          </div>
          <Card accent style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",borderRadius:"var(--radius-sm)"}}>
            <h3 style={{margin:0,fontFamily:"var(--font-display)",fontSize:"var(--text-title)",
              letterSpacing:"var(--tracking-display)",textTransform:"uppercase"}}>Primeira vez?</h3>
            <ul style={{margin:0,padding:0,listStyle:"none",display:"flex",flexDirection:"column",gap:"var(--space-3)"}}>
              {["Chegue 10 minutos antes","Roupa confortável — o kimono a gente empresta","Traga água e chinelo","A aula experimental é gratuita"].map(t=>(
                <li key={t} style={{display:"flex",gap:"var(--space-3)",fontSize:"var(--text-small)",
                  lineHeight:"var(--leading-tight)",color:"var(--text-secondary)"}}>
                  <Icon name="check" size={16} color="var(--deo-red)"/>{t}</li>))}
            </ul>
            <Pill size="sm" tone="outline">Seg • Qua • Sex — Às 20:00</Pill>
            <Button fullWidth onClick={onLead} style={{borderRadius:"var(--radius-sm)"}}>Agendar aula</Button>
          </Card>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{SchedulePage});