// FAQ — six questions, hairline-divided accordion. Answers written sober and
// direct, two-three sentences each. Chilean register, no banlist phrases.
const FAQS = [
  {
    q: "¿Cómo agendo una primera consulta?",
    a: "Puedes escribirnos por el formulario de esta página, por WhatsApp o por correo a contacto@riverostorresycia.cl. Coordinamos una reunión de 45 minutos, presencial en nuestra oficina de Providencia o por videollamada. La primera conversación no tiene costo y sirve para entender el asunto y decirte si tenemos algo que aportar.",
  },
  {
    q: "¿Cuáles son las formas de pago?",
    a: "Aceptamos transferencia bancaria y pago electrónico. Si el trabajo se pacta por etapas o con iguala mensual, definimos el calendario por escrito al inicio del encargo. Emitimos boleta o factura según corresponda.",
  },
  {
    q: "¿Por qué canales puedo comunicarme con el estudio?",
    a: "Tres canales: correo electrónico, WhatsApp y el formulario de contacto de este sitio. WhatsApp es la vía más rápida y queda monitoreada por ambos socios durante el horario hábil. Para asuntos urgentes fuera de horario, ver la pregunta siguiente.",
  },
  {
    q: "¿En cuánto tiempo responden una consulta?",
    a: "Respondemos toda consulta en el día hábil. En la práctica, las consultas por WhatsApp y correo suelen responderse dentro de las primeras horas. Si la respuesta requiere análisis previo del asunto, te avisamos cuándo esperarla.",
  },
  {
    q: "¿Atienden urgencias fuera de horario hábil?",
    a: "Sí, en materia penal. Para detenciones, audiencias inminentes o medidas cautelares, escríbenos por WhatsApp con la palabra URGENTE y respondemos cuanto antes. Para otras materias, derivamos la respuesta al siguiente día hábil.",
  },
  {
    q: "¿Cómo cobran sus honorarios?",
    a: "Trabajamos con honorarios pactados al inicio del encargo, no con tarifa por hora abierta. Según el caso, puede ser una cifra fija por etapa, una iguala mensual o un porcentaje sobre el resultado. El acuerdo queda por escrito antes de comenzar; si el alcance cambia, lo conversamos antes de continuar.",
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);

  return (
    <section
      id="faq"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "var(--section-gap) var(--container-pad)",
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 4fr) minmax(0, 8fr)",
          gap: "clamp(2rem, 5vw, 5rem)",
          alignItems: "start",
        }}
      >
        <SectionHeader number="06" eyebrow="Preguntas frecuentes" title="Lo que solemos resolver primero." />

        <div>
          {FAQS.map((it, i) => {
            const isOpen = open === i;
            return (
              <div
                key={i}
                style={{
                  borderTop: "1px solid var(--line)",
                  borderBottom: i === FAQS.length - 1 ? "1px solid var(--line)" : "none",
                }}
              >
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%",
                    display: "grid",
                    gridTemplateColumns: "1fr auto",
                    gap: 16,
                    alignItems: "center",
                    padding: "clamp(1.25rem, 2.5vw, 1.75rem) 0",
                    background: "transparent",
                    border: 0,
                    cursor: "pointer",
                    color: "var(--ink)",
                    textAlign: "left",
                    fontFamily: "var(--font-display)",
                    fontWeight: 400,
                    fontSize: "clamp(1.125rem, 1.7vw, 1.25rem)",
                    letterSpacing: "-0.01em",
                    lineHeight: 1.3,
                  }}
                >
                  <span>{it.q}</span>
                  <span style={{ color: isOpen ? "var(--accent)" : "var(--ink-muted)", display: "inline-flex" }}>
                    {isOpen ? <Minus /> : <Plus />}
                  </span>
                </button>
                <div
                  style={{
                    maxHeight: isOpen ? 500 : 0,
                    overflow: "hidden",
                    transition: "max-height 400ms var(--ease-std)",
                  }}
                >
                  <p
                    style={{
                      margin: 0,
                      paddingBottom: "clamp(1.25rem, 2.5vw, 1.75rem)",
                      fontFamily: "var(--font-ui)",
                      fontSize: 16,
                      lineHeight: 1.65,
                      color: "var(--ink-muted)",
                      maxWidth: "62ch",
                    }}
                  >
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });