// CTA — final emotional push, with a "wall of pet polaroids"

const PetParade = () => {
  // a wall of real pet polaroids — the heart of the page
  const wall = [
    { kind: PHOTOS.goldenSmile,  caption:'Firulais · Lab',     tilt:-4 },
    { kind: PHOTOS.catCloseup,   caption:'Mishi · Felina',     tilt:5  },
    { kind: PHOTOS.rabbit,       caption:'Trufa · Conejita',   tilt:-6 },
    { kind: PHOTOS.parrot,       caption:'Coco · Loro',        tilt:3  },
    { kind: PHOTOS.smallDog,     caption:'Luna · Mestiza',     tilt:-3 },
    { kind: PHOTOS.catKitten,    caption:'Pelusa · Gatita',    tilt:6  },
    { kind: PHOTOS.hamster,      caption:'Pipo · Hámster',     tilt:-5 },
    { kind: PHOTOS.dogTutorHug,  caption:'Toby & familia',     tilt:4  },
    { kind: PHOTOS.rabbit2,      caption:'Coneja Sofí',        tilt:-4 },
  ];
  return (
    <div style={{
      borderTop:'1px solid var(--line-2)', borderBottom:'1px solid var(--line-2)',
      background:'var(--bg)', padding:'56px 0 48px', overflow:'hidden',
      position:'relative'
    }}>
      <div className="serif" style={{
        textAlign:'center', fontSize:'clamp(22px, 2.8vw, 30px)',
        fontStyle:'italic', color:'var(--primary)', maxWidth:680, margin:'0 auto 36px',
        padding:'0 32px', textWrap:'balance', fontWeight:400, lineHeight:1.3
      }}>
        Para Carolina, María, Andrés, Lucía — y para los miles de Firulais, Mishis y Trufas que esperan en casa.
      </div>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'center',
        gap:14, flexWrap:'nowrap', maxWidth:1400, margin:'0 auto', padding:'0 16px',
        overflowX:'auto', overflowY:'visible', scrollbarWidth:'none'
      }} className="no-scrollbar">
        {wall.map((p,i) => (
          <div key={i} style={{
            flexShrink:0,
            animation:`float ${4 + (i%4)*0.4}s ease-in-out infinite`,
            animationDelay:`${i*0.2}s`
          }}>
            <PetPolaroid kind={p.kind} caption={p.caption} tilt={p.tilt} w={150}/>
          </div>
        ))}
      </div>
      <div className="mono" style={{
        textAlign:'center', fontSize:10.5, color:'var(--muted)',
        textTransform:'uppercase', letterSpacing:'0.18em', marginTop:36
      }}>
        Para quienes cuidan a los que no hablan
      </div>
    </div>
  );
};

const CTA = () => (
  <>
    <PetParade/>
    <section style={{ padding:'140px 0', background:'var(--bg-2)', borderBottom:'1px solid var(--line-2)', position:'relative', overflow:'hidden' }}>
      {/* faint paw watermarks */}
      <div aria-hidden style={{
        position:'absolute', left:'-4%', bottom:'-10%', width:300, height:300,
        color:'var(--primary)', opacity:0.07, transform:'rotate(15deg)', pointerEvents:'none'
      }}>
        <PetArt.paw style={{ width:'100%', height:'100%' }}/>
      </div>
      <div aria-hidden style={{
        position:'absolute', right:'-4%', top:'-8%', width:240, height:240,
        color:'var(--accent)', opacity:0.18, transform:'rotate(-22deg)', pointerEvents:'none'
      }}>
        <PetArt.paw style={{ width:'100%', height:'100%' }}/>
      </div>
      <div className="container" style={{ textAlign:'center', maxWidth: 880, margin:'0 auto', position:'relative' }}>
        <Pill tone="primary" style={{ marginBottom:32 }}>
          <span style={{ width:6, height:6, borderRadius:99, background:'var(--love)', animation:'pulse-dot 1.6s infinite' }}/>
          14 días gratis · sin tarjeta · con cariño
        </Pill>
        <h2 className="serif" style={{
          fontSize:'clamp(44px, 6vw, 84px)', lineHeight:0.98,
          letterSpacing:'-0.025em', fontWeight:400, margin:'0 0 28px',
          textWrap:'balance', color:'var(--ink)'
        }}>
          Hagamos que la próxima visita<br/>
          <span style={{ fontStyle:'italic', color:'var(--primary)' }}>sea la primera de muchas.</span>
        </h2>
        <p style={{ fontSize:19, color:'var(--ink-2)', lineHeight:1.55, maxWidth:620, margin:'0 auto 40px', textWrap:'pretty' }}>
          Migramos tu base de pacientes desde cualquier sistema. Onboarding guiado, con paciencia, como debe ser.
          Tu equipo y tus mascotitas en producción en menos de una semana.
        </p>
        <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
          <Btn kind="primary" size="lg">Solicitar demo personalizada {Ico.arrow()}</Btn>
          <Btn kind="ghost" size="lg">Crear cuenta gratis</Btn>
        </div>
      </div>
    </section>
  </>
);

window.CTA = CTA;