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

function PlansPage({onLead}){
  return (
    <section style={{background:"var(--surface-page)"}}>
      <div className="flex flex-col gap-5 lg:gap-[var(--space-7)] max-w-[var(--container)] mx-auto px-4 py-10 lg:px-[var(--gutter)] lg:py-[var(--section-y-tight)]">
        <SectionTitle eyebrow="Turmas & planos" accentWord="mensalidade" size="clamp(28px,7vw,40px)">Sem taxa, sem</SectionTitle>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-[var(--space-5)]">
          <PlanCard name="Aula experimental" price="Grátis" period="" features={["Um treino completo","Kimono emprestado","Sem compromisso"]} cta="Agendar" onCta={onLead} style={{borderRadius:"var(--radius-sm)"}}/>
          <PlanCard name="Mensal — até dia 10" price="R$ 100" features={["Seg, Qua e Sex às 20:00","Turma mista, todos os níveis","Sem taxa de matrícula","Pagando até o dia 10 do mês"]} featured onCta={onLead} style={{borderRadius:"var(--radius-sm)"}}/>
          <PlanCard name="Aula avulsa" price="R$ 60" period="/aula" features={["Para quem treina de passagem","Mesmo horário da turma"]} onCta={onLead} style={{borderRadius:"var(--radius-sm)"}}/>
        </div>
        <p style={{margin:0,fontSize:"var(--text-small)",color:"var(--text-secondary)"}}>
          A mensalidade é <strong style={{color:"var(--text-primary)"}}>R$ 100 pagando até o dia 10</strong> de cada mês. Depois do dia 10, R$ 150.</p>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-[var(--space-6)] mt-2 lg:mt-[var(--space-6)]">
          <a href="https://www.instagram.com/p/DbGqBjLiehx/?img_index=1" target="_blank" rel="noopener"
            style={{color:"inherit"}}>
            <InstructorCard name="Prof. Bida" role="Professor" belt="preta" degrees={4}
              label="Faixa preta · 4º grau"
              photo="assets/prof-bida-4x5.png"
              bio="click para conhecer mais sobre o fundador do Núcleo de Taguatinga"/></a>
          <Card style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",borderRadius:"var(--radius-sm)"}}>
            <Pill size="sm" tone="outline">Como funciona</Pill>
            <p style={{margin:0,fontSize:"var(--text-body)",lineHeight:"var(--leading-body)",color:"var(--text-secondary)"}}>
              Você agenda a aula experimental, treina com a turma das 20:00 e decide depois. Nada de contrato longo.</p>
            <span style={{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-condensed)",fontSize:13,
              letterSpacing:"var(--tracking-label)",textTransform:"uppercase",color:"var(--text-accent)"}}>
              <Icon name="message-circle" size={16}/>Fale pelo WhatsApp</span>
            <Button variant="outline" onClick={()=>window.open("https://wa.me/5561999740365?text=Oi!%20Quero%20agendar%20uma%20aula%20experimental%20no%20DEO%20Jiu-Jitsu.","_blank")} style={{marginTop:"auto",borderRadius:"var(--radius-sm)"}}>
              <Icon name="message-circle" size={16}/>Falar no WhatsApp</Button>
          </Card>
          <Card tone="red" style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",justifyContent:"center",borderRadius:"var(--radius-sm)"}}>
            <span style={{fontFamily:"var(--font-display)",fontSize:"clamp(28px,5vw,40px)",lineHeight:"var(--leading-title)",
              letterSpacing:"var(--tracking-display)",textTransform:"uppercase"}}>Primeira aula é por nossa conta</span>
            <Button variant="secondary" onClick={onLead} style={{borderRadius:"var(--radius-sm)"}}>Agendar agora</Button>
          </Card>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{PlansPage});