const { Card, Button, Icon, Input, Select, SectionHeading, ContactBlock, Toast } = window.VeterinariaSanPatricioDesignSystem_c9a149;

const MAP_SRC = 'https://www.google.com/maps?q=Veterinaria+San+Patricio,+Los+Fresnos+Manzana+19+casa+31,+M5539+Las+Heras,+Mendoza&output=embed';

function ContactSection() {
  const [sent, setSent] = React.useState(false);
  return (
    <Section tone="var(--surface-sunken)">
      <SectionHeading align="center" eyebrow="Contacto" title="Escribinos y coordinamos el turno." lead="Completá el formulario o mandanos un WhatsApp. Para urgencias, llamanos antes de venir." />
      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 'var(--space-8)', marginTop: 'var(--space-12)', alignItems: 'start' }}>
        <Card padding="var(--space-8)">
          {sent ? (
            <Toast tone="success" title="Mensaje enviado" message="Te respondemos por WhatsApp dentro del día." icon={<Icon name="check" size={15} />} onClose={() => setSent(false)} />
          ) : (
            <>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)' }}>
                <Input label="Tu nombre" placeholder="Ej. Julieta" icon={<Icon name="user" size={18} />} />
                <Input label="WhatsApp" placeholder="261 000-0000" icon={<Icon name="phone" size={18} />} />
                <Input label="Nombre de tu mascota" placeholder="Ej. Rufo" icon={<Icon name="dog" size={18} />} />
                <Select label="Motivo" options={[{ value: 'c', label: 'Consulta clínica' }, { value: 'v', label: 'Vacunatorio' }, { value: 'q', label: 'Cirugía' }, { value: 'p', label: 'Peluquería' }, { value: 'o', label: 'Otro' }]} />
              </div>
              <div style={{ marginTop: 'var(--space-5)' }}>
                <label style={{ display: 'block', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-strong)', marginBottom: 'var(--space-2)' }}>Contanos qué le pasa</label>
                <textarea rows={4} placeholder="Desde cuándo, qué síntomas notaste, si come normal…" style={{ width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-base)', color: 'var(--text-strong)', padding: '12px 14px', borderRadius: 'var(--radius-input)', border: 'var(--border-width) solid var(--border-default)', outline: 'none', resize: 'vertical' }} />
              </div>
              <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
                <Button size="lg" onClick={() => setSent(true)}>Enviar mensaje</Button>
                <Button size="lg" variant="teal" iconLeft={<Icon name="whatsapp" strokeSet="simple" size={20} />} onClick={() => window.open(window.VSP_WA_URL, '_blank', 'noopener')}>WhatsApp</Button>
              </div>
            </>
          )}
        </Card>
        <div style={{ display: 'grid', gap: 'var(--space-6)' }}>
          <Card padding="var(--space-6)">
            <Eyebrow>Dónde estamos</Eyebrow>
            <div style={{ marginTop: 'var(--space-4)' }}><ContactBlock /></div>
          </Card>
          <Card padding="var(--space-6)">
            <Eyebrow>Horarios</Eyebrow>
            <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginTop: 'var(--space-4)' }}>
              <span style={{ width: 40, height: 40, flex: '0 0 auto', borderRadius: 'var(--radius-circle)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'grid', placeItems: 'center' }}>
                <Icon name="clock" size={19} />
              </span>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                Abrimos a las <strong style={{ color: 'var(--text-strong)' }}>10:00</strong>.<br />
                <span style={{ color: 'var(--text-muted)' }}>Consultá la grilla completa por WhatsApp.</span>
              </div>
            </div>
          </Card>
          <Card padding="0" style={{ overflow: 'hidden' }}>
            <iframe title="Mapa — Veterinaria San Patricio" src={MAP_SRC} loading="lazy" style={{ display: 'block', width: '100%', height: 210, border: 'none' }}></iframe>
          </Card>
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { ContactSection });