const { SectionHeading, IconBadge, VerticalLabel, PlayCircle } = window.CerrajerosLaSaforDesignSystem_88370e;

const PH_MAIN  = 'image/WhatsApp Image 2026-06-08 at 10.32.34 PM (2).jpeg';
const PH_TOP1  = 'image/Lockimage1.jpeg';
const PH_TOP2  = 'image/KeyImagephotos.jpeg';

function PillarCard({ icon, title, detail }) {
  return (
    <div style={{
      background: 'var(--white)', border: '1px solid var(--stone-3)',
      borderRadius: 'var(--radius-lg)',
      padding: 'var(--space-6) var(--space-5) var(--space-5)',
      textAlign: 'center', position: 'relative', marginTop: 26,
    }}>
      <div style={{ position: 'absolute', top: -26, left: '50%', transform: 'translateX(-50%)' }}>
        <IconBadge icon={icon} />
      </div>
      <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase', fontSize: 20, color: 'var(--ink)', margin: '0 0 8px' }}>
        {title}
      </h4>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>
        {detail}
      </p>
    </div>
  );
}

function SiteAbout() {
  const Ic = (n) => <i data-lucide={n} style={{ width: '100%', height: '100%' }} />;
  return (
    <section id="sobre" className="section-y" style={{ background: 'var(--stone)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-wide)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-10)', alignItems: 'start' }} className="about-grid">

          {/* LEFT — heading + photo with vertical label + play */}
          <div>
            <SectionHeading eyebrow="Quiénes somos" title={<span>Tu socio de confianza para una <span style={{ color: 'var(--verde-bright)' }}>cerrajería</span> fiable.</span>} size="lg" />
            <div style={{ position: 'relative', marginTop: 'var(--space-6)', borderRadius: 'var(--radius-xl)', background: 'var(--white)', padding: 8, boxShadow: 'var(--shadow-card)' }}>
              <div style={{ position: 'relative', height: 340, borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                <image-slot id="about-main" style={{ display:'block', position:'absolute', inset: 0, width:'100%', height:'100%' }} shape="rect" src={PH_MAIN} placeholder="Cerrajero trabajando"></image-slot>
                <div style={{ position: 'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <PlayCircle size={72} />
                </div>
              </div>
              {/* Vertical label tab on the left edge */}
              <div className="about-vert-label" style={{ position: 'absolute', top: 16, left: -8 }}>
                <VerticalLabel stat="20+" label="Años de Experiencia" />
              </div>
            </div>
          </div>

          {/* RIGHT — paired photos + copy + Vision/Mission + CTA row */}
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-3)', marginBottom: 'var(--space-5)' }}>
              {[PH_TOP1, PH_TOP2].map((src, i) => (
                <div key={i} style={{ position: 'relative', height: 160, borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                  <image-slot id={'about-top-'+i} style={{ display:'block', position:'absolute', inset: 0, width:'100%', height:'100%' }} shape="rect" src={src} placeholder="Trabajo en taller"></image-slot>

                </div>
              ))}
            </div>

            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 var(--space-6)' }}>
              Más de dos décadas resolviendo cerraduras en La Safor. Trabajamos con las mejores marcas, presupuestamos antes de empezar, y nunca cobramos lo que no acordamos. <strong style={{ color: 'var(--ink)' }}>Honestos, rápidos y siempre disponibles.</strong>
            </p>

            <div className="about-pillars" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginBottom: 'var(--space-6)' }}>
              <PillarCard icon={Ic('eye')} title="Nuestra Visión"
                detail="Ser el cerrajero de referencia en La Safor por nuestra honestidad y profesionalidad." />
              <PillarCard icon={Ic('target')} title="Nuestra Misión"
                detail="Resolver cualquier urgencia de cerrajería de forma rápida, transparente y sin sorpresas." />
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', flexWrap: 'wrap' }}>
              <a href="tel:+34600982986" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', textDecoration: 'none' }}>
                <IconBadge icon={Ic('phone')} size="sm" />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--ink)', fontSize: 17, lineHeight: 1 }}>+34 600 982 986</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>Urgencias 24 horas</div>
                </div>
              </a>
              <a href="https://wa.me/34600982986" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', textDecoration: 'none' }}>
                <IconBadge icon={Ic('message-circle')} size="sm" />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--ink)', fontSize: 17, lineHeight: 1 }}>WhatsApp</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>Respuesta rápida</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteAbout });