// Bricklet — Hero with 55:45 copy+visual layout.
function HeroVisual() {
  return (
    <div style={{
      position: 'relative',
      borderRadius: 'var(--radius-xl)',
      overflow: 'hidden',
      aspectRatio: '4 / 5',
      background: 'var(--cream-100)',
      boxShadow: 'var(--elev-3)',
      border: '1px solid var(--color-border)',
    }}>
      <PortraitMosaic cols={22} seed="hero" tone="studio" />
      <div style={{
        position:'absolute', top:16, left:16, zIndex: 5,
        background:'rgba(31,20,12,.78)', color:'var(--cream-50)',
        backdropFilter:'blur(8px)',
        padding:'6px 12px', borderRadius:999,
        font:'var(--text-mono)', fontSize:11, letterSpacing:'.12em', textTransform:'uppercase',
      }}>Vista previa</div>
      <div style={{
        position:'absolute', bottom:16, left:16, right:16, zIndex: 5,
        background:'rgba(251,247,240,.92)',
        backdropFilter:'blur(10px)',
        borderRadius: 'var(--radius-md)',
        padding: '14px 16px',
        display: 'flex', justifyContent:'space-between', alignItems:'center', gap: 12,
        border: '1px solid var(--color-border)',
      }}>
        <div>
          <div style={{font:'var(--text-mono)', fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--color-fg-muted)'}}>Ejemplo · 40×40 cm</div>
          <div style={{fontFamily:'Fraunces, serif', fontWeight:600, fontSize:18, marginTop:2, letterSpacing:'-.01em'}}>Lucía y la abuela, Sevilla 2024</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontFamily:'Fraunces, serif', fontWeight:700, fontSize:18, letterSpacing:'-.01em'}}>4.224</div>
          <div style={{font:'var(--text-caption)', color:'var(--color-fg-muted)', fontSize:11}}>piezas · 18 colores</div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy">
          <span className="eyebrow" style={{marginBottom:18, display:'inline-flex'}}>Foto → mosaico · desde 2026</span>
          <h1 style={{
            fontFamily:'var(--font-display)',
            fontWeight:600,
            fontSize:'clamp(40px, 5.6vw, 68px)',
            lineHeight:1.0,
            letterSpacing:'-0.025em',
            margin:'0 0 20px',
            textWrap:'balance'
          }}>Hechos de <em style={{fontStyle:'italic',fontWeight:400,color:'var(--color-primary)'}}>momentos,</em> construidos pieza a pieza.</h1>
          <p className="lede" style={{font:'var(--text-body-lg)', color:'var(--color-fg-muted)', maxWidth:'52ch', margin:'0 0 32px'}}>
            Sube una foto. La convertimos en un mosaico estilo LEGO en segundos —
            y si te enamora, lo construimos a mano y te lo enviamos a casa.
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
            <button className="btn btn-primary btn-lg">
              Crear un mosaico gratis
              <IconArrow size={16}/>
            </button>
            <button className="btn btn-secondary btn-lg">Ver ejemplos</button>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <span className="v">12.400+</span>
              <span className="l">Mosaicos creados</span>
            </div>
            <div className="hero-meta-item">
              <span className="v">4,9★</span>
              <span className="l">De 1.200 reseñas</span>
            </div>
            <div className="hero-meta-item">
              <span className="v">5 días</span>
              <span className="l">Construido y enviado</span>
            </div>
          </div>
        </div>
        <div>
          <HeroVisual/>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.HeroVisual = HeroVisual;