/* Contact details, illustrated map, message form. */
function Contact(props) {
  const { SectionHead, InfoRow, SocialLink, Card, Field, Input, Select, Textarea, Button } = window.PE;
  const t = props.t;
  const b = window.PE_CONTENT.business;
  const [sent, setSent] = React.useState(false);
  return (
    <Section id="contact" alt>
      <SectionHead align="center" kicker={t.contact.kicker} title={t.contact.title} lead={t.contact.lead} />
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--gap-grid)', alignItems:'start'}}>
        <div style={{display:'grid', gap:'var(--space-6)'}}>
          <ul style={{margin:0, padding:0, display:'grid', gap:'var(--space-5)'}}>
            <InfoRow icon="📍" label={t.contact.addr} value={b.address} href={b.maps} target="_blank" />
            <InfoRow icon="📞" label={t.contact.phone} value={b.phoneLabel} href={b.phone} />
            <InfoRow icon="✉️" label="E-mail" value={b.email} href={'mailto:' + b.email} />
            <InfoRow icon="🕒" label={t.contact.hours} value={t.contact.hoursDetail} />
          </ul>
          <div style={{display:'flex', gap:'var(--space-3)'}}>
            <SocialLink network="whatsapp" href={b.whatsapp} />
            <SocialLink network="instagram" href={b.instagram} />
            <SocialLink network="facebook" href={b.facebook} />
            <SocialLink network="map" href={b.maps} />
          </div>
          <a href={b.maps} target="_blank" rel="noopener" style={{display:'block', borderRadius:'var(--radius-lg)', overflow:'hidden', boxShadow:'var(--shadow-card)'}}>
            <img src="../../assets/illustrations/map-piedra-redonda.png" alt={t.contact.addr} style={{width:'100%', display:'block'}} />
          </a>
        </div>
        <Card radius="xl" padding="var(--pad-card-poster)">
          <h3 style={{margin:'0 0 var(--space-6)', font:'var(--type-h3)', color:'var(--text-strong)'}}>{t.contact.form.title}</h3>
          {sent ? (
            <p style={{margin:0, font:'var(--type-lead)', color:'var(--state-success)'}}>{t.contact.form.sent}</p>
          ) : (
            <form style={{display:'grid', gap:'var(--space-4)'}} onSubmit={function (e) { e.preventDefault(); setSent(true); }}>
              <Field label={t.contact.form.name} required><Input name="name" required minLength={2} /></Field>
              <Field label={t.contact.form.email} required><Input type="email" name="email" required /></Field>
              <Field label={t.contact.form.phone}><Input type="tel" name="phone" /></Field>
              <Field label={t.contact.form.topic}><Select name="topic" options={t.contact.form.topics} /></Field>
              <Field label={t.contact.form.message} hint={t.contact.form.hint}><Textarea name="message" rows={4} required /></Field>
              <Button variant="primary" size="lg" block type="submit">{t.cta.send}</Button>
            </form>
          )}
        </Card>
      </div>
    </Section>
  );
}

Object.assign(window, { Contact });