// Enfoque — the one dark moment per page. Inverted on --bg-deep.
// Three pillars, each with a small bordeaux numeral above its title.
function HowWeWork() {
  const pillars = [
    {
      n: "01",
      title: "Cercano",
      body:
        "Acompañamiento real desde la primera conversación hasta el cumplimiento del resultado. Lenguaje claro, sin tecnicismos innecesarios.",
    },
    {
      n: "02",
      title: "Estratégico",
      body:
        "Mirada interdisciplinaria y experiencia en litigación de alta exigencia técnica. Cada caso recibe una estrategia diseñada, no una plantilla.",
    },
    {
      n: "03",
      title: "Tecnológico",
      body:
        "Herramientas digitales que optimizan procesos y tiempos, para que el foco del trabajo sea el análisis jurídico y la relación con el cliente.",
    },
  ];

  return (
    <section
      id="metodo"
      style={{
        background: "var(--bg-deep)",
        color: "var(--ink-inverse)",
        padding: "var(--section-gap) 0",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max)",
          margin: "0 auto",
          padding: "0 var(--container-pad)",
        }}
      >
        <SectionHeader number="04" eyebrow="Enfoque" title="Cómo trabajamos." dark />

        <div
          style={{
            marginTop: "clamp(3.5rem, 7vh, 6rem)",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            gap: "clamp(2rem, 4vw, 4rem)",
            borderTop: "1px solid var(--line-deep)",
            paddingTop: "clamp(2.5rem, 4vw, 3.5rem)",
          }}
        >
          {pillars.map((p) => (
            <div key={p.n}>
              <div
                style={{
                  fontFamily: "var(--font-display)",
                  fontStyle: "italic",
                  fontWeight: 400,
                  fontSize: 16,
                  color: "var(--accent)",
                  marginBottom: 12,
                  letterSpacing: "0.02em",
                }}
              >
                {p.n}
              </div>
              <h3
                style={{
                  margin: 0,
                  fontFamily: "var(--font-display)",
                  fontWeight: 400,
                  fontSize: "clamp(1.75rem, 2.6vw, 2.25rem)",
                  letterSpacing: "-0.015em",
                  lineHeight: 1.1,
                  color: "var(--ink-inverse)",
                  marginBottom: 16,
                }}
              >
                {p.title}
              </h3>
              <p
                style={{
                  margin: 0,
                  fontFamily: "var(--font-ui)",
                  fontSize: 16,
                  lineHeight: 1.65,
                  color: "rgba(255,255,255,0.72)",
                  maxWidth: "36ch",
                }}
              >
                {p.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowWeWork });