const { SectionTitle, Input, Select, Checkbox, Button, Card, StripePanel, Pill, Icon, PhotoFrame } = window.DEOJiuJitsuDesignSystem_214613;

function ContactPage(){
  const [sent,setSent]=React.useState(false);
  const [form,setForm]=React.useState({nome:"",zap:""});
  return (
    <section className="deo-stripes">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-[var(--space-8)] items-start
        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="Contato" accentWord="experimental" size="clamp(28px,7vw,40px)">Agende sua aula</SectionTitle>
          {sent
            ? <Card accent style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",borderRadius:"var(--radius-sm)"}}>
                <Pill size="sm">Pedido enviado</Pill>
                <p style={{margin:0,fontSize:"var(--text-body)",lineHeight:"var(--leading-body)"}}>
                  Valeu, {form.nome||"atleta"}. Chamamos você no WhatsApp para confirmar o horário.</p>
                <Button variant="outline" onClick={()=>setSent(false)} style={{borderRadius:"var(--radius-sm)"}}>Enviar outro</Button>
              </Card>
            : <form onSubmit={e=>{e.preventDefault();setSent(true);}}
                style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",maxWidth:460}}>
                <Input label="Nome" placeholder="Seu nome" required value={form.nome}
                  onChange={e=>setForm({...form,nome:e.target.value})}/>
                <Input label="WhatsApp" type="tel" placeholder="(61) 9…" required value={form.zap}
                  onChange={e=>setForm({...form,zap:e.target.value})} hint="Chamamos você em até 1 dia útil."/>
                <Select label="Dia" options={["Segunda — 20:00","Quarta — 20:00","Sexta — 20:00"]}/>
                <Checkbox label="Primeira vez no jiu-jitsu"/>
                <Button type="submit" size="lg" style={{borderRadius:"var(--radius-sm)"}}>Agendar aula experimental</Button>
                <Button variant="outline" onClick={()=>window.open("https://wa.me/5561999740365?text=Oi!%20Quero%20agendar%20uma%20aula%20experimental%20no%20DEO%20Jiu-Jitsu.","_blank")} style={{borderRadius:"var(--radius-sm)"}}>
                  <Icon name="message-circle" size={16}/>Falar no WhatsApp</Button>
              </form>}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 mt-2 lg:mt-[var(--space-4)]">
            {[["map-pin","Taguatinga-DF","https://www.google.com/maps?q=-15.841997,-48.0557447"],["instagram","@deojiujitsutaguatinga","https://www.instagram.com/deojiujitsutaguatinga/"],["clock","Seg • Qua • Sex — 20:00",null],["message-circle","Fale no WhatsApp","https://wa.me/5561999740365?text=Oi!%20Quero%20agendar%20uma%20aula%20experimental%20no%20DEO%20Jiu-Jitsu."]].map(([ic,tx,href])=>{
              const inner=(<span style={{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-condensed)",
                fontSize:14,letterSpacing:"var(--tracking-label)",textTransform:"uppercase",
                color:href?"var(--text-primary)":"var(--text-secondary)"}}>
                <Icon name={ic} size={16} color="var(--deo-red)"/>{tx}</span>);
              return href
                ? <a key={tx} href={href} target="_blank" rel="noopener">{inner}</a>
                : <React.Fragment key={tx}>{inner}</React.Fragment>;})}
          </div>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:"var(--space-3)"}}>
          <div style={{position:"relative",aspectRatio:"1 / 1",overflow:"hidden",
            border:"var(--border-hairline) solid var(--border-subtle)",
            borderTop:"var(--border-brand) solid var(--rule-brand)"}}>
            <iframe title="Mapa — DEO Jiu-Jitsu" loading="lazy"
              src="https://www.google.com/maps?q=-15.841997,-48.0557447&z=16&output=embed"
              style={{width:"100%",height:"100%",border:0,filter:"grayscale(.9) invert(.92) contrast(1.05)"}}/>
            <a href="https://www.google.com/maps?q=-15.841997,-48.0557447" target="_blank" rel="noopener"
              style={{position:"absolute",left:"var(--space-5)",bottom:"var(--space-5)"}}>
              <Pill tone="dark"><Icon name="map-pin" size={16} color="var(--deo-red)"/>Como chegar</Pill></a>
          </div>
          <span style={{fontFamily:"var(--font-condensed)",fontSize:13,letterSpacing:"var(--tracking-label)",
            textTransform:"uppercase",color:"var(--text-muted)"}}>Taguatinga-DF · endereço escrito a confirmar</span>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{ContactPage});