const { SectionHeading, Card, ContactBlock, Button, Icon, IconButton, Badge, Tooltip } = 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 ContactScreen() {
  return (
    <main style={{ padding: 'var(--section-y) var(--space-8)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHeading eyebrow="Contacto" title="Estamos en Las Heras." lead="Escribinos por WhatsApp para turnos y consultas. Para urgencias, llamanos." />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', marginTop: 'var(--space-12)' }}>
          <Card padding="var(--space-8)">
            <ContactBlock />
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)' }}>
              <Button variant="teal" iconLeft={<Icon name="whatsapp" strokeSet="simple" size={18} />}>WhatsApp</Button>
              <Tooltip label="veterinaria.sanpatricio"><IconButton variant="outline" label="Instagram"><Icon name="instagram" strokeSet="simple" size={18} /></IconButton></Tooltip>
              <Tooltip label="veterinaria.sanpatricio"><IconButton variant="outline" label="Facebook"><Icon name="facebook" strokeSet="simple" size={18} /></IconButton></Tooltip>
            </div>
          </Card>
          <Card padding="var(--space-8)">
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-700)' }}>Horarios y opiniones</div>
            <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', marginTop: 'var(--space-5)' }}>
              <span style={{ width: 48, height: 48, flex: '0 0 auto', borderRadius: 'var(--radius-circle)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'grid', placeItems: 'center' }}>
                <Icon name="clock" size={22} />
              </span>
              <div style={{ fontFamily: 'var(--font-body)' }}>
                Abrimos a las <strong style={{ color: 'var(--text-strong)' }}>10:00</strong>.<br />
                <span style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Consultá la grilla completa por WhatsApp.</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', marginTop: 'var(--space-5)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-subtle)' }}>
              <span style={{ width: 48, height: 48, flex: '0 0 auto', borderRadius: 'var(--radius-circle)', background: 'var(--teal-50)', color: 'var(--teal-700)', display: 'grid', placeItems: 'center' }}>
                <Icon name="star" size={22} />
              </span>
              <div style={{ fontFamily: 'var(--font-body)' }}>
                <strong style={{ color: 'var(--text-strong)' }}>4,8</strong> sobre 5 en Google<br />
                <span style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>26 opiniones de vecinos de Las Heras.</span>
              </div>
            </div>
            <Badge tone="teal" style={{ marginTop: 'var(--space-6)' }}>Turnos por WhatsApp</Badge>
          </Card>
        </div>
        <Card padding="0" style={{ marginTop: 'var(--space-8)', overflow: 'hidden' }}>
          <iframe title="Mapa — Veterinaria San Patricio" src={MAP_SRC} loading="lazy" style={{ display: 'block', width: '100%', height: 300, border: 'none' }}></iframe>
        </Card>
      </div>
    </main>
  );
}