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

const GROUPS = [
  {
    slot: 'vsp-serv-1', photo: 'gato-naranja-consulta.jpg', icon: 'stethoscope', accent: 'green',
    title: 'Clínica y prevención',
    lead: 'Controles, plan sanitario y seguimiento a lo largo de toda la vida.',
    items: ['Consulta clínica', 'Vacunatorio', 'Antiparasitarios', 'Control geriátrico', 'Libreta sanitaria'],
  },
  {
    slot: 'vsp-serv-2', photo: 'microscopio-muestra.jpg', icon: 'microscope', accent: 'teal',
    title: 'Cirugía y diagnóstico',
    lead: 'Quirófano equipado y estudios complementarios en el día.',
    items: ['Castraciones', 'Tejidos blandos', 'Traumatología', 'Ecografía', 'Radiología', 'Laboratorio'],
  },
  {
    slot: 'vsp-serv-3', icon: 'shopping-bag', accent: 'lime',
    title: 'Pet-shop, farmacia y estética',
    lead: 'Alimento, medicación y peluquería sin salir de la veterinaria.',
    items: ['Alimento balanceado', 'Accesorios y juguetes', 'Medicación bajo receta', 'Peluquería', 'Baños medicados'],
  },
];

const ACCENTS = { green: ['var(--green-50)', 'var(--green-700)'], teal: ['var(--teal-50)', 'var(--teal-700)'], lime: ['var(--lime-50)', 'var(--lime-700)'] };

function GroupCard({ g, i, go }) {
  const [bg, fg] = ACCENTS[g.accent];
  const ref = React.useRef(null);
  const inView = useInView(ref);
  return (
    <Reveal mode="up" delay={i * 130}>
      <Card padding="0" className="vsp-lift vsp-hoverable" style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', height: '100%' }}>
        <div className="vsp-zoom" style={{ overflow: 'hidden' }}>
          <Slot id={g.slot} src={g.photo} height={190} radius={0} placeholder={'Foto — ' + g.title} />
        </div>
        <div ref={ref} style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <span className="vsp-float" style={{ width: 48, height: 48, borderRadius: 'var(--radius-circle)', background: bg, color: fg, display: 'grid', placeItems: 'center', animationDelay: i * 0.6 + 's' }}>
            <Icon name={g.icon} size={22} />
          </span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h3)', lineHeight: 'var(--lh-h3)', margin: 'var(--space-4) 0 var(--space-2)' }}>{g.title}</h3>
          <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', margin: 0 }}>{g.lead}</p>
          <ul style={{ listStyle: 'none', margin: 'var(--space-5) 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
            {g.items.map((it, k) => (
              <li key={it} style={{
                display: 'flex', gap: 'var(--space-2)', alignItems: 'center',
                fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', color: 'var(--text-body)',
                opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateX(-14px)',
                transition: 'opacity 420ms var(--ease-soft) ' + (k * 70 + 180) + 'ms, transform 420ms var(--ease-soft) ' + (k * 70 + 180) + 'ms',
              }}>
                <span style={{ color: fg, display: 'flex' }}><Icon name="check" size={16} /></span>{it}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 'auto', paddingTop: 'var(--space-6)' }}>
            <Button variant="secondary" size="sm" iconRight={<span className="vsp-arrow" style={{ display: 'flex' }}><Icon name="arrow-right" size={16} /></span>} onClick={() => go('servicios')}>Ver detalle</Button>
          </div>
        </div>
      </Card>
    </Reveal>
  );
}

function ServiceGroups({ go }) {
  return (
    <Section>
      <Reveal mode="up">
        <SectionHeading align="center" eyebrow="Servicios" title="Todo lo que tu compañero necesita." lead="Tres áreas que cubren la salud, el diagnóstico y el día a día de tu mascota." />
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-12)', alignItems: 'stretch' }}>
        {GROUPS.map((g, i) => <GroupCard key={g.title} g={g} i={i} go={go} />)}
      </div>
      <Reveal mode="up" delay={160} style={{ display: 'grid', placeItems: 'center', marginTop: 'var(--space-10)' }}>
        <span className="vsp-hoverable">
          <Button size="lg" variant="ghost" iconRight={<span className="vsp-arrow" style={{ display: 'flex' }}><Icon name="arrow-right" size={18} /></span>} onClick={() => go('servicios')}>Ver todos los servicios</Button>
        </span>
      </Reveal>
    </Section>
  );
}
Object.assign(window, { ServiceGroups });