const { Logo, Button, Icon, IconButton, Pill } = window.DEOJiuJitsuDesignSystem_214613;

function SiteNav({view,onView,onLead}){
  const items=[["home","Início"],["horarios","Horários"],["turmas","Turmas & planos"],["contato","Contato"]];
  const [open,setOpen]=React.useState(false);
  const go=id=>{onView(id);setOpen(false);};
  return (
    <header className="sticky top-0 z-20" style={{background:"rgba(0,0,0,.92)",backdropFilter:"blur(8px)",
      borderBottom:"var(--border-hairline) solid var(--border-subtle)"}}>
      <div className="max-w-[var(--container)] mx-auto flex items-center gap-4 lg:gap-[var(--space-6)] px-4 lg:px-[var(--gutter)] py-3">
        <a href="#" onClick={e=>{e.preventDefault();go("home");}} className="flex">
          <Logo variant="full" height={44}/></a>
        <nav className="hidden lg:flex gap-[var(--space-5)] ml-[var(--space-4)]">
          {items.map(([id,label])=>(
            <a key={id} href={"#"+id} onClick={e=>{e.preventDefault();go(id);}}
              style={{fontFamily:"var(--font-condensed)",fontSize:15,fontWeight:600,letterSpacing:"var(--tracking-label)",
                textTransform:"uppercase",color:view===id?"var(--deo-red)":"var(--text-primary)",
                paddingBottom:4,borderBottom:`2px solid ${view===id?"var(--deo-red)":"transparent"}`,
                transition:"var(--transition-control)"}}>{label}</a>))}
        </nav>
        <div className="hidden lg:flex items-center gap-[var(--space-3)] ml-auto">
          <span style={{fontFamily:"var(--font-condensed)",fontSize:13,letterSpacing:"var(--tracking-label)",
            textTransform:"uppercase",color:"var(--text-muted)",display:"flex",alignItems:"center",gap:6}}>
            <Icon name="map-pin" size={14} color="var(--deo-red)"/>Taguatinga-DF</span>
          <Button size="sm" onClick={onLead} style={{borderRadius:"var(--radius-sm)"}}>Aula experimental</Button>
        </div>
        <div className="flex lg:hidden items-center gap-3 ml-auto">
          <Button size="sm" onClick={onLead} style={{borderRadius:"var(--radius-sm)"}}>Aula experimental</Button>
          <button aria-label={open?"Fechar menu":"Abrir menu"} onClick={()=>setOpen(o=>!o)} className="p-1">
            <Icon name={open?"x":"menu"} size={24} color="var(--text-primary)"/>
          </button>
        </div>
      </div>
      <div className={(open?"flex":"hidden")+" lg:hidden flex-col gap-1 px-4 pb-4"}
        style={{borderTop:"var(--border-hairline) solid var(--border-subtle)"}}>
        {items.map(([id,label])=>(
          <a key={id} href={"#"+id} onClick={e=>{e.preventDefault();go(id);}}
            style={{fontFamily:"var(--font-condensed)",fontSize:16,fontWeight:600,letterSpacing:"var(--tracking-label)",
              textTransform:"uppercase",color:view===id?"var(--deo-red)":"var(--text-primary)",
              padding:"12px 0"}}>{label}</a>))}
        <span style={{fontFamily:"var(--font-condensed)",fontSize:13,letterSpacing:"var(--tracking-label)",
          textTransform:"uppercase",color:"var(--text-muted)",display:"flex",alignItems:"center",gap:6,
          padding:"8px 0"}}>
          <Icon name="map-pin" size={14} color="var(--deo-red)"/>Taguatinga-DF</span>
      </div>
    </header>
  );
}

function SiteFooter(){
  return (
    <footer className="deo-stripes" style={{borderTop:"var(--border-brand) solid var(--rule-brand)"}}>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.2fr_1fr_1fr] gap-8 lg:gap-[var(--space-7)] max-w-[var(--container)] mx-auto px-4 py-10 lg:px-[var(--gutter)] lg:py-[var(--space-8)]">
        <div className="flex flex-col items-center text-center lg:items-start lg:text-left sm:col-span-2 lg:col-span-1" style={{gap:"var(--space-4)"}}>
          <Logo variant="full" height={78} className="!self-center lg:!self-start"/>
          <p style={{margin:0,fontSize:"var(--text-small)",lineHeight:"var(--leading-body)",color:"var(--text-secondary)",maxWidth:"34ch"}}>
            Jiu-jitsu em Taguatinga-DF. Treino às segundas, quartas e sextas, às 20:00.</p>
          <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>
        </div>
        <div className="flex flex-col items-center text-center lg:items-start lg:text-left" style={{gap:"var(--space-3)"}}>
          <span style={{fontFamily:"var(--font-condensed)",fontSize:13,fontWeight:600,letterSpacing:"var(--tracking-eyebrow)",
            textTransform:"uppercase",color:"var(--text-accent)"}}>Onde treinamos</span>
          <span style={{fontSize:"var(--text-small)",color:"var(--text-secondary)"}}>Taguatinga-DF<br/>
            <a href="https://www.google.com/maps?q=-15.841997,-48.0557447" target="_blank" rel="noopener">Ver no mapa</a></span>
          <span style={{fontSize:"var(--text-small)",color:"var(--text-secondary)"}}>Seg • Qua • Sex — 20:00<br/>Turma mista, todos os níveis</span>
        </div>
        <div className="flex flex-col items-center text-center lg:items-start lg:text-left" style={{gap:"var(--space-3)"}}>
          <span style={{fontFamily:"var(--font-condensed)",fontSize:13,fontWeight:600,letterSpacing:"var(--tracking-eyebrow)",
            textTransform:"uppercase",color:"var(--text-accent)"}}>Fale com a gente</span>
          <a href="https://www.instagram.com/deojiujitsutaguatinga/" target="_blank" rel="noopener" style={{fontSize:"var(--text-small)"}}>@deojiujitsutaguatinga</a>
          <a href="https://wa.me/5561999740365?text=Oi!%20Quero%20agendar%20uma%20aula%20experimental%20no%20DEO%20Jiu-Jitsu." target="_blank" rel="noopener" style={{fontSize:"var(--text-small)"}}>Fale no WhatsApp</a>
          <div className="flex justify-center lg:justify-start" style={{gap:"var(--space-2)",marginTop:"var(--space-2)"}}>
            <IconButton icon="instagram" label="Instagram" style={{borderRadius:"var(--radius-sm)"}} onClick={()=>window.open("https://www.instagram.com/deojiujitsutaguatinga/","_blank")}/>
            <IconButton icon="message-circle" label="WhatsApp" style={{borderRadius:"var(--radius-sm)"}} onClick={()=>window.open("https://wa.me/5561999740365?text=Oi!%20Quero%20agendar%20uma%20aula%20experimental%20no%20DEO%20Jiu-Jitsu.","_blank")}/>
          </div>
        </div>
      </div>
      <div style={{borderTop:"var(--border-hairline) solid var(--border-subtle)"}}>
        <div className="flex flex-wrap justify-center text-center lg:justify-between lg:text-left gap-2 max-w-[var(--container)] mx-auto px-4 py-4 lg:px-[var(--gutter)]"
          style={{fontFamily:"var(--font-condensed)",fontSize:13,
          letterSpacing:"var(--tracking-label)",textTransform:"uppercase",color:"var(--text-muted)"}}>
          <span>© DEO Jiu-Jitsu</span><span>Taguatinga-DF · <span style={{color:"var(--deo-red)"}}>@deojiujitsutaguatinga</span></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window,{SiteNav,SiteFooter});