// Agendar — sección dedicada para coordinar la primera consulta.
// ---------------------------------------------------------------------------
// Ronda 2 (may-2026): consolidación de contacto. El brief pidió que el
// "Agendar consulta" viva en UN solo lugar al final de la página, dentro
// de su propio bloque con: descripción del paso a paso + CTA al mailto +
// (cuando lo activen) integración con Calendly.
//
// Esta sección reemplaza el "Agenda directa: Próximamente" que vivía como
// canal en la sección Contacto, y queda como sección 06 entre Contacto y
// FAQ. El nav del sitio expone el ancla #agendar.
//
// Touch target del CTA: padding generoso para superar 44×44 px (CLAUDE.md
// ronda 2). El link va vía mailto plano; cuando el cliente confirme su
// Calendly, swap del href a la URL del evento + leve label change.

const MAIL_HREF = "mailto:contacto@riverosytorres.cl?subject=Agendar%20consulta%20de%2030%20minutos";

function Agendar() {
  const pasos = [
    {
      n: "1",
      title: "Escríbenos",
      body:
        "Por WhatsApp, correo o el formulario de Contacto. Cuéntanos brevemente el asunto, sin incluir información sensible.",
    },
    {
      n: "2",
      title: "Coordinamos día y hora",
      body:
        "Te proponemos un horario dentro del día hábil siguiente. La reunión es por videollamada, o presencial en Santiago si el caso lo requiere.",
    },
    {
      n: "3",
      title: "Conversamos 30 minutos",
      body:
        "Sin costo. Sirve para entender el asunto, evaluar viabilidad y decirte con claridad si tenemos algo que aportar.",
    },
  ];

  return (
    <section
      id="agendar"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "var(--section-gap) var(--container-pad)",
      }}
    >
      <SectionHeader
        number="06"
        eyebrow="Agendar"
        title="Cómo agendar una primera consulta."
      />

      <div
        style={{
          marginTop: "clamp(2.5rem, 5vw, 4rem)",
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: "clamp(1.5rem, 3vw, 2.5rem)",
          alignItems: "start",
        }}
      >
        {/* Cols 1–7: paso a paso. */}
        <ol
          className="rt-agendar-steps"
          style={{
            gridColumn: "1 / span 7",
            listStyle: "none",
            margin: 0,
            padding: 0,
            display: "flex",
            flexDirection: "column",
            gap: "clamp(1.25rem, 2.5vw, 1.75rem)",
          }}
        >
          {pasos.map((p) => (
            <li
              key={p.n}
              style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: "clamp(1rem, 2vw, 1.5rem)",
                alignItems: "baseline",
                borderTop: "1px solid var(--line)",
                paddingTop: "clamp(1rem, 2vw, 1.5rem)",
              }}
            >
              <span
                aria-hidden="true"
                style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 400,
                  fontStyle: "italic",
                  fontSize: "clamp(1.5rem, 2vw, 1.875rem)",
                  color: "var(--accent)",
                  lineHeight: 1,
                }}
              >
                {p.n}
              </span>
              <div>
                <h3
                  style={{
                    margin: 0,
                    fontFamily: "var(--font-display)",
                    fontWeight: 500,
                    fontSize: "clamp(1.125rem, 1.7vw, 1.375rem)",
                    letterSpacing: "-0.01em",
                    lineHeight: 1.2,
                    color: "var(--ink)",
                  }}
                >
                  {p.title}
                </h3>
                <p
                  style={{
                    margin: "8px 0 0",
                    fontFamily: "var(--font-ui)",
                    fontSize: 16,
                    lineHeight: 1.6,
                    color: "var(--ink-muted)",
                    maxWidth: "58ch",
                  }}
                >
                  {p.body}
                </p>
              </div>
            </li>
          ))}
        </ol>

        {/* Cols 9–12: bloque CTA con el mailto + placeholder Calendly. */}
        <aside
          className="rt-agendar-cta"
          style={{
            gridColumn: "9 / span 4",
            background: "var(--bg-elevated)",
            border: "1px solid var(--line)",
            borderRadius: 4,
            padding: "clamp(1.5rem, 2.5vw, 2rem)",
            display: "flex",
            flexDirection: "column",
            gap: 16,
          }}
        >
          <div
            style={{
              fontFamily: "var(--font-ui)",
              fontWeight: 500,
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--ink-subtle)",
            }}
          >
            Consulta inicial
          </div>
          <div
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: "clamp(1.25rem, 1.8vw, 1.5rem)",
              letterSpacing: "-0.01em",
              lineHeight: 1.2,
              color: "var(--ink)",
            }}
          >
            30 minutos, sin costo, por videollamada.
          </div>
          <a
            href={MAIL_HREF}
            className="btn-primary"
            style={{
              alignSelf: "flex-start",
              // Touch target: padding del btn-primary (12×22) + fontSize 15
              // da ~46px de altura. minHeight 48 lo asegura siempre.
              minHeight: 48,
              padding: "14px 22px",
              boxSizing: "border-box",
            }}
          >
            Agendar consulta de 30 minutos
            <ArrowRight width={16} height={16} />
          </a>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--font-ui)",
              fontSize: 13,
              lineHeight: 1.5,
              color: "var(--ink-subtle)",
            }}
          >
            Calendario online en preparación. Mientras tanto, coordinamos por
            correo dentro del día hábil siguiente.
          </p>
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { Agendar });