const { Button, Pill, StripePanel, PhotoFrame, SectionTitle, StatBlock, Card, Icon, IconButton, ScheduleRow, TestimonialCard } = window.DEOJiuJitsuDesignSystem_214613;

const GOOGLE_REVIEWS=[
  {quote:"Gostei muito das aulas de jiu-jitsu, o professor é bem didático e os alunos são bem compreensivos com os iniciantes. Recomendo a experiência.",author:"Daniel Lucas"},
  {quote:"Ótima estrutura, pessoal mega receptivo com novos alunos. O mestre Bida tem muitos anos de conhecimento de jiu-jitsu e é ótimo em passar esse conhecimento para os alunos. Feliz demais em fazer parte da família Deo!",author:"Luiz Junior"},
  {quote:"O melhor tatame em Brasília, junto com o melhor professor e árbitro! Professor Bida é um professor ímpar, ser humano sensacional.",author:"Vitória Rodrigues"},
  {quote:"Muito mais que uma equipe de jiu-jitsu, uma família! Para além de posições e lutas, ensina-se honra, disciplina, compromisso, respeito, dedicação!",author:"Thiago França"},
  {quote:"Excelente ambiente. O professor Bida é um excelente profissional, além de conhecer as técnicas do jiu-jitsu, é um árbitro conceituado pela CBJJ. Recomendo a todos que almejam aprender jiu-jitsu.",author:"Anderson Clayton Barroso"},
  {quote:"Excelentes professores, compreensivos e pacientes na hora de passar os conhecimentos do jiu-jitsu, em especial o professor Bida, que é excepcional. Ótima academia e ética profissional.",author:"Luiz Mendes"}];

function TestimonialCarousel(){
  const [i,setI]=React.useState(0);
  const go=n=>setI(v=>(v+n+GOOGLE_REVIEWS.length)%GOOGLE_REVIEWS.length);
  const r=GOOGLE_REVIEWS[i];
  return (
    <div className="flex flex-col gap-3">
      <a href="https://www.google.com/maps/search/?api=1&query=Deo+Jiu-Jitsu+Taguatinga" target="_blank" rel="noopener"
        style={{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-condensed)",fontSize:13,
          letterSpacing:"var(--tracking-label)",textTransform:"uppercase",color:"var(--text-secondary)"}}>
        <span style={{color:"var(--deo-red)"}}>★★★★★</span> 5,0 · 26 avaliações no Google</a>
      <TestimonialCard padding="var(--space-7)" style={{borderRadius:"var(--radius-sm)",minHeight:220}}
        quote={r.quote} author={r.author}/>
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          {GOOGLE_REVIEWS.map((_,idx)=>(
            <button key={idx} onClick={()=>setI(idx)} aria-label={"Avaliação "+(idx+1)}
              style={{width:8,height:8,padding:0,border:0,cursor:"pointer",borderRadius:"var(--radius-pill)",
                background:idx===i?"var(--deo-red)":"var(--border-subtle)"}}/>))}
        </div>
        <div className="flex gap-2">
          <IconButton icon="chevron-left" label="Avaliação anterior" size={36} onClick={()=>go(-1)} style={{borderRadius:"var(--radius-sm)"}}/>
          <IconButton icon="chevron-right" label="Próxima avaliação" size={36} onClick={()=>go(1)} style={{borderRadius:"var(--radius-sm)"}}/>
        </div>
      </div>
    </div>
  );
}

function Hero({onLead,onView}){
  return (
    <StripePanel bars style={{borderBottom:"var(--border-hairline) solid var(--border-subtle)"}}>
      <img src="assets/equipe-faixas-pretas.png" alt="Equipe de faixas-pretas da DEO Jiu-Jitsu"
        className="absolute inset-0 w-full h-full" style={{zIndex:0,objectFit:"cover",objectPosition:"center 20%",
          filter:"var(--photo-filter)"}}/>
      <div aria-hidden="true" className="absolute inset-0" style={{zIndex:0,
        background:"linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.25) 100%)"}}/>
      <div className="relative grid grid-cols-1 gap-8 lg:gap-[var(--space-8)] items-center"
        style={{zIndex:1,maxWidth:"var(--container)",margin:"0 auto"}}>
        <div className="flex flex-col gap-4 lg:gap-[var(--space-5)] max-w-[560px] px-4 py-8 lg:px-[var(--gutter)] lg:py-[var(--space-9)]">
          <div style={{display:"flex",flexDirection:"column",gap:2}}>
            <span style={{fontFamily:"var(--font-display)",fontSize:26,lineHeight:1,
              letterSpacing:"var(--tracking-display)",textTransform:"uppercase"}}>
              DEO <span style={{color:"var(--deo-red)"}}>JIU-JITSU</span></span>
            <span style={{fontFamily:"var(--font-condensed)",fontSize:13,fontWeight:700,
              letterSpacing:"var(--tracking-eyebrow)",textTransform:"uppercase",color:"var(--text-primary)"}}>
              Taguatinga-DF</span>
          </div>
          <Pill tone="outline" size="sm" style={{fontSize:12,padding:"6px 16px"}}>Aula experimental gratuita</Pill>
          <h1 style={{margin:0,fontFamily:"var(--font-display)",fontSize:"clamp(34px,8vw,84px)",
            lineHeight:1.02,letterSpacing:"var(--tracking-display)",textTransform:"uppercase",
            textWrap:"balance"}}>
            <span style={{display:"block"}}>Seg, qua e sex</span>
            <span style={{display:"block",marginTop:8,color:"var(--deo-red)"}}>às 20:00</span></h1>
          <a href="https://www.google.com/maps/search/?api=1&query=Deo+Jiu-Jitsu+Taguatinga" target="_blank" rel="noopener"
            style={{fontFamily:"var(--font-condensed)",fontSize:13,fontWeight:700,letterSpacing:"var(--tracking-label)",
              textTransform:"uppercase",color:"var(--text-primary)",display:"flex",alignItems:"center",gap:6}}>
            <span style={{color:"var(--deo-red)"}}>★</span> 5,0
            <span style={{color:"var(--text-muted)",fontWeight:400}}>(26 avaliações no Google)</span></a>
          <p className="max-w-[40ch]" style={{margin:0,fontSize:"var(--text-body)",lineHeight:"var(--leading-body)",
            color:"var(--text-secondary)",textWrap:"pretty"}}>
            Jiu-jitsu em Taguatinga para quem nunca treinou e para quem já compete. Chegue 10 minutos antes — o kimono a gente empresta.</p>
          <div className="flex flex-col lg:flex-row gap-3">
            <Button size="lg" onClick={onLead} className="!w-full lg:!w-auto" style={{borderRadius:"var(--radius-sm)"}}>Agendar aula experimental</Button>
            <Button size="lg" variant="outline" onClick={()=>onView("horarios")} className="!w-full lg:!w-auto" style={{borderRadius:"var(--radius-sm)"}}>Ver horários</Button>
          </div>
          <div className="grid grid-cols-3 gap-3 lg:flex lg:gap-[var(--space-8)] mt-2 lg:mt-[var(--space-4)]">
            <StatBlock value="3" label="treinos por semana"/>
            <StatBlock value="20:00" label="horário único"/>
            <StatBlock value="Todos" label="níveis na mesma turma"/>
          </div>
        </div>
      </div>
    </StripePanel>
  );
}

function HomeWhy(){
  const items=[
    ["01","Tatame amplo e arejado"],
    ["02","Professores registrados e qualificados"],
    ["03","Turma mista — juvenis e adultos"],
    ["04","Ambiente de família, disciplina e respeito"]];
  return (
    <section style={{background:"var(--surface-page)"}}>
      <div className="max-w-[var(--container)] mx-auto px-4 pt-8 lg:px-[var(--gutter)] lg:pt-[var(--space-7)]">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-[var(--space-4)]">
          {items.map(([n,label])=>(
            <div key={n} className="flex flex-col gap-2 p-4 lg:gap-[var(--space-3)] lg:p-[var(--space-6)]"
              style={{border:"var(--border-hairline) solid var(--border-subtle)",borderRadius:"var(--radius-sm)"}}>
              <span style={{fontFamily:"var(--font-display)",fontSize:20,letterSpacing:"var(--tracking-display)",
                color:"var(--deo-red)"}}>{n}</span>
              <span style={{fontSize:"var(--text-small)",lineHeight:"var(--leading-body)",
                color:"var(--text-primary)"}}>{label}</span>
            </div>))}
        </div>
      </div>
    </section>
  );
}

function HomeHistory(){
  const milestones=[
    {year:"2011",title:"Fundação do núcleo de Taguatinga",
      text:"O núcleo de Taguatinga é fundado com autorização do Grande Mestre Deoclécio de Paulo (Deo), da linhagem do Grande Mestre Oswaldo Fadda — um dos pioneiros do jiu-jitsu brasiliense."},
    {year:"Hoje",title:"Turma mista, seg · qua · sex",
      text:"Prof. Bida, faixa-preta 4º grau e árbitro conceituado pela CBJJ, segue os ensinamentos do Mestre Deo à frente das aulas em Taguatinga-DF."}];
  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="Nossa história" accentWord="dias atuais" size="clamp(28px,7vw,40px)">De 2011 até os</SectionTitle>
        <div className="flex flex-col max-w-[640px]">
          {milestones.map((m,i)=>(
            <div key={m.year} className="flex gap-4 lg:gap-5">
              <div className="flex flex-col items-center" style={{width:14,flex:"0 0 auto"}}>
                <span style={{width:14,height:14,borderRadius:"var(--radius-pill)",background:"var(--deo-red)",flex:"0 0 auto"}}/>
                {i<milestones.length-1&&
                  <span aria-hidden="true" style={{flex:"1 1 auto",width:2,marginTop:4,marginBottom:4,
                    background:"var(--border-subtle)"}}/>}
              </div>
              <div className="flex flex-col gap-3" style={{paddingBottom:i<milestones.length-1?"var(--space-7)":0}}>
                <span style={{fontFamily:"var(--font-display)",fontSize:28,letterSpacing:"var(--tracking-display)",
                  color:"var(--deo-red)",lineHeight:1}}>{m.year}</span>
                <h3 style={{margin:0,fontFamily:"var(--font-display)",fontSize:"var(--text-title)",
                  letterSpacing:"var(--tracking-display)",textTransform:"uppercase"}}>{m.title}</h3>
                <p style={{margin:0,fontSize:"var(--text-small)",lineHeight:"var(--leading-body)",
                  color:"var(--text-secondary)"}}>{m.text}</p>
              </div>
            </div>))}
        </div>
      </div>
    </section>
  );
}

function HomeClasses({onView}){
  const turmas=[["Turma mista","Todos os níveis treinam juntos. Seg, Qua e Sex às 20:00.","horarios","Ver horários"],
    ["Nunca treinou?","Sem experiência necessária. O kimono a gente empresta.","contato","Agendar aula"],
    ["Outras turmas","A confirmar com a academia.","contato","Falar com a gente"]];
  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)]">
        <SectionTitle eyebrow="Turmas" accentWord="treinar" size="clamp(28px,7vw,40px)">Onde você pode</SectionTitle>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-[var(--space-4)]">
          {turmas.map(([t,d,dest,cta],i)=>(
            <Card key={t} accent={i===0} interactive onClick={()=>onView(dest)}
              style={{display:"flex",flexDirection:"column",gap:"var(--space-3)",cursor:"pointer",borderRadius:"var(--radius-sm)"}}>
              <h3 style={{margin:0,fontFamily:"var(--font-display)",fontSize:"var(--text-title)",
                letterSpacing:"var(--tracking-display)",textTransform:"uppercase",lineHeight:"var(--leading-title)"}}>{t}</h3>
              <p style={{margin:0,fontSize:"var(--text-small)",lineHeight:"var(--leading-body)",color:"var(--text-secondary)"}}>{d}</p>
              <span style={{marginTop:"auto",display:"flex",alignItems:"center",gap:6,fontFamily:"var(--font-condensed)",
                fontSize:13,letterSpacing:"var(--tracking-label)",textTransform:"uppercase",color:"var(--text-accent)"}}>
                {cta} <Icon name="arrow-right" size={14}/></span>
            </Card>))}
        </div>
      </div>
    </section>
  );
}

const GALLERY_ITEMS=[
  {type:"image",src:"assets/gallery-01.jpg",alt:"Turma reunida no tatame da DEO Jiu-Jitsu"},
  {type:"image",src:"assets/gallery-02.jpg",alt:"Alunos e professores após o treino"},
  {type:"image",src:"assets/gallery-03.jpg",alt:"Faixas-pretas da equipe DEO"},
  {type:"image",src:"assets/gallery-04.jpg",alt:"Treino em turma na DEO Jiu-Jitsu"},
  {type:"image",src:"assets/gallery-05.jpg",alt:"Equipe completa reunida no tatame"}];

function HomeGallery(){
  const [open,setOpen]=React.useState(null);
  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)]">
        <SectionTitle eyebrow="Galeria" accentWord="tatame" size="clamp(28px,7vw,40px)">Direto do</SectionTitle>
        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-[var(--space-4)]">
          {GALLERY_ITEMS.map((it,i)=>(
            <button key={i} onClick={()=>setOpen(i)} className="relative block"
              style={{aspectRatio:"4 / 5",overflow:"hidden",border:0,padding:0,cursor:"pointer",
                borderRadius:"var(--radius-sm)",background:"var(--surface-raised)"}}>
              <img src={it.type==="video"?it.poster:it.src} alt={it.alt}
                style={{width:"100%",height:"100%",objectFit:"cover",filter:"var(--photo-filter)",display:"block"}}/>
              {it.type==="video"&&
                <span aria-hidden="true" style={{position:"absolute",inset:0,display:"flex",alignItems:"center",
                  justifyContent:"center",background:"rgba(0,0,0,.25)"}}>
                  <span style={{width:52,height:52,borderRadius:"var(--radius-pill)",background:"rgba(0,0,0,.6)",
                    display:"flex",alignItems:"center",justifyContent:"center",backdropFilter:"blur(4px)"}}>
                    <Icon name="play" size={22} color="#fff"/></span></span>}
            </button>))}
        </div>
      </div>
      {open!=null&&
        <div onClick={()=>setOpen(null)} className="fixed inset-0 z-50 flex items-center justify-center p-4"
          style={{background:"rgba(0,0,0,.92)"}}>
          <div onClick={e=>e.stopPropagation()} className="relative w-full" style={{maxWidth:520}}>
            <IconButton icon="x" label="Fechar" variant="ghost" onClick={()=>setOpen(null)}
              style={{position:"absolute",top:-52,right:0,borderRadius:"var(--radius-sm)"}}/>
            {GALLERY_ITEMS[open].type==="video"
              ? <video src={GALLERY_ITEMS[open].src} poster={GALLERY_ITEMS[open].poster} controls autoPlay muted playsInline
                  style={{width:"100%",maxHeight:"80vh",display:"block",borderRadius:"var(--radius-sm)"}}/>
              : <img src={GALLERY_ITEMS[open].src} alt={GALLERY_ITEMS[open].alt}
                  style={{width:"100%",maxHeight:"80vh",objectFit:"contain",display:"block",borderRadius:"var(--radius-sm)"}}/>}
          </div>
        </div>}
    </section>
  );
}

function HomeNext({onView}){
  const today=new Date().getDay();
  const rows=[["Segunda",1],["Quarta",3],["Sexta",5]];
  return (
    <section className="deo-stripes">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-[var(--space-8)] items-center
        max-w-[var(--container)] mx-auto px-4 py-10 lg:px-[var(--gutter)] lg:py-[var(--section-y-tight)]">
        <div className="flex flex-col gap-4 lg:gap-[var(--space-5)]">
          <SectionTitle eyebrow="Grade da semana" accentWord="20:00" size="clamp(28px,7vw,40px)">Um treino, sempre às</SectionTitle>
          <div>
            {rows.map(([turma,dow])=>(
              <ScheduleRow key={turma} time="20:00" turma={turma} coach="Prof. Bida" days="Turma mista" active={today===dow}/>
            ))}
          </div>
          <Button variant="outline" onClick={()=>onView("horarios")} style={{alignSelf:"flex-start",borderRadius:"var(--radius-sm)"}}>Grade completa</Button>
        </div>
        <TestimonialCarousel/>
      </div>
    </section>
  );
}

Object.assign(window,{Hero,HomeWhy,HomeHistory,HomeClasses,HomeGallery,HomeNext});