const { SectionHeading, ServiceCard, Tabs, Card, Badge, Button, Icon } = window.VeterinariaSanPatricioDesignSystem_c9a149;

const CATALOG = {
  clinica: [
    { icon: 'syringe', title: 'Vacunatorio', description: 'Quíntuple, antirrábica, triple felina y refuerzos anuales.', accent: 'teal' },
    { icon: 'stethoscope', title: 'Consulta clínica', description: 'Diagnóstico general, control de peso y chequeo geriátrico.', accent: 'green' },
    { icon: 'microscope', title: 'Estudios complementarios', description: 'Análisis de sangre, ecografía y radiología digital.', accent: 'lime' },
    { icon: 'shield-check', title: 'Cirugías', description: 'Castraciones, tejidos blandos y traumatología programada.', accent: 'green' },
  ],
  petshop: [
    { icon: 'shopping-bag', title: 'Alimento balanceado', description: 'Líneas premium para cachorros, adultos y dietas especiales.', accent: 'lime' },
    { icon: 'bone', title: 'Accesorios', description: 'Collares, camas, transportadoras y juguetes.', accent: 'teal' },
    { icon: 'pill', title: 'Farmacia', description: 'Medicación bajo receta y antiparasitarios internos y externos.', accent: 'green' },
  ],
  estetica: [
    { icon: 'scissors', title: 'Peluquería', description: 'Baño, corte de raza, deslanado y corte de uñas.', accent: 'lime' },
    { icon: 'heart', title: 'Spa y cuidado', description: 'Baños medicados y tratamientos dermatológicos.', accent: 'teal' },
  ],
};

function ServicesScreen({ go }) {
  const [tab, setTab] = React.useState('clinica');
  return (
    <main style={{ padding: 'var(--section-y) var(--space-8)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHeading eyebrow="Servicios" title="Atención integral para mascotas." lead="Elegí un área para ver el detalle. Todos los servicios se coordinan con turno previo." />
        <div style={{ marginTop: 'var(--space-8)' }}>
          <Tabs value={tab} onChange={setTab} items={[{ value: 'clinica', label: 'Clínica' }, { value: 'petshop', label: 'Pet-shop y farmacia' }, { value: 'estetica', label: 'Estética' }]} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)' }}>
          {CATALOG[tab].map((s) => <ServiceCard key={s.title} {...s} onClick={() => go('turnos')} />)}
        </div>
        <Card tone="brand" style={{ marginTop: 'var(--space-12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-8)' }}>
          <div>
            <Badge tone="green">Urgencias</Badge>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h3)', margin: 'var(--space-3) 0 var(--space-2)' }}>¿Es una urgencia?</h3>
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', margin: 0 }}>Llamanos antes de venir así preparamos la sala.</p>
          </div>
          <Button variant="teal" size="lg" iconLeft={<Icon name="phone" size={20} />}>0261 373-7341</Button>
        </Card>
      </div>
    </main>
  );
}