// Equipo — two founders, side-by-side desktop, stacked mobile.
// Default view shows the bio summary (paragraph one of the verbatim text).
// "Ver perfil completo →" expands an accordion with the remaining paragraphs,
// formación list, and LinkedIn link. Portrait is a typographic placeholder
// labelled "Retrato en producción" — to be replaced with real photography.

const FOUNDERS = [
  {
    name: "Macarena Torres Villalón",
    specialty: "Abogada · Litigación penal, patrimonial y de familia",
    summary:
      "Macarena Torres Villalón es abogada titulada por la Universidad Diego Portales (2022). Su práctica profesional se ha desarrollado en litigación, tramitación de causas complejas y representación ante tribunales, abarcando materias penales, patrimoniales y de familia. A lo largo de su trayectoria, su paso por equipos de litigación reconocidos del medio jurídico le ha permitido consolidar experiencia en juicios de alta exigencia técnica, en sede ordinaria y ante los Tribunales Superiores de Justicia, así como en el trabajo coordinado con equipos multidisciplinarios y clientes de primera línea.",
    more: [
      "Ha participado en la gestión estratégica de casos de alta complejidad jurídica y connotación pública, con especial dedicación a causas de violencia intrafamiliar, conflictos familiares, delitos económicos y protección de derechos fundamentales. Esta práctica combina rigor técnico con una sensibilidad particular hacia las dimensiones humanas, patrimoniales y reputacionales que cruzan este tipo de controversias, orientación que se ve reforzada por su formación en Intervención Especializada en niños, niñas y adolescentes en casos de abuso, realizada en la Pontificia Universidad Católica de Chile.",
      "Su enfoque profesional combina una mirada estratégica y cercana con la incorporación de herramientas tecnológicas que optimizan cada etapa del trabajo jurídico, lo que le permite ofrecer un servicio más eficiente, preciso y personalizado.",
    ],
    formacion: [
      "Abogada, Universidad Diego Portales (2022)",
      "Licenciada en Ciencias Jurídicas y Sociales, UDP (2020)",
      "Bachiller en Ciencias Sociales, UDP (2015)",
      "Intervención Especializada en N.N.A. en casos de abuso, Pontificia Universidad Católica (2023)",
    ],
    linkedin: "Macarena Torres Villalón",
    linkedinUrl: null,
  },
  {
    name: "Ignacio Riveros Muñoz",
    specialty: "Abogado · Litigación civil, comercial, laboral, familia y consumidor",
    summary:
      "Ignacio Riveros Muñoz es abogado titulado por la Universidad Diego Portales (2014), con más de diez años de experiencia en litigación civil, comercial, laboral, de familia y de consumidor. Su trayectoria se ha desarrollado en estudios de litigación de primer nivel del medio jurídico chileno, donde ha estado a cargo de la tramitación de causas complejas y de la representación de sus clientes ante tribunales ordinarios, los Tribunales Superiores de Justicia y la justicia arbitral, incluyendo arbitrajes sofisticados ante el Centro de Arbitraje y Mediación (CAM) y árbitros ad hoc.",
    more: [
      "Esta trayectoria le ha permitido consolidar una práctica robusta en juicios civiles y comerciales de toda índole, con experiencia relevante en alegatos ante Cortes de Apelaciones y la Corte Suprema. Ha participado en la gestión estratégica de casos de alta complejidad y connotación pública, con foco particular en responsabilidad civil, conflictos familiares y asuntos sucesorios complejos.",
      "Su enfoque profesional combina una mirada estratégica y cercana con la incorporación de herramientas tecnológicas que optimizan cada etapa del trabajo jurídico, lo que le permite entregar un servicio más eficiente, preciso y personalizado.",
    ],
    formacion: [
      "Abogado, Universidad Diego Portales (2014)",
      "Licenciado en Ciencias Jurídicas y Sociales, UDP (2013)",
      "Diplomado en Derecho Laboral y Litigación, UDP (2015)",
      "Postítulo en Derecho Sucesorio, Universidad de Concepción (2023)",
    ],
    linkedin: "Ignacio Riveros Muñoz",
    linkedinUrl: "https://www.linkedin.com/in/ignacio-riveros-mu%C3%B1oz-00751b35/",
  },
];

function Founders() {
  return (
    <section
      id="equipo"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "var(--section-gap) var(--container-pad)",
      }}
    >
      <SectionHeader number="02" eyebrow="Equipo" title="Los socios." />

      <div
        style={{
          marginTop: "clamp(2.5rem, 5vw, 4rem)",
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))",
          gap: "clamp(2rem, 4vw, 4rem)",
        }}
      >
        {FOUNDERS.map((p) => (
          <FounderCard key={p.name} person={p} />
        ))}
      </div>
    </section>
  );
}

function FounderCard({ person }) {
  const [open, setOpen] = React.useState(false);

  return (
    <article
      style={{
        borderTop: "1px solid var(--line)",
        paddingTop: "clamp(1.5rem, 3vw, 2rem)",
        display: "grid",
        gridTemplateColumns: "minmax(140px, 220px) 1fr",
        gap: "clamp(1.25rem, 3vw, 2rem)",
        alignItems: "start",
      }}
    >
      <PortraitPlaceholder />

      <div>
        <div
          style={{
            fontFamily: "var(--font-ui)",
            fontWeight: 500,
            fontSize: 12,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
            marginBottom: 10,
          }}
        >
          {person.specialty}
        </div>
        <h3
          style={{
            margin: 0,
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(1.5rem, 2.2vw, 2rem)",
            letterSpacing: "-0.015em",
            lineHeight: 1.12,
            color: "var(--ink)",
          }}
        >
          {person.name}
        </h3>

        <p
          style={{
            margin: "20px 0 0",
            fontFamily: "var(--font-ui)",
            fontSize: 16,
            lineHeight: 1.65,
            color: "var(--ink-muted)",
            maxWidth: "52ch",
          }}
        >
          {person.summary}
        </p>

        <button
          type="button"
          onClick={() => setOpen((v) => !v)}
          aria-expanded={open}
          style={{
            marginTop: 18,
            background: "transparent",
            border: 0,
            padding: 0,
            cursor: "pointer",
            color: "var(--accent)",
            fontFamily: "var(--font-ui)",
            fontSize: 15,
            fontWeight: 500,
            display: "inline-flex",
            alignItems: "baseline",
            gap: 8,
            borderBottom: "1px solid var(--accent)",
            paddingBottom: 2,
          }}
        >
          <span>{open ? "Ver menos" : "Ver perfil completo"}</span>
          <span
            style={{
              display: "inline-block",
              transition: "transform 250ms var(--ease-std)",
              transform: open ? "rotate(90deg)" : "rotate(0deg)",
            }}
          >
            →
          </span>
        </button>

        <div
          style={{
            maxHeight: open ? 1600 : 0,
            overflow: "hidden",
            transition: "max-height 450ms var(--ease-std)",
          }}
        >
          <div style={{ paddingTop: 24 }}>
            {person.more.map((para, i) => (
              <p
                key={i}
                style={{
                  margin: i === 0 ? 0 : "16px 0 0",
                  fontFamily: "var(--font-ui)",
                  fontSize: 16,
                  lineHeight: 1.65,
                  color: "var(--ink-muted)",
                  maxWidth: "52ch",
                }}
              >
                {para}
              </p>
            ))}

            <div
              style={{
                marginTop: 28,
                paddingTop: 22,
                borderTop: "1px solid var(--line)",
              }}
            >
              <div
                style={{
                  fontFamily: "var(--font-ui)",
                  fontWeight: 500,
                  fontSize: 11,
                  letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  color: "var(--ink-subtle)",
                  marginBottom: 14,
                }}
              >
                Formación
              </div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
                {person.formacion.map((f) => (
                  <li
                    key={f}
                    style={{
                      padding: "6px 0",
                      fontFamily: "var(--font-display)",
                      fontWeight: 400,
                      fontSize: 17,
                      letterSpacing: "-0.005em",
                      color: "var(--ink)",
                      lineHeight: 1.4,
                      display: "flex",
                      alignItems: "baseline",
                      gap: 12,
                    }}
                  >
                    <span style={{ color: "var(--accent)", fontFamily: "var(--font-ui)", fontSize: 13 }}>—</span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ marginTop: 22 }}>
              <a
                href={person.linkedinUrl || "#"}
                target={person.linkedinUrl ? "_blank" : undefined}
                rel={person.linkedinUrl ? "noopener noreferrer" : undefined}
                aria-disabled={person.linkedinUrl ? undefined : true}
                style={{
                  display: "inline-flex",
                  alignItems: "baseline",
                  gap: 8,
                  color: "var(--ink)",
                  textDecoration: "none",
                  borderBottom: "1px solid var(--line)",
                  paddingBottom: 2,
                  fontFamily: "var(--font-ui)",
                  fontSize: 15,
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderBottomColor = "var(--accent)";
                  e.currentTarget.style.color = "var(--accent)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderBottomColor = "var(--line)";
                  e.currentTarget.style.color = "var(--ink)";
                }}
              >
                <span>LinkedIn · {person.linkedin}</span>
                <span>→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

function PortraitPlaceholder() {
  return (
    <div
      aria-hidden="true"
      style={{
        aspectRatio: "4 / 5",
        background: "var(--bg-elevated)",
        border: "1px solid var(--line)",
        position: "relative",
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "flex-start",
        padding: 14,
      }}
    >
      <span
        style={{
          fontFamily: "var(--font-ui)",
          fontSize: 10,
          letterSpacing: "0.15em",
          textTransform: "uppercase",
          color: "var(--ink-subtle)",
        }}
      >
        Retrato en producción
      </span>
    </div>
  );
}

Object.assign(window, { Founders });
