// Hero — emotional, photography-led layout. Real pet photos = warmth.

const Hero = ({ tweaks }) => {
  return (
    <section style={{
      position:'relative', overflow:'hidden',
      paddingTop: 56, paddingBottom: 110,
      background:'linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)',
      borderBottom:'1px solid var(--line-2)'
    }}>
      {/* Soft warm radial glow */}
      <div aria-hidden style={{
        position:'absolute', top:'-20%', right:'-20%', width:'70%', height:'70%',
        background:'radial-gradient(circle, rgba(232,168,124,0.25), transparent 60%)',
        pointerEvents:'none', filter:'blur(40px)'
      }}/>
      <div aria-hidden style={{
        position:'absolute', bottom:'-30%', left:'-10%', width:'50%', height:'60%',
        background:'radial-gradient(circle, rgba(184,92,44,0.1), transparent 60%)',
        pointerEvents:'none', filter:'blur(40px)'
      }}/>

      {/* Floating tiny pet illustrations as confetti */}
      <div aria-hidden style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
        {[
          { Pet: PetArt.cat,     x:'4%',  y:'14%', s:36, c:'var(--primary)', r:-10, op:0.18 },
          { Pet: PetArt.bird,    x:'48%', y:'8%',  s:28, c:'var(--accent)',  r:14,  op:0.22 },
          { Pet: PetArt.rabbit,  x:'3%',  y:'68%', s:42, c:'var(--primary-2)', r:8, op:0.15 },
          { Pet: PetArt.hamster, x:'52%', y:'88%', s:32, c:'var(--ok)',      r:-12, op:0.18 },
        ].map((p,i) => (
          <div key={i} style={{
            position:'absolute', left:p.x, top:p.y, width:p.s, height:p.s,
            color:p.c, opacity:p.op, transform:`rotate(${p.r}deg)`,
            animation:`float ${5+i}s ease-in-out infinite`
          }}>
            <p.Pet style={{ width:'100%', height:'100%' }}/>
          </div>
        ))}
      </div>

      <div className="container" style={{ position:'relative' }}>
        <div style={{
          display:'grid',
          gridTemplateColumns:'minmax(0,1.05fr) minmax(0,0.95fr)',
          gap: 64, alignItems:'center'
        }} className="hero-grid">
          {/* LEFT: copy */}
          <div>
            <Pill tone="primary" style={{ marginBottom: 28 }}>
              <span style={{
                width:6, height:6, borderRadius:99, background:'var(--love)',
                animation:'pulse-dot 1.6s ease-in-out infinite'
              }}/>
              Plataforma con bienestar animal · Hecha con cariño
            </Pill>

            <h1 className="serif" style={{
              fontSize:'clamp(44px, 6.2vw, 82px)',
              lineHeight: 0.98, letterSpacing:'-0.025em',
              fontWeight: 400, margin:0, color:'var(--ink)',
              textWrap:'balance'
            }}>
              Cada visita,<br/>
              un <SloganUnderline>cliente</SloganUnderline>{' '}
              <span style={{ fontStyle:'italic', color:'var(--primary)' }}>para siempre.</span>
            </h1>

            <p style={{
              marginTop: 28, fontSize: 19, lineHeight: 1.55,
              color:'var(--ink-2)', maxWidth: 540, textWrap:'pretty'
            }}>
              DrVet.app hace que cada perro, gato, conejo o ave salga de tu clínica con su historia
              cuidada y su tutor con ganas de volver. Recordatorios cariñosos, IA que ahorra horas,
              WhatsApp humano —
              <em style={{ color:'var(--primary)', fontStyle:'italic' }}> y tutores que regresan con sus tres mascotas, año tras año.</em>
            </p>

            {/* Soft outcome row — no money words, just relationship */}
            <div style={{
              marginTop:28, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, maxWidth:540
            }}>
              {[
                { n:'8 años', t:'de relación promedio' },
                { n:'4.2×', t:'visitas que vuelven' },
                { n:'12 h', t:'ahorradas/semana' },
              ].map((s,i)=>(
                <div key={i} style={{ borderTop:'2px solid var(--primary)', paddingTop:8 }}>
                  <div className="serif" style={{ fontSize:24, fontWeight:500, color:'var(--ink)', letterSpacing:'-0.01em' }}>{s.n}</div>
                  <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:2 }}>{s.t}</div>
                </div>
              ))}
            </div>

            <div style={{ display:'flex', gap:12, marginTop:36, flexWrap:'wrap' }}>
              <Btn kind="primary" size="lg">Probar gratis 14 días {Ico.arrow()}</Btn>
              <Btn kind="ghost" size="lg">
                <span style={{
                  width:24, height:24, borderRadius:99, background:'var(--bg-2)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                }}>
                  <svg width="8" height="8" viewBox="0 0 8 8"><path d="M1 0v8l7-4z" fill="var(--ink)"/></svg>
                </span>
                Ver tour de 2 minutos
              </Btn>
            </div>

            {/* warm trust strip with mini photos */}
            <div style={{
              marginTop: 48, display:'flex', alignItems:'center', gap:18, flexWrap:'wrap',
              paddingTop: 28, borderTop:'1px solid var(--line-2)'
            }}>
              {/* Stacked face avatars */}
              <div style={{ display:'flex', alignItems:'center' }}>
                {[PHOTOS.labradorPuppy, PHOTOS.catKitten, PHOTOS.rabbit2, PHOTOS.parrot].map((kind,i) => (
                  <div key={i} style={{ marginLeft: i>0 ? -14 : 0 }}>
                    <PetAvatar kind={kind} size={44} border={3} borderColor="var(--bg)"/>
                  </div>
                ))}
              </div>
              <div>
                <div className="serif" style={{ fontSize:15, fontStyle:'italic', color:'var(--ink)', lineHeight:1.3 }}>
                  +12.400 mascotas atendidas con DrVet.app
                </div>
                <div className="mono" style={{ fontSize:10.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:3 }}>
                  En 47 clínicas · 6 países
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT: emotional photo collage */}
          <HeroVisual/>
        </div>
      </div>

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

// Photo-led visual: a big bond photo + floating polaroids + soft platform peek
const HeroVisual = () => {
  return (
    <div style={{ position:'relative', minHeight: 620 }}>
      {/* Main hero photo: hand petting a dog (the bond) */}
      <div style={{
        position:'relative', borderRadius:24, overflow:'hidden',
        aspectRatio:'4/5',
        boxShadow:'0 40px 80px -30px rgba(74,42,18,0.3), 0 12px 28px -10px rgba(74,42,18,0.15)',
        background:'var(--accent-soft)'
      }}>
        <PetPhoto kind={PHOTOS.girlWithDog} alt="Chica feliz abrazando a su perro" ratio="4/5" radius={0} style={{ width:'100%', height:'100%', boxShadow:'none', borderRadius:0 }}/>
        {/* Warm overlay so text is readable */}
        <div style={{
          position:'absolute', inset:0,
          background:'linear-gradient(180deg, transparent 50%, rgba(42,31,23,0.55) 100%)',
        }}/>
        {/* Pet info card on photo */}
        <div style={{
          position:'absolute', left:18, bottom:18, right:18,
          background:'rgba(255,252,246,0.95)', backdropFilter:'blur(8px)',
          borderRadius:14, padding:'14px 16px',
          display:'flex', alignItems:'center', gap:14
        }}>
          <div style={{
            width:48, height:48, borderRadius:99, overflow:'hidden',
            border:'2px solid var(--bg-3)', flexShrink:0
          }}>
            <PetAvatar kind={PHOTOS.goldenSmile} size={42} border={0}/>
          </div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:14, fontWeight:600, color:'var(--ink)' }}>Firulais &amp; Carolina</div>
            <div style={{ fontSize:12, color:'var(--ink-2)', display:'flex', alignItems:'center', gap:4 }}>
              <PetArt.pawSmall style={{ width:11, height:11, color:'var(--primary)' }}/>
              4 años juntos · 9 visitas en DrVet.app
            </div>
          </div>
          <span style={{
            background:'rgba(217,83,111,0.12)', color:'var(--love)',
            padding:'4px 10px', borderRadius:99, fontSize:11, fontWeight:600,
            display:'flex', alignItems:'center', gap:5
          }}>
            <Heart/> Cliente para siempre
          </span>
        </div>
      </div>

      {/* Floating polaroid: dog */}
      <div style={{
        position:'absolute', right:-30, top:-20, zIndex:3,
        animation:'float 5s ease-in-out infinite'
      }}>
        <PetPolaroid kind={PHOTOS.goldenSmile} caption="Firulais · 4 años" tilt={6} w={170}/>
      </div>

      {/* Floating polaroid: cat */}
      <div style={{
        position:'absolute', left:-44, bottom:60, zIndex:3,
        animation:'float 4.2s ease-in-out infinite', animationDelay:'-1s'
      }}>
        <PetPolaroid kind={PHOTOS.catCloseup} caption="Mishi · 7 años" tilt={-7} w={150}/>
      </div>

      {/* WhatsApp warmth card */}
      <div style={{
        position:'absolute', right:-22, bottom:-30, zIndex:4, width:260,
        background:'#FFFCF6', borderRadius:14, padding:14,
        border:'1px solid var(--line-2)',
        boxShadow:'0 24px 50px -20px rgba(74,42,18,0.3)',
        animation:'float 5.2s ease-in-out infinite', animationDelay:'-2s'
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
          <div style={{ width:28, height:28, borderRadius:99, background:'#25D366', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.42 1.32 4.91L2 22l5.31-1.39a9.93 9.93 0 004.73 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.13-2.9-7-1.87-1.87-4.36-2.91-7.02-2.91z"/></svg>
          </div>
          <div style={{ fontSize:12, fontWeight:600, color:'var(--ink)' }}>WhatsApp · DrVet.app</div>
        </div>
        <div style={{
          background:'#DCF8C6', borderRadius:10, padding:'10px 12px', fontSize:12.5, color:'#2A1F17',
          lineHeight:1.5
        }}>
          Hola Carolina 🐾<br/>
          Mañana es el control de <b>Firulais</b>. Te dejo recordatorio del ayuno y un audio para que lo subas al auto sin estrés. ¡Lo esperamos con cariño!
        </div>
      </div>
    </div>
  );
};

// Tiny inline heart for the bond pill
const Heart = () => (
  <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">
    <path d="M8 14s-5.5-3.5-5.5-8a3 3 0 015.5-1.7A3 3 0 0113.5 6c0 4.5-5.5 8-5.5 8z"/>
  </svg>
);

window.Hero = Hero;