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

const POSTS = [
  { slot: 'vsp-post-1', tag: 'Prevención', read: '4 min', title: '¿Cada cuánto hay que vacunar a un perro adulto?', text: 'El calendario anual, qué refuerzos son obligatorios en Mendoza y cómo llevar la libreta sanitaria al día.' },
  { slot: 'vsp-post-2', tag: 'Gatos', read: '5 min', title: 'Señales de dolor en gatos que casi nadie nota', text: 'Los gatos esconden el malestar. Seis cambios de conducta que conviene consultar a tiempo.' },
  { slot: 'vsp-post-3', tag: 'Alimentación', read: '6 min', title: 'Cómo elegir el alimento según la edad y el tamaño', text: 'Diferencias entre cachorro, adulto y senior, y por qué el tamaño de raza cambia la fórmula.' },
];

function Consejos() {
  return (
    <Section tone="var(--surface-sunken)">
      <Reveal mode="up">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
          <SectionHeading eyebrow="Consejos" title="Para cuidarlo mejor en casa." lead="Notas breves del equipo sobre prevención, alimentación y conducta." />
          <span className="vsp-hoverable"><Button variant="ghost" iconRight={<span className="vsp-arrow" style={{ display: 'flex' }}><Icon name="arrow-right" size={16} /></span>}>Ver todas</Button></span>
        </div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
        {POSTS.map((p, i) => (
          <Reveal key={p.title} mode="up" delay={i * 120}>
          <Card interactive padding="0" className="vsp-lift vsp-hoverable" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
            <div className="vsp-zoom" style={{ overflow: 'hidden' }}>
              <Slot id={p.slot} height={172} radius={0} placeholder="Foto de la nota" />
            </div>
            <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
                <Badge tone="teal">{p.tag}</Badge>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', color: 'var(--text-faint)' }}>{p.read} de lectura</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h4)', lineHeight: 'var(--lh-h4)', margin: 'var(--space-4) 0 var(--space-2)', textWrap: 'pretty' }}>{p.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--text-muted)', margin: 0 }}>{p.text}</p>
              <div style={{ marginTop: 'auto', paddingTop: 'var(--space-5)', fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', fontWeight: 700, color: 'var(--green-700)', display: 'flex', alignItems: 'center', gap: 6 }}>
                Leer la nota <span className="vsp-arrow" style={{ display: 'flex' }}><Icon name="arrow-right" size={15} /></span>
              </div>
            </div>
          </Card>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Newsletter() {
  const [sent, setSent] = React.useState(false);
  return (
    <Section tight>
      <Reveal mode="scale">
      <Card padding="var(--space-12)" style={{ position: 'relative', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 'var(--space-12)', alignItems: 'center' }}>
        <img src="../../assets/icon-cat.png" alt="" className="vsp-float-slow" style={{ position: 'absolute', right: -26, bottom: -34, width: 150, opacity: .10, pointerEvents: 'none' }} />
        <div>
          <Eyebrow>Recordatorios</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h3)', margin: 'var(--space-3) 0 var(--space-2)' }}>Que no se te pase la vacuna.</h2>
          <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', margin: 0 }}>Dejanos tu mail y te avisamos cuando toque el refuerzo anual o el antiparasitario.</p>
        </div>
        <div>
          {sent ? (
            <div className="vsp-pop" style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', fontFamily: 'var(--font-ui)', fontWeight: 700, color: 'var(--green-700)' }}>
              <Icon name="circle-check" size={22} /> Listo, te vamos a avisar.
            </div>
          ) : (
            <>
              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-end' }}>
                <Input style={{ flex: 1 }} label="Tu email" placeholder="nombre@mail.com" icon={<Icon name="mail" size={18} />} />
                <Button size="md" onClick={() => setSent(true)}>Suscribirme</Button>
              </div>
              <div style={{ marginTop: 'var(--space-4)' }}><Checkbox label="Acepto recibir recordatorios y novedades." defaultChecked /></div>
            </>
          )}
        </div>
      </Card>
      </Reveal>
    </Section>
  );
}
Object.assign(window, { Consejos, Newsletter });