// Bond — emotional centerpiece. The "amor" of the page.
// Big editorial photos + heartfelt copy about the bond between tutor and pet.

const Bond = () => {
  return (
    <section style={{
      padding:'120px 0 140px',
      background:'linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%)',
      borderBottom:'1px solid var(--line-2)',
      position:'relative', overflow:'hidden'
    }}>
      {/* faint paw watermark */}
      <div aria-hidden style={{
        position:'absolute', right:'-4%', top:'10%', width:280, height:280,
        color:'var(--primary)', opacity:0.05, transform:'rotate(20deg)'
      }}>
        <PetArt.paw style={{ width:'100%', height:'100%' }}/>
      </div>

      <div className="container" style={{ position:'relative' }}>
        <SectionTag num="00" label="Por qué hacemos esto" style={{ marginBottom:28 }}/>

        <div style={{
          display:'grid', gridTemplateColumns:'minmax(0,0.95fr) minmax(0,1.05fr)',
          gap:80, alignItems:'center'
        }} className="bond-grid">

          {/* Left — photo collage */}
          <div style={{ position:'relative', minHeight: 540 }}>
            {/* Big main photo */}
            <div style={{
              position:'relative', borderRadius:20, overflow:'hidden',
              aspectRatio:'4/5', maxWidth:420,
              boxShadow:'0 30px 60px -25px rgba(74,42,18,0.3)',
              background:'var(--accent-soft)',
              transform:'rotate(-2deg)'
            }}>
              <PetPhoto kind={PHOTOS.bondPawHand} alt="Tutora acariciando a su perro" ratio="4/5" radius={0} style={{ boxShadow:'none', borderRadius:0, height:'100%' }}/>
            </div>
            {/* Floating polaroid 1 */}
            <div style={{
              position:'absolute', right:0, top:40, zIndex:2,
              animation:'float 5s ease-in-out infinite'
            }}>
              <PetPolaroid kind={PHOTOS.bondCatHand} caption="“Mi compañera de trabajo.”" tilt={5} w={210}/>
            </div>
            {/* Floating polaroid 2 */}
            <div style={{
              position:'absolute', right:30, bottom:-20, zIndex:3,
              animation:'float 4.5s ease-in-out infinite', animationDelay:'-1.5s'
            }}>
              <PetPolaroid kind={PHOTOS.dogBlanket} caption="“Después del control.”" tilt={-6} w={180}/>
            </div>
            {/* Floating heart */}
            <div aria-hidden style={{
              position:'absolute', left:'30%', top:'-20px', color:'var(--love)',
              animation:'float 3.5s ease-in-out infinite'
            }}>
              <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor" style={{
                filter:'drop-shadow(0 6px 10px rgba(217,83,111,0.3))'
              }}>
                <path d="M12 21s-7-4.5-7-10.5A4.5 4.5 0 0112 6.5 4.5 4.5 0 0119 10.5C19 16.5 12 21 12 21z"/>
              </svg>
            </div>
          </div>

          {/* Right — copy */}
          <div>
            <h2 className="serif" style={{
              fontSize:'clamp(36px, 5vw, 68px)', lineHeight:1.0,
              letterSpacing:'-0.025em', fontWeight:400, margin:0, color:'var(--ink)',
              textWrap:'balance'
            }}>
              Cuando el tutor siente que aman a su mascota,<br/>
              <span style={{ fontStyle:'italic', color:'var(--primary)' }}>vuelve toda la vida.</span>
            </h2>

            <p className="serif" style={{
              marginTop:28, fontSize:22, lineHeight:1.5,
              color:'var(--ink-2)', fontStyle:'italic', fontWeight:400,
              textWrap:'pretty', maxWidth:540
            }}>
              Detrás de cada Firulais hay una Carolina que paga 8 años de consultas, vacunas,
              alimentos premium y emergencias. DrVet.app hace que tu clínica sea esa de confianza
              — la que recomiendan a la familia, la que nunca cambian.
              <strong style={{ color:'var(--ink)', fontStyle:'normal', fontWeight:600 }}> Más amor por la mascota = más años de ingresos para ti.</strong>
            </p>

            <div style={{
              marginTop:36, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20
            }} className="bond-stats">
              {[
                { n:'$ 4.800', t:'en consultas y productos durante la vida de un cliente fiel — vs. $ 800 de uno que se va al año.' },
                { n:'×3', t:'el LTV de un cliente fiel. Cada visita atendida con cariño se convierte en 6 años más de relación.' },
              ].map((s,i) => (
                <div key={i} style={{
                  padding:'20px 22px', background:'var(--bg-3)',
                  border:'1px solid var(--line)', borderRadius:14,
                  borderTop:'3px solid var(--primary)'
                }}>
                  <div className="serif" style={{ fontSize:32, fontWeight:500, letterSpacing:'-0.015em', color:'var(--primary)', lineHeight:1.05 }}>{s.n}</div>
                  <div style={{ fontSize:13, color:'var(--ink-2)', marginTop:6, lineHeight:1.5 }}>{s.t}</div>
                </div>
              ))}
            </div>

            <div style={{
              marginTop:36, paddingTop:28, borderTop:'1px solid var(--line-2)',
              display:'flex', alignItems:'center', gap:14
            }}>
              <div style={{ flexShrink:0 }}>
                <PetAvatar kind={PHOTOS.vetWithCat} size={54} border={2} borderColor="var(--bg-3)"/>
              </div>
              <div>
                <div className="serif" style={{ fontSize:17, fontStyle:'italic', color:'var(--ink)', lineHeight:1.3 }}>
                  “Pasamos de 28 a 71 consultas semanales en 6 meses. Los tutores sienten que aquí los conocemos por nombre — y vuelven con sus tres mascotas.”
                </div>
                <div className="mono" style={{ fontSize:10.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:6 }}>
                  Dra. Mariana Rivera · Dueña, Clínica VetSur
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px){
          .bond-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
          .bond-stats { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Bond = Bond;