// Species — celebrate the variety of pets clinics actually treat
// Now with real warm pet photos.

const Species = () => {
  const species = [
    { Pet: PetArt.dog,     photo: PHOTOS.goldenSmile,  label:'Caninos',  pct:'58%', n:'Labradores, mestizos, razas pequeñas y gigantes', accent:'var(--primary)' },
    { Pet: PetArt.cat,     photo: PHOTOS.catCloseup,   label:'Felinos',  pct:'31%', n:'Domésticos, exóticos, razas puras con protocolos diferenciados', accent:'var(--accent)' },
    { Pet: PetArt.rabbit,  photo: PHOTOS.rabbit,       label:'Conejos',  pct:'4%',  n:'Lagomorfos con triaje y nutrición especializada', accent:'var(--primary-2)' },
    { Pet: PetArt.bird,    photo: PHOTOS.parrot,       label:'Aves',     pct:'4%',  n:'Psitácidas, canarios, aves de presa', accent:'var(--warn)' },
    { Pet: PetArt.hamster, photo: PHOTOS.hamster,      label:'Pequeños', pct:'3%',  n:'Hámsters, cobayos, hurones, erizos', accent:'var(--ok)' },
  ];
  return (
    <section style={{ padding:'140px 0', background:'var(--bg-3)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="03" label="Una plataforma · todas las especies" style={{ marginBottom:28 }}/>
        <div style={{
          display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:60,
          alignItems:'end', marginBottom:64
        }} className="sp-head">
          <h2 className="serif" style={{
            fontSize:'clamp(36px, 4.8vw, 64px)', lineHeight:1.0,
            letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance', color:'var(--ink)'
          }}>
            Perros, gatos, conejos, aves —<br/>
            <span style={{ fontStyle:'italic', color:'var(--primary)' }}>cada uno con su historia.</span>
          </h2>
          <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, margin:0, maxWidth:460 }}>
            DrVet.app conoce las diferencias: calendarios de vacunación por especie, dosis ajustadas por peso,
            recordatorios estacionales para parásitos, y triaje diferenciado — porque ningún paciente es igual a otro.
          </p>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:14 }} className="sp-grid">
          {species.map((s,i) => (
            <div key={i} style={{
              border:'1px solid var(--line)', borderRadius:18, padding:'0',
              background:'var(--bg-3)', display:'flex', flexDirection:'column',
              position:'relative', overflow:'hidden',
              boxShadow:'0 12px 28px -16px rgba(74,42,18,0.18)'
            }}>
              {/* Photo */}
              <div style={{ position:'relative', aspectRatio:'4/3', overflow:'hidden', background:'var(--accent-soft)' }}>
                <PetPhoto kind={s.photo} alt={s.label} ratio="4/3" radius={0} style={{ boxShadow:'none', borderRadius:0, height:'100%' }}/>
                {/* species icon overlay */}
                <div style={{
                  position:'absolute', top:10, right:10,
                  width:36, height:36, borderRadius:99, background:'rgba(255,252,246,0.92)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color: s.accent, backdropFilter:'blur(4px)'
                }}>
                  <s.Pet style={{ width:22, height:22 }}/>
                </div>
              </div>
              {/* Body */}
              <div style={{ padding:'18px 18px 22px' }}>
                <div className="serif" style={{ fontSize:34, lineHeight:1, fontWeight:400, letterSpacing:'-0.02em', color:'var(--ink)' }}>{s.pct}</div>
                <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:6 }}>de pacientes</div>
                <div style={{ fontWeight:600, fontSize:15, marginTop:14, color:'var(--ink)' }}>{s.label}</div>
                <div style={{ fontSize:12.5, color:'var(--ink-2)', marginTop:6, lineHeight:1.45 }}>{s.n}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Strip of capabilities per-species */}
        <div style={{
          marginTop:36, padding:'28px 32px',
          background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:18,
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24
        }} className="sp-caps">
          {[
            { t:'Calendarios de vacunación', d:'Polivalente, antirrábica, leucemia felina, mixomatosis — sugeridas por especie y edad.' },
            { t:'Dosis por peso', d:'Vademécum integrado calcula automáticamente analgésicos y antibióticos según paciente.' },
            { t:'Razas y predisposiciones', d:'Alertas para displasia en grandes razas, problemas urinarios en machos felinos, etc.' },
            { t:'Microchip y trazabilidad', d:'Lectura de microchip, vinculación a tutor y exportación a registros nacionales.' },
          ].map((c,i) => (
            <div key={i} style={{ borderLeft:'2px solid var(--accent)', paddingLeft:16 }}>
              <div style={{ fontSize:13, fontWeight:600, marginBottom:6, color:'var(--ink)' }}>{c.t}</div>
              <div style={{ fontSize:12, color:'var(--ink-2)', lineHeight:1.5 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px){ .sp-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 880px){
          .sp-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .sp-caps { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px){
          .sp-grid { grid-template-columns: 1fr 1fr !important; }
          .sp-caps { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Species = Species;