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

const REASONS = [
  'Consultorio, quirófano y laboratorio en el mismo edificio',
  'Plan sanitario con recordatorios por WhatsApp',
  'Manejo de bajo estrés para gatos, con espera separada',
  'Farmacia propia: te vas con la medicación en la mano',
  'Peluquería coordinada con el turno clínico',
  'Atención de urgencias con aviso telefónico previo',
];

const STATS = [
  { to: 4.8, decimals: 1, label: 'en Google' },
  { to: 26, label: 'opiniones' },
  { to: 6, label: 'servicios' },
];

function Testimonial() {
  return (
    <Section tone="var(--surface-sunken)">
      <div style={{ display: 'grid', gridTemplateColumns: '.95fr 1.05fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <Reveal mode="clip">
          <div className="vsp-zoom" style={{ overflow: 'hidden', borderRadius: 'var(--radius-lg)' }}>
            <Slot id="vsp-testimonial" src="perro-salchicha.jpg" height={420} placeholder="Foto — mascota y su familia (900×700)" />
          </div>
        </Reveal>
        <div style={{ position: 'relative' }}>
          <span className="vsp-float-slow" style={{ position: 'absolute', left: -18, top: -54, fontFamily: 'var(--font-body)', fontSize: 140, lineHeight: 1, color: 'var(--green-200)', pointerEvents: 'none' }}>«</span>
          <Reveal mode="right"><Eyebrow>Historias</Eyebrow></Reveal>
          <Reveal mode="right" delay={110}>
            <blockquote style={{ position: 'relative', fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 32, lineHeight: 1.35, color: 'var(--text-strong)', margin: 'var(--space-5) 0 0' }}>
              «Llegamos con Rufo sin poder apoyar la pata y salimos con estudios, diagnóstico y turno de cirugía el mismo día.»
            </blockquote>
          </Reveal>
          <Reveal mode="right" delay={220}>
            <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, color: 'var(--text-muted)', marginTop: 'var(--space-5)' }}>— Julieta, Las Heras</div>
          </Reveal>
          <Reveal mode="right" delay={310}>
            <div className="vsp-hoverable" style={{ marginTop: 'var(--space-8)', display: 'inline-flex' }}>
              <Button variant="secondary" iconRight={<span className="vsp-arrow" style={{ display: 'flex' }}><Icon name="arrow-right" size={16} /></span>}>Leer más historias</Button>
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

function CtaBand({ go }) {
  return (
    <section style={{ position: 'relative', background: 'var(--surface-ink)', padding: 'var(--space-16) var(--space-8)', overflow: 'hidden' }}>
      <img src="../../assets/icon-dog.png" alt="" className="vsp-drift" style={{ position: 'absolute', left: '-2%', bottom: '-18%', width: 220, opacity: .10, pointerEvents: 'none' }} />
      <img src="../../assets/icon-clover.png" alt="" className="vsp-float-slow" style={{ position: 'absolute', right: '4%', top: '-14%', width: 170, opacity: .10, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-12)', flexWrap: 'wrap' }}>
        <Reveal mode="left">
          <div>
            <div style={{ fontFamily: 'var(--font-script)', fontSize: 34, color: 'var(--green-300)', lineHeight: 1 }}>¡Agendá el contacto!</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h2)', color: '#fff', margin: 'var(--space-3) 0 0' }}>
              ¿Tenés una duda sobre tu mascota?
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--gray-300)', margin: 'var(--space-3) 0 0' }}>Escribinos por WhatsApp y te respondemos en el día.</p>
          </div>
        </Reveal>
        <Reveal mode="right" delay={120}>
          <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
            <Button size="lg" variant="teal" iconLeft={<Icon name="whatsapp" strokeSet="simple" size={20} />} onClick={() => window.open(window.VSP_WA_URL, '_blank', 'noopener')}>0261 373-7341</Button>
            <Button size="lg" iconLeft={<Icon name="calendar-days" size={20} />} onClick={() => go('turnos')}>Pedir turno</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function About() {
  return (
    <Section>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <div>
          <Reveal mode="up">
            <SectionHeading eyebrow="La veterinaria" title="Una clínica de barrio, con todo adentro." lead="Somos la veterinaria del Barrio Cementista II: atendemos perros y gatos con la comodidad de tener consultorio, quirófano, laboratorio, farmacia, pet-shop y peluquería en el mismo lugar." />
          </Reveal>
          <div style={{ display: 'flex', gap: 'var(--space-10)', marginTop: 'var(--space-8)' }}>
            {STATS.map((s, i) => (
              <Reveal key={s.label} mode="up" delay={i * 110}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h1)', lineHeight: 1, color: 'var(--brand)' }}>
                    <Counter to={s.to} decimals={s.decimals || 0} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 'var(--space-2)' }}>{s.label}</div>
                </div>
              </Reveal>
            ))}
          </div>
          <ul style={{ listStyle: 'none', margin: 'var(--space-8) 0 0', padding: 0, display: 'grid', gap: 'var(--space-3)' }}>
            {REASONS.map((r, i) => (
              <Reveal key={r} mode="left" delay={i * 70} as="li" style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-start', fontFamily: 'var(--font-body)', color: 'var(--text-body)' }}>
                <span style={{ color: 'var(--brand)', display: 'flex', paddingTop: 3 }}><Icon name="circle-check" size={19} /></span>{r}
              </Reveal>
            ))}
          </ul>
        </div>
        <div className="vsp-mosaic" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
          {['vsp-about-1', 'vsp-about-2', 'vsp-about-3'].map((id, i) => (
            <Reveal key={id} mode="scale" delay={i * 120}>
              <div className="vsp-zoom vsp-lift" style={{ overflow: 'hidden', borderRadius: 'var(--radius-lg)' }}>
                <Slot id={id} height={230} placeholder={['Foto — fachada', 'Foto — consultorio', 'Foto — equipo'][i]} />
              </div>
            </Reveal>
          ))}
          <Reveal mode="scale" delay={360}>
            <Card tone="brand" style={{ display: 'grid', placeItems: 'center', textAlign: 'center', height: 230, boxSizing: 'border-box' }}>
              <div>
                <span className="vsp-float" style={{ display: 'block' }}><PetIcon mark="clover" size={62} assetBase="../../assets/" /></span>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h4)', marginTop: 'var(--space-3)', color: 'var(--green-800)' }}>Cuidado<br />de confianza</div>
              </div>
            </Card>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Testimonial, CtaBand, About });