/* global React */
const { Icon, Button, SectionHeader } = window.UI;

const LinkedInGlyph = (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="currentColor"
    aria-hidden="true"
  >
    <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V23h-4V8zm7.5 0h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.6c0-1.57-.03-3.6-2.2-3.6-2.2 0-2.53 1.72-2.53 3.49V23h-4V8z" />
  </svg>
);
const InstagramGlyph = (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    aria-hidden="true"
  >
    <rect x="2" y="2" width="20" height="20" rx="5.5" />
    <circle cx="12" cy="12" r="4.2" />
    <circle cx="17.4" cy="6.6" r="1.2" fill="currentColor" stroke="none" />
  </svg>
);

const CONTACT_ROWS = [
  {
    icon: "mail",
    label: "hola@summitlab.com.ar",
    href: "mailto:hola@summitlab.com.ar",
  },
  { icon: "message-circle", label: "WhatsApp", href: "#" },
  { svg: LinkedInGlyph, label: "LinkedIn", href: "#" },
  { svg: InstagramGlyph, label: "@summitlab.io", href: "#" },
  { icon: "map-pin", label: "Colegiales, CABA", href: "#" },
];

function Contacto() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section className="sl-contact" id="contacto">
      <div className="sl-wrap">
        <SectionHeader
          eyebrow="Trabajemos juntos"
          title={
            <span>
              Hablemos
              <br />
              de tu proyecto
            </span>
          }
          lead="¿Tu empresa está creciendo y necesita estructura? Convertimos ese potencial en una organización escalable."
          dark={true}
          bar={false}
        />

        <div className="sl-contact-grid">
          {!sent ? (
            <form className="sl-cform" onSubmit={submit}>
              <div className="sl-field">
                <label>Nombre</label>
                <input required placeholder="Tu nombre" />
              </div>
              <div className="sl-field">
                <label>Email</label>
                <input required type="email" placeholder="tu@email.com" />
              </div>
              <div className="sl-field">
                <label>Empresa</label>
                <input placeholder="Nombre de tu empresa" />
              </div>
              <div className="sl-field">
                <label>Proyecto</label>
                <textarea
                  rows="4"
                  placeholder="¿Qué desafíos está enfrentando tu empresa?"
                />
              </div>
              <Button icon="send">Enviar mensaje</Button>
            </form>
          ) : (
            <div className="sl-csent">
              <div className="sl-csent-ico">
                <Icon name="check" size={32} />
              </div>
              <h3>¡Mensaje enviado!</h3>
              <p>
                Gracias por escribirnos. Un operador de Summit Lab te va a
                contactar en menos de 24 hs.
              </p>
            </div>
          )}

          <div>
            <div className="sl-cinfo">
              {CONTACT_ROWS.map((r, i) => (
                <a className="sl-cinfo-row" key={i} href={r.href}>
                  <span className="sl-cinfo-ico">
                    {r.svg ? r.svg : <Icon name={r.icon} size={20} />}
                  </span>
                  <span>{r.label}</span>
                </a>
              ))}
            </div>
            <div className="sl-cquote">
              <p>
                "Las compañías más valiosas del futuro no serán las más grandes.
                Serán las que mejor ejecuten."
              </p>
              <span className="by">— Summit Lab</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contacto = Contacto;