import React from "react"
import VerticalSpacing from "../../atoms/VerticalSpacing"
import Button from "../../atoms/Button"
import Input from "../../atoms/Input"

const ContactPage = () => (
  <>
    <article>
      <hgroup>
        <h1>
          Inscreva-se para saber mais sobre o <strong>Educodar</strong>
          &nbsp;2020
        </h1>
      </hgroup>
      <form
        action="/quero-aprender/sucesso"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        method="post"
        name="studentInterest"
      >
        <input name="bot-field" type="hidden" />
        <input name="form-name" type="hidden" value="studentInterest" />

        <div>
          <label>
            Qual é seu nome completo?
            <VerticalSpacing size="1x" />
            <Input
              id="name"
              name="name"
              aria-required={true}
              autoCapitalize="words"
              autoComplete="name"
              autoFocus={true}
              maxLength={50}
              minLength={5}
              placeholder="Nome completo"
              type="text"
            />
          </label>
        </div>
        <VerticalSpacing size="2x" />
        <div>
          <label>
            Qual é a sua data de nascimento?
            <VerticalSpacing size="1x" />
            <Input
              id="birthday"
              name="birthday"
              aria-required={true}
              required={true}
              type="date"
            />
          </label>
        </div>
        <VerticalSpacing size="2x" />
        <div>
          <label>
            Qual é seu endereço de e-mail?
            <VerticalSpacing size="1x" />
            <Input
              id="email"
              name="email"
              aria-required={false}
              autoFocus={false}
              placeholder="E-mail"
              type="email"
            />
          </label>
        </div>
        <VerticalSpacing size="2x" />
        <div>
          <label>
            Qual é seu telefone celular?
            <VerticalSpacing size="1x" />
            <Input
              id="tel-national"
              name="tel-national"
              autoComplete="tel-national"
              aria-required={false}
              autoFocus={false}
              placeholder="Telefone com DDD"
              type="tel"
            />
          </label>
        </div>
        <VerticalSpacing size="2x" />
        <div>
          <label>
            Em qual cidade você mora?
            <VerticalSpacing size="1x" />
            <select id="city" name="city" autoComplete="city" autoFocus={false}>
              <option value="">Escolha uma cidade&hellip;</option>
              <option value="BH">Belo Horizonte (MG)</option>
              <option value="POA">Porto Alegre (PR)</option>
              <option value="REC">Recife (PE)</option>
              <option value="SP">São Paulo (SP)</option>
            </select>
          </label>
        </div>
        <VerticalSpacing size="2x" />
        <div>
          <label>
            Em qual bairro você mora?
            <VerticalSpacing size="1x" />
            <Input
              id="address-line3"
              name="address-line3"
              autoCapitalize="words"
              autoComplete="address-line3"
              autoCorrect="on"
              autoFocus={false}
            />
          </label>
        </div>
        <VerticalSpacing size="4x" />
        <Button id="submit" name="submit" type="submit">
          Tenho interesse
        </Button>
      </form>
    </article>
  </>
)

export default ContactPage

@@ -1078,16 +1078,46 @@
 mpleto%22%0A
+              required=%7Btrue%7D%0A
         
@@ -1134,16 +1134,16 @@
 =%22text%22%0A
-
         
@@ -1882,24 +1882,55 @@
 er=%22E-mail%22%0A
+              required=%7Bfalse%7D%0A
             
@@ -2386,16 +2386,47 @@
 om DDD%22%0A
+              required=%7Bfalse%7D%0A
         
@@ -2664,30 +2664,107 @@
 lect
- id=%22city%22 name=%22city%22
+%0A              id=%22city%22%0A              name=%22city%22%0A              aria-required=%7Btrue%7D%0A             
  aut
@@ -2779,16 +2779,30 @@
 e=%22city%22
+%0A             
  autoFoc
@@ -2811,16 +2811,59 @@
 =%7Bfalse%7D
+%0A              required=%7Btrue%7D%0A            
 %3E%0A      
@@ -3443,32 +3443,67 @@
 %22address-line3%22%0A
+              aria-required=%7Btrue%7D%0A
               au
@@ -3597,16 +3597,16 @@
 ct=%22on%22%0A
-
         
@@ -3621,32 +3621,62 @@
 toFocus=%7Bfalse%7D%0A
+              required=%7Btrue%7D%0A
             /%3E%0A 

Change "required" attribute on some inputs