function Services() {
  const bridalImages = [
    "assets/images/bride1.jpg",
    "assets/images/bride2.jpg",
    "assets/images/bride3.jpg",
    "assets/images/bride4.jpg",
    "assets/images/bride5.jpg",
    "assets/images/bride6.jpg",
  ];

  return (
    <section id="bridal-makeup" style={{ padding: "140px 0", background: "var(--ivory)", position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end", marginBottom: 54, gap: 40 }}>
          <div>
            <div className="eyebrow">Bridal Makeup</div>
            <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 84px)", margin: "20px 0 0", color: "var(--coffee)", textWrap: "balance" }}>
              Bridal Makeup
              <span className="italic" style={{ color: "var(--rose)" }}> available worldwide.</span>
            </h2>
          </div>
          <p className="body-lg" style={{ maxWidth: 520, justifySelf: "end" }}>
            Agenda tu fecha desde cualquier ciudad del mundo.
            Reservas y cotizaciones directamente por WhatsApp.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.08fr", gap: 44, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div style={{
              padding: "34px 36px",
              background: "var(--paper)",
              border: "1px solid var(--marfil)",
              borderRadius: 4,
            }}>
              <div className="eyebrow" style={{ color: "var(--rose)" }}>Bridal Makeup</div>
              <h3 className="display" style={{ fontSize: 36, margin: "14px 0 20px", color: "var(--coffee)" }}>
                Reserva internacional
              </h3>
              <p style={{ margin: 0, color: "var(--coffee-soft)", fontSize: 15, lineHeight: 1.7 }}>
                Acompañamiento para novias en destino, cobertura el día del evento
                y preparación completa para un look duradero y fiel a tu esencia.
              </p>
              <hr className="hairline" style={{ margin: "28px 0" }} />
              <div className="eyebrow" style={{ color: "var(--rose)" }}>Book via WhatsApp</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gap: 14 }}>
                {["Disponibilidad worldwide", "Fechas limitadas por temporada", "Atención personalizada por Ana Paula"].map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--rose)", flex: "0 0 auto", transform: "translateY(2px)" }}></span>
                    <span style={{ color: "var(--coffee)", fontSize: 15 }}>{it}</span>
                  </li>
                ))}
              </ul>
              <a href="https://wa.me/523320126620" target="_blank" rel="noreferrer" className="btn btn-rose" style={{ marginTop: 28 }}>
                +52 33 2012 6620
              </a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {bridalImages.map((src, idx) => (
              <img
                key={src}
                src={src}
                alt={`Bridal makeup look ${idx + 1}`}
                style={{ width: "100%", aspectRatio: idx % 3 === 0 ? "3/4" : "1/1", objectFit: "cover", borderRadius: 4 }}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;