const { PillButton, RotatingBadge, PlayCircle, HexagonPattern } = window.CerrajerosLaSaforDesignSystem_88370e;

const HERO_PHOTO  = 'https://images.unsplash.com/flagged/photo-1564767609213-c75ee685263a?w=1400&q=80&auto=format&fit=crop';
const PLAY_PHOTO  = 'https://images.unsplash.com/photo-1614797091730-e2a6121aaa60?w=900&q=80&auto=format&fit=crop';
function SiteHero({ onNav }) {
  return (
    <section id="inicio" className="hero-section" style={{ background: 'var(--stone)', padding: 'var(--space-6) var(--gutter) var(--space-10)' }}>
      <div className="hero-card" style={{
        margin: '0 auto',
        position: 'relative', overflow: 'hidden',
        background: 'var(--warm)',
        borderRadius: 'var(--radius-xl)',
      }}>
        <HexagonPattern opacity={0.05} />

        {/* faint green ring decoration top-right */}
        <div aria-hidden className="hero-deco" style={{
          position: 'absolute', top: 28, right: 'calc(50% - 230px)',
          width: 56, height: 56, borderRadius: 'var(--radius-pill)',
          border: '2px solid var(--verde-bright)', opacity: 0.35,
        }} />
        <div aria-hidden className="hero-deco" style={{
          position: 'absolute', top: 36, right: 'calc(50% - 252px)',
          width: 16, height: 16, borderRadius: 'var(--radius-pill)',
          background: 'var(--verde-bright)',
        }} />

        <div style={{
          position: 'relative',
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
          gap: 0,
        }} className="hero-grid">
          {/* Rotating badge at column boundary, near headline */}
          <div className="hero-badge" style={{ position: 'absolute', top: 28, left: 'calc(50% - 260px)', zIndex: 10 }}>
            <RotatingBadge text="MEJOR SERVICIO · GARANTIZADO · " center="24/7" size={130} tone="deep" />
          </div>
          {/* LEFT: copy + CTA */}
          <div className="hero-left" style={{ padding: 'var(--space-8) var(--space-6) var(--space-6)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div>
              <p style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                fontFamily: 'var(--font-display)', fontWeight: 700,
                textTransform: 'uppercase', letterSpacing: '0.22em', fontSize: 12,
                color: 'var(--verde-bright)', margin: '0 0 var(--space-5)',
              }}>
                <i data-lucide="lock" style={{ width: 14, height: 14 }} /> Cerrajero 24H · La Safor
              </p>
              <h1 style={{
                fontFamily: 'var(--font-display)', fontWeight: 900, textTransform: 'uppercase',
                lineHeight: 0.96, letterSpacing: '-0.015em',
                color: 'var(--stone)', margin: '0 0 var(--space-5)',
                fontSize: 'clamp(3rem, 6.4vw, 5.5rem)',
              }}>
                ¿Sin llave?<br /><span style={{ color: 'var(--verde-bright)' }}>Te abrimos.</span>
              </h1>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65,
                color: 'var(--ink)', margin: '0 0 var(--space-6)',
              }}>
                Llegamos en menos de 30 minutos a Gandía, Oliva, Tavernes y toda la comarca. Apertura de puertas, cambio de cerraduras y urgencias — sin sorpresas en el precio.
              </p>
              <div className="hero-btns" style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
                <PillButton variant="bright" size="lg" href="#contacto" onClick={(e)=>{e.preventDefault();onNav&&onNav('contacto');}}>Contáctanos</PillButton>
                <PillButton variant="dark-outline" size="lg" href="#servicios" onClick={(e)=>{e.preventDefault();onNav&&onNav('servicios');}}>Servicios</PillButton>
              </div>
            </div>
          </div>

          {/* RIGHT: photo + decorations */}
          <div className="hero-photo-col" style={{ position: 'relative' }}>
            <image-slot id="hero-photo" style={{ display: 'block', position: 'absolute', inset: 0, width: '100%', height: '100%' }}
              shape="rect" src={HERO_PHOTO} placeholder="Foto de cerrajero"></image-slot>
            {/* dark gradient blending into the dark card on the left */}
            <div aria-hidden className="hero-gradient" style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(90deg, var(--warm) 0%, rgba(255,174,110,0.7) 12%, rgba(255,174,110,0) 30%, rgba(255,174,110,0) 70%, rgba(255,174,110,0.4) 100%)',
              pointerEvents: 'none',
            }} />

            {/* White play card bottom-right */}
            <div className="hero-deco" style={{
              position: 'absolute', bottom: 24, right: 24,
              width: 240, height: 140,
              background: 'var(--white)', borderRadius: 'var(--radius-lg)',
              padding: 8, boxShadow: 'var(--shadow-lg)',
            }}>
              <div style={{ position: 'relative', width: '100%', height: '100%', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
                <image-slot id="hero-play" style={{ display:'block', position:'absolute', inset: 0, width:'100%', height:'100%' }} shape="rect" src={PLAY_PHOTO} placeholder="Apertura sin daños"></image-slot>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <PlayCircle size={54} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteHero });