// Áreas de práctica — editorial numbered index. Six rows, full-width,
// hairline above each. Clicking a row expands a drawer that reformats the
// verbatim summary as a tidy list of materias (and, for Penal, urgencias).
// Row anatomy per brief:
//   cols 1–2  : large bordeaux Fraunces numeral, weight 300, 4rem
//   cols 3–6  : area name, Fraunces 1.75rem weight 400
//   cols 7–12 : one-line summary in Bricolage --ink-muted

const AREAS = [
  {
    num: "i.",
    title: "Civil",
    summary:
      "Indemnización de perjuicios, negligencias médicas, arrendamientos, defensa de deudores, controversias contractuales, asuntos sucesorios.",
    groups: [
      {
        matters: [
          "Indemnización de perjuicios",
          "Negligencias médicas",
          "Arrendamientos",
          "Defensa de deudores",
          "Controversias contractuales",
          "Asuntos sucesorios",
        ],
      },
    ],
  },
  {
    num: "ii.",
    title: "Penal",
    summary:
      "Delitos cortos (conducción en estado de ebriedad, causas VIF) y asesorías en compliance. Urgencias: medidas cautelares, controles de detención, recursos de amparo, cautela de garantías.",
    groups: [
      {
        label: "Materias",
        matters: [
          "Delitos cortos (conducción en estado de ebriedad, causas VIF)",
          "Asesorías en compliance",
        ],
      },
      {
        label: "Urgencias",
        matters: [
          "Medidas cautelares",
          "Controles de detención",
          "Recursos de amparo",
          "Cautela de garantías",
        ],
      },
    ],
  },
  {
    num: "iii.",
    title: "Familia",
    summary:
      "Divorcios, regulación de relación directa y regular, compensación económica, cese de pensiones, causas proteccionales.",
    groups: [
      {
        matters: [
          "Divorcios",
          "Regulación de relación directa y regular",
          "Compensación económica",
          "Cese de pensiones",
          "Causas proteccionales",
        ],
      },
    ],
  },
  {
    num: "iv.",
    title: "Laboral",
    summary: "Asesoría y litigación laboral, defensa de empleadores y trabajadores.",
    groups: [
      {
        matters: ["Asesoría y litigación laboral", "Defensa de empleadores y trabajadores"],
      },
    ],
  },
  {
    num: "v.",
    title: "Consumidor",
    summary: "Asesoría y litigación en protección al consumidor.",
    groups: [
      {
        matters: ["Asesoría y litigación en protección al consumidor"],
      },
    ],
  },
  {
    num: "vi.",
    title: "Administrativo",
    summary:
      "Gestiones ante FFAA y orden público: reincorporaciones, bajas, recursos administrativos.",
    groups: [
      {
        label: "Gestiones ante FFAA y orden público",
        matters: ["Reincorporaciones", "Bajas", "Recursos administrativos"],
      },
    ],
  },
];

function Practice() {
  const [openIdx, setOpenIdx] = React.useState(-1);

  return (
    <section
      id="practica"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "var(--section-gap) var(--container-pad)",
      }}
    >
      <SectionHeader number="03" eyebrow="Áreas de práctica" title="Materias en las que trabajamos." />

      <ol style={{ listStyle: "none", margin: "clamp(2.5rem, 5vw, 4rem) 0 0", padding: 0 }}>
        {AREAS.map((a, i) => (
          <PracticeRow
            key={a.num}
            area={a}
            open={openIdx === i}
            isLast={i === AREAS.length - 1}
            onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
          />
        ))}
      </ol>
    </section>
  );
}

function PracticeRow({ area, open, isLast, onToggle }) {
  return (
    <li
      style={{
        borderTop: "1px solid var(--line)",
        borderBottom: isLast ? "1px solid var(--line)" : "none",
      }}
    >
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={open}
        style={{
          width: "100%",
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: "clamp(1rem, 2.5vw, 2rem)",
          alignItems: "baseline",
          padding: "clamp(1.75rem, 3vw, 2.5rem) 0",
          background: "transparent",
          border: 0,
          cursor: "pointer",
          textAlign: "left",
          color: "var(--ink)",
          transition: "color 250ms var(--ease-std)",
        }}
        onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
        onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink)")}
      >
        <span
          style={{
            gridColumn: "1 / span 2",
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: "clamp(2.5rem, 4vw, 4rem)",
            color: "var(--accent)",
            lineHeight: 1,
            letterSpacing: "-0.02em",
          }}
        >
          {area.num}
        </span>

        <span
          style={{
            gridColumn: "3 / span 4",
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(1.375rem, 2.2vw, 1.75rem)",
            letterSpacing: "-0.015em",
            lineHeight: 1.15,
          }}
        >
          {area.title}
        </span>

        <span
          style={{
            gridColumn: "7 / span 5",
            fontFamily: "var(--font-ui)",
            fontSize: 15,
            lineHeight: 1.55,
            color: "var(--ink-muted)",
          }}
        >
          {area.summary}
        </span>

        <span
          style={{
            gridColumn: "12 / span 1",
            justifySelf: "end",
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontSize: 22,
            color: "var(--ink-subtle)",
            lineHeight: 1,
            transition: "transform 250ms var(--ease-std), color 250ms var(--ease-std)",
            transform: open ? "rotate(45deg)" : "rotate(0deg)",
            color: open ? "var(--accent)" : "var(--ink-subtle)",
          }}
          aria-hidden="true"
        >
          +
        </span>
      </button>

      <div
        style={{
          maxHeight: open ? 600 : 0,
          overflow: "hidden",
          transition: "max-height 400ms var(--ease-std)",
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(12, 1fr)",
            gap: "clamp(1rem, 2.5vw, 2rem)",
            padding: "0 0 clamp(2rem, 3.5vw, 3rem)",
          }}
        >
          <div
            style={{
              gridColumn: "3 / span 9",
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
              gap: "clamp(1.5rem, 3vw, 2.5rem)",
            }}
          >
            {area.groups.map((g, gi) => (
              <div key={gi}>
                {g.label && (
                  <div
                    style={{
                      fontFamily: "var(--font-ui)",
                      fontSize: 11,
                      fontWeight: 500,
                      letterSpacing: "0.15em",
                      textTransform: "uppercase",
                      color: "var(--ink-subtle)",
                      marginBottom: 12,
                    }}
                  >
                    {g.label}
                  </div>
                )}
                <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
                  {g.matters.map((m) => (
                    <li
                      key={m}
                      style={{
                        padding: "6px 0",
                        fontFamily: "var(--font-display)",
                        fontWeight: 400,
                        fontSize: "clamp(1rem, 1.4vw, 1.125rem)",
                        letterSpacing: "-0.005em",
                        color: "var(--ink)",
                        lineHeight: 1.45,
                        display: "flex",
                        alignItems: "baseline",
                        gap: 12,
                      }}
                    >
                      <span style={{ color: "var(--accent)", fontFamily: "var(--font-ui)", fontSize: 13 }}>
                        —
                      </span>
                      {m}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </li>
  );
}

Object.assign(window, { Practice });