// areas.jsx — practice areas: interactive master–detail showcase
const AREAS = [
  {
    icon: "familia", n: "01", title: "Derecho de Familia", short: "Familia",
    lead: "Acompañamiento en los momentos más sensibles, protegiendo a quienes más quieres.",
    items: ["Divorcios de común acuerdo y contenciosos", "Pensión de alimentos", "Cuidado personal y relación directa y regular", "Declaración de bien familiar", "Violencia intrafamiliar"],
  },
  {
    icon: "civil", n: "02", title: "Derecho Civil", short: "Civil",
    lead: "Soluciones a conflictos patrimoniales y contractuales con estrategia y respaldo.",
    items: ["Contratos y responsabilidad civil", "Cobranzas judiciales y extrajudiciales", "Arriendos y terminación de contratos", "Herencias y posesión efectiva", "Indemnización de perjuicios"],
  },
  {
    icon: "policia", n: "03", title: "Derecho de Policía Local", short: "Policía Local",
    lead: "Defensa ágil ante juzgados de policía local y conflictos cotidianos.",
    items: ["Infracciones y accidentes de tránsito", "Multas y reclamos", "Conflictos entre vecinos", "Ley del Consumidor (SERNAC)", "Comparendos y audiencias"],
  },
  {
    icon: "laboral", n: "04", title: "Derecho Laboral", short: "Laboral",
    lead: "Protección de tus derechos como trabajador, con firmeza y claridad.",
    items: ["Despidos injustificados y autodespido", "Revisión y cobro de finiquitos", "Tutela de derechos fundamentales", "Cobro de prestaciones e indemnizaciones", "Accidentes del trabajo"],
  },
  {
    icon: "admin", n: "05", title: "Derecho Administrativo", short: "Administrativo",
    lead: "Representación frente a municipios y organismos del Estado.",
    items: ["Reclamos ante municipalidades", "Recursos y procedimientos administrativos", "Sumarios administrativos", "Permisos y patentes", "Reclamaciones ante el Estado"],
  },
];

function Areas() {
  const [active, setActive] = React.useState(0);
  const a = AREAS[active];

  return (
    <section id="areas" className="relative overflow-hidden bg-paper py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-10">
        <div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <div className="max-w-2xl">
            <Eyebrow className="text-bronze">Áreas legales</Eyebrow>
            <h2 className="mt-5 font-display text-[clamp(2.2rem,4.5vw,3.4rem)] font-semibold leading-[1.05] text-ink">
              Asesoría especializada en cinco áreas del derecho
            </h2>
          </div>
          <p className="max-w-sm text-pretty font-body text-[15.5px] leading-relaxed text-ink/60">
            Cada caso es único. Analizo tu situación en profundidad antes de definir una estrategia. Explora cada área.
          </p>
        </div>

        {/* Mobile chip selector */}
        <div className="mt-10 flex gap-2.5 overflow-x-auto pb-2 lg:hidden [scrollbar-width:none] [-ms-overflow-style:none]">
          {AREAS.map((area, i) => (
            <button key={area.title} onClick={() => setActive(i)}
              className={`shrink-0 whitespace-nowrap rounded-full border px-4 py-2 font-body text-[13.5px] font-semibold transition-all ${active === i ? "border-bronze bg-bronze text-white" : "border-ink/15 text-ink/70"}`}>
              {area.short}
            </button>
          ))}
        </div>

        <div className="mt-8 grid items-stretch gap-5 lg:mt-14 lg:grid-cols-[0.82fr_1.18fr] lg:gap-7">
          {/* Selector list (desktop) */}
          <div className="hidden flex-col lg:flex">
            {AREAS.map((area, i) => {
              const on = active === i;
              return (
                <button key={area.title} onClick={() => setActive(i)}
                  onMouseEnter={() => setActive(i)}
                  className={`group relative flex items-center gap-5 overflow-hidden rounded-sm px-6 py-5 text-left transition-shadow duration-300 ${on ? "bg-[#fbf6ec] shadow-[0_18px_44px_-28px_rgba(58,46,42,0.4)]" : "hover:bg-[#fbf6ec]/60"}`}>
                  <span className={`absolute left-0 top-1/2 w-[3px] -translate-y-1/2 bg-bronze ${on ? "h-[64%]" : "h-0 group-hover:h-[28%]"}`}></span>
                  <span className={`font-roman text-[15px] tracking-[0.12em] ${on ? "text-bronze" : "text-ink/35"}`}>{area.n}</span>
                  <span className="min-w-0 flex-1">
                    <span className={`block font-display text-[26px] font-semibold leading-tight ${on ? "text-ink" : "text-ink/60 group-hover:text-ink"}`}>{area.title}</span>
                  </span>
                  <span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${on ? "bg-bronze text-white" : "text-ink/30 group-hover:text-bronze"}`}>
                    <span className="block h-4 w-4"><Icon name="arrow" stroke={1.8} /></span>
                  </span>
                </button>
              );
            })}
            {/* Foto profesional */}
            <div className="relative mt-4 flex-1 overflow-hidden rounded-sm ring-1 ring-ink/10 shadow-[0_18px_44px_-30px_rgba(58,46,42,0.5)] min-h-[170px]">
              <img src="images/abogado-de-familia%202.jpg" alt="Asesoría legal en derecho de familia" className="h-full w-full object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-espresso/75 via-espresso/10 to-transparent"></div>
              <div className="absolute bottom-4 left-5 right-5">
                <span className="font-roman text-[11px] uppercase tracking-[0.28em] text-bronzelt">Compromiso y cercanía</span>
                <p className="mt-1 font-body text-[14px] font-medium leading-snug text-cream">Defendemos lo que más te importa, en cada etapa.</p>
              </div>
            </div>
          </div>

          {/* Detail panel */}
          <div className="relative min-h-[480px] overflow-hidden rounded-sm text-ink ring-1 ring-ink/10 shadow-[0_30px_64px_-44px_rgba(74,58,49,0.45)]" style={{ background: "linear-gradient(158deg, #fbf6ec 0%, #f1e8d8 100%)" }}>
            {/* Ghost number */}
            <span key={"n" + active} className="area-num pointer-events-none absolute -right-4 -top-10 select-none font-display text-[16rem] font-semibold leading-none text-ink/[0.05]">{a.n}</span>
            {/* Ghost icon watermark */}
            <span className="pointer-events-none absolute -bottom-8 -left-8 h-56 w-56 text-bronze/[0.08]"><Icon name={a.icon} stroke={0.8} /></span>

            <div key={active} className="area-in relative flex h-full flex-col p-9 lg:p-12">
              <div className="flex items-center gap-4">
                <span className="flex h-14 w-14 items-center justify-center rounded-sm bg-bronze/12 text-bronze ring-1 ring-bronze/25">
                  <span className="block h-7 w-7"><Icon name={a.icon} stroke={1.4} /></span>
                </span>
                <span className="font-roman text-[12.5px] uppercase tracking-[0.3em] text-bronze">Área {a.n} de 05</span>
              </div>

              <h3 className="mt-7 font-display text-[clamp(2.1rem,3.5vw,3rem)] font-semibold leading-[1.02] text-ink">{a.title}</h3>
              <p className="mt-4 max-w-lg text-pretty font-body text-[16.5px] leading-relaxed text-ink/70">{a.lead}</p>

              <div className="mt-8 h-px w-full bg-ink/12"></div>

              <ul className="mt-7 grid flex-1 content-start gap-x-8 gap-y-3.5 sm:grid-cols-2">
                {a.items.map((it, k) => (
                  <li key={it} className="flex items-start gap-3 font-body text-[15px] text-ink/80">
                    <span className="mt-[3px] flex h-4 w-4 shrink-0 items-center justify-center text-bronze"><Icon name="check" stroke={2.4} /></span>
                    {it}
                  </li>
                ))}
              </ul>

              <a href={WA_BASE(`Hola Paula, necesito asesoría en ${a.title}.`)} target="_blank" rel="noopener"
                 className="group mt-9 inline-flex w-fit items-center gap-2.5 rounded-sm bg-bronze px-6 py-3.5 font-body text-[14.5px] font-semibold tracking-wide text-white transition-all hover:brightness-95 hover:-translate-y-[1px]">
                <span className="block h-[18px] w-[18px]"><Icon name="wa" /></span>
                Consultar por este tema
                <span className="block h-4 w-4 transition-transform group-hover:translate-x-1"><Icon name="arrow" /></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Areas });