const { SectionHeading, PillButton } = window.CerrajerosLaSaforDesignSystem_88370e;

const SERVICES = [
  { title: 'Apertura de Puertas',  desc: 'Abrimos tu puerta sin daños en la cerradura ni en la puerta. Rápido y sin destrozos.',           icon: 'door-open',    photo: 'image/Doorimage1.jpeg' },
  { title: 'Cambio de Cerraduras', desc: 'Instalamos cerraduras de alta seguridad. Multiplicamos la protección de tu hogar o negocio.',     icon: 'lock',         photo: 'image/BombinPhoto2.jpeg' },
  { title: 'Cajas Fuertes',        desc: 'Apertura, instalación y reparación de cajas fuertes de cualquier marca y modelo.',                 icon: 'vault',        photo: 'image/CajaFuerta1.jpeg' },
  { title: 'Apertura de Vehículos',desc: 'Te quedaste sin llaves o el coche bloqueado. Te abrimos sin dañar tu vehículo.',                   icon: 'car',          photo: 'image/carlockphoto1.png' },
  { title: 'Urgencias 24H',        desc: 'Disponibles las 24 horas del día, los 365 días del año. Llegamos en menos de 30 minutos.',         icon: 'clock',        photo: 'image/urgentePhoto1.png' },
  { title: 'Seguridad',            desc: 'Instalamos bombines, cerrojos y sistemas de cierre de alta seguridad para tu tranquilidad.',       icon: 'shield-check', photo: 'image/BombinPhoto1.jpeg' },
];

function ServicePhotoCard({ s, i, surfaceColor }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        background: 'var(--white)', borderRadius: 'var(--radius-lg)',
        overflow: 'hidden', border: '1px solid var(--stone-3)',
        boxShadow: hover ? 'var(--shadow-card)' : 'var(--shadow-sm)',
        transition: 'box-shadow var(--dur-base), transform var(--dur-base)',
        transform: hover ? 'translateY(-4px)' : 'none',
      }}>
      <div className="svc-img" style={{ position: 'relative', height: 220 }}>
        <image-slot id={'svc-'+i} style={{ display:'block', position:'absolute', inset: 0, width:'100%', height:'100%' }}
          shape="rect" src={s.photo} placeholder={s.title}></image-slot>

        {/* Top-left NOTCH (matches surface color) with outline lock icon */}
        <div style={{
          position: 'absolute', top: 0, left: 0,
          width: 64, height: 64,
          background: surfaceColor,
          borderBottomRightRadius: 22,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            width: 32, height: 32, borderRadius: 'var(--radius-pill)',
            border: '1.5px solid var(--verde-bright)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--verde-bright)',
          }}>
            <i data-lucide={s.icon} style={{ width: 16, height: 16 }} />
          </span>
        </div>


      </div>
      <div style={{ padding: 'var(--space-5) var(--space-6) var(--space-6)' }}>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          textTransform: 'uppercase', letterSpacing: '-0.01em',
          fontSize: 22, color: 'var(--ink)', margin: '0 0 8px', lineHeight: 1.05,
        }}>{s.title}</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>
          {s.desc}
        </p>
      </div>
    </article>
  );
}

function SiteServices({ onNav }) {
  const surfaceColor = 'var(--stone-2)';
  return (
    <section id="servicios" className="section-y" style={{ background: surfaceColor, padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-wide)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'var(--space-8)', alignItems: 'end', marginBottom: 'var(--space-8)' }} className="svc-head">
          <SectionHeading eyebrow="Lo que hacemos" title={<span>Cerrajería rápida,<br/><span style={{ color: 'var(--verde-bright)' }}>profesional</span> y honesta.</span>} size="lg" />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: '46ch', margin: 0 }}>
            Resolvemos cualquier urgencia de cerrajería en menos de 30 minutos, con presupuesto cerrado antes de empezar y técnicos certificados.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }} className="svc-grid">
          {SERVICES.map((s, i) => <ServicePhotoCard key={s.title} s={s} i={i} surfaceColor={surfaceColor} />)}
        </div>
        <div style={{ marginTop: 'var(--space-8)', display: 'flex', justifyContent: 'center' }}>
          <PillButton variant="deep" size="lg" href="#contacto" onClick={(e)=>{e.preventDefault();onNav&&onNav('contacto');}}>
            Pedir presupuesto sin compromiso
          </PillButton>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteServices });