function Process() {
  const steps = [
    {
      n: "01",
      title: "Conexión",
      sub: "Antes del espejo.",
      desc: "Una llamada o videollamada para escucharte. Tu visión, tu vestido, el lugar, la luz, las personas que te rodean. Esto guía cada decisión.",
      time: "30 min · sin costo",
    },
    {
      n: "02",
      title: "Trial",
      sub: "Una prueba real.",
      desc: "Una sesión completa de maquillaje y diseño de ceja, con condiciones idénticas al día del evento. Ajustes finos hasta sentirnos seguras.",
      time: "2.5 hrs · estudio Guadalajara",
    },
    {
      n: "03",
      title: "Preparación",
      sub: "Los días previos.",
      desc: "Recomendaciones de cuidado de piel, descanso y rituales preparatorios. Lo que sucede afuera se ve en el rostro.",
      time: "Semanas previas",
    },
    {
      n: "04",
      title: "El día",
      sub: "Acompañamiento.",
      desc: "Llegamos antes de tiempo. Maquillaje a domicilio o en el venue. Touch-ups previos a ceremonia, civil y sesión. Una oración antes de empezar.",
      time: "5–8 hrs · presencia plena",
    },
  ];

  return (
    <section id="proceso" style={{ padding: "140px 0", background: "var(--paper)" }}>
      <div className="container">
        <div style={{ marginBottom: 80, maxWidth: 720 }}>
          <div className="eyebrow">Proceso · 06</div>
          <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 84px)", margin: "20px 0 24px", color: "var(--coffee)", textWrap: "balance" }}>
            Un ritual en<br/>
            <span className="italic" style={{ color: "var(--rose)" }}>cuatro tiempos.</span>
          </h2>
          <p className="body-lg" style={{ maxWidth: 540 }}>
            Desde la primera conversación hasta el último retoque, cada
            etapa está pensada para que llegues al día con calma — y todo lo demás, ya esté resuelto.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--marfil)" }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: "40px 28px 40px 0",
              borderRight: i < steps.length - 1 ? "1px solid var(--marfil)" : "0",
              paddingLeft: i === 0 ? 0 : 28,
              position: "relative",
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 24 }}>
                <span className="display italic" style={{ fontSize: 40, color: "var(--rose)" }}>{s.n}</span>
                <span style={{ flex: 1, height: 1, background: "var(--marfil)" }}></span>
              </div>
              <h3 className="display" style={{ fontSize: 32, margin: 0, color: "var(--coffee)" }}>{s.title}</h3>
              <p className="display italic" style={{ fontSize: 18, color: "var(--rose)", margin: "4px 0 16px" }}>{s.sub}</p>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--coffee-soft)", marginBottom: 24, textWrap: "pretty" }}>{s.desc}</p>
              <div className="eyebrow">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;