// hero.jsx — three switchable hero variants
function HeroBadge({ tone = "dark" }) {
  const isDark = tone === "dark";
  return (
    <div className={`inline-flex max-w-full items-center gap-2.5 whitespace-nowrap rounded-full px-4 py-2 font-body text-[12px] font-semibold tracking-wide sm:text-[12.5px] ${isDark ? "bg-bronze/15 text-bronzelt ring-1 ring-bronze/30" : "bg-bronze/12 text-bronze ring-1 ring-bronze/25"}`}>
      <span className="flex h-4 w-4 items-center justify-center rounded-full bg-bronze text-white"><span className="block h-2.5 w-2.5"><Icon name="check" stroke={2.4} /></span></span>
      Atención personalizada · respuesta dentro de 24 hrs
    </div>
  );
}

const HERO_AREAS = ["Familia", "Civil", "Policía Local", "Laboral", "Administrativo"];

// ───────────────────────── Variant A — Split editorial ─────────────────────
function HeroA({ showBadge }) {
  return (
    <section id="inicio" className="relative overflow-hidden bg-paper pt-[86px]">
      <div className="pointer-events-none absolute -right-40 top-10 h-[520px] w-[520px] rounded-full bg-bronze/[0.06] blur-3xl"></div>
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 pb-20 pt-14 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16 lg:px-10 lg:pb-28 lg:pt-20">
        <div>
          {showBadge && <div className="mb-7"><HeroBadge tone="light" /></div>}
          <Eyebrow className="text-bronze">Abogada · Talca, Región del Maule</Eyebrow>
          <h1 className="mt-6 font-display text-[clamp(2.9rem,6vw,5.1rem)] font-semibold leading-[0.98] tracking-[-0.01em] text-ink">
            Defensa jurídica<br />con rigor y<br /><span className="italic text-bronze">cercanía.</span>
          </h1>
          <p className="mt-7 max-w-xl text-pretty font-body text-[17px] leading-relaxed text-ink/70">
            Asesoría y representación legal en Talca y la Región del Maule. Acompaño cada causa con análisis riguroso, comunicación clara y un trato directo, para que tomes decisiones informadas y seguras.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3.5">
            <PrimaryBtn href={WA_AGENDAR}>Agenda tu consulta</PrimaryBtn>
            <GhostBtn href={`tel:${TEL}`} className="text-ink" icon="phone">Llamar ahora</GhostBtn>
          </div>
          <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-ink/10 pt-7">
            {HERO_AREAS.map((a) => (
              <span key={a} className="font-roman text-[13px] uppercase tracking-[0.18em] text-ink/55">{a}</span>
            ))}
          </div>
        </div>

        {/* Portrait */}
        <div className="relative mx-auto w-full max-w-md lg:max-w-none">
          <div className="absolute -left-5 -top-5 h-32 w-32 border-l-2 border-t-2 border-bronze/50"></div>
          <div className="absolute -bottom-5 -right-5 h-32 w-32 border-b-2 border-r-2 border-bronze/50"></div>
          <div className="w-full overflow-hidden rounded-sm" style={{ aspectRatio: "4/5" }}>
            <img src="images/paula-portrait.jpg" alt="Paula Rojas Rojas, abogada" className="h-full w-full object-cover" />
          </div>
          <div className="absolute -bottom-6 left-6 flex items-center gap-3 rounded-sm bg-espresso px-5 py-3.5 text-cream shadow-xl">
            <span className="block h-5 w-5 text-bronzelt"><Icon name="clock" /></span>
            <span className="font-body text-[13px] leading-tight"><span className="font-semibold">Lun a Vie</span><br />9:00 – 18:00 hrs</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────── Variant B — Full-bleed dark ─────────────────────
function HeroB({ showBadge }) {
  return (
    <section id="inicio" className="relative min-h-[100svh] overflow-hidden bg-espresso pt-[86px] text-cream">
      <image-slot id="paula-hero-b" class="absolute inset-0 block h-full w-full" style={{ width: "100%", height: "100%" }}
        fit="cover" shape="rect" src="images/images.jpg" placeholder="Imagen de oficina / escritorio jurídico"></image-slot>
      <div className="absolute inset-0 bg-gradient-to-r from-espresso via-espresso/92 to-espresso/45"></div>
      <div className="absolute inset-0 bg-gradient-to-t from-espresso/90 via-transparent to-espresso/40"></div>
      <div className="relative mx-auto flex min-h-[calc(100svh-86px)] max-w-7xl flex-col justify-center px-6 py-20 lg:px-10">
        <div className="max-w-2xl">
          {showBadge && <div className="mb-8"><HeroBadge tone="dark" /></div>}
          <Eyebrow className="text-bronzelt">Abogada · Talca, Región del Maule</Eyebrow>
          <h1 className="mt-6 font-display text-[clamp(3rem,6.5vw,5.6rem)] font-medium leading-[1.0] tracking-[-0.01em]">
            Tu tranquilidad legal<br />es mi <span className="italic text-bronzelt">compromiso.</span>
          </h1>
          <p className="mt-7 max-w-xl text-pretty font-body text-[17px] leading-relaxed text-cream/75">
            Asesoría y representación en Derecho de Familia, Civil, Policía Local, Laboral y Administrativo. Un acompañamiento riguroso y humano para resolver tu situación con respaldo profesional.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3.5">
            <PrimaryBtn href={WA_AGENDAR}>Agenda tu consulta</PrimaryBtn>
            <GhostBtn href={`tel:${TEL}`} className="text-cream border-cream/30" icon="phone">+56 9 9291 9059</GhostBtn>
          </div>
        </div>
        <div className="mt-16 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-cream/15 pt-7">
          {HERO_AREAS.map((a) => (
            <span key={a} className="font-roman text-[13px] uppercase tracking-[0.18em] text-cream/55">{a}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────── Variant C — Editorial nameplate ─────────────────
function HeroC({ showBadge }) {
  return (
    <section id="inicio" className="relative overflow-hidden bg-cream pt-[86px]">
      <div className="mx-auto max-w-7xl px-6 pb-16 pt-12 lg:px-10 lg:pb-24 lg:pt-16">
        <div className="flex items-center justify-between gap-4 border-b border-ink/15 pb-5">
          <Eyebrow className="text-bronze">Estudio Jurídico</Eyebrow>
          <span className="font-roman text-[12.5px] uppercase tracking-[0.28em] text-ink/55">Talca · Región del Maule</span>
        </div>
        {/* Giant nameplate */}
        <h1 className="mt-10 font-display font-semibold leading-[0.86] tracking-[-0.02em] text-ink">
          <span className="block text-[clamp(3.4rem,11vw,10rem)]">Paula Rojas</span>
          <span className="block text-[clamp(3.4rem,11vw,10rem)] italic text-bronze">Rojas</span>
        </h1>
        <div className="mt-10 grid items-end gap-10 border-t border-ink/15 pt-10 lg:grid-cols-[1fr_0.8fr] lg:gap-16">
          <div>
            <p className="max-w-xl text-pretty font-body text-[18px] leading-relaxed text-ink/72">
              Abogada dedicada a la asesoría y representación legal de personas y familias. Combino la solidez técnica del derecho con un trato cercano y honesto, para defender tus intereses en cada etapa del proceso.
            </p>
            {showBadge && <div className="mt-7"><HeroBadge tone="light" /></div>}
            <div className="mt-8 flex flex-wrap items-center gap-3.5">
              <PrimaryBtn href={WA_AGENDAR}>Agenda tu consulta</PrimaryBtn>
              <GhostBtn href={`tel:${TEL}`} className="text-ink" icon="phone">Llamar ahora</GhostBtn>
            </div>
          </div>
          <div className="relative">
            <div className="w-full overflow-hidden rounded-sm" style={{ aspectRatio: "5/6" }}>
              <img src="images/paula-portrait.jpg" alt="Paula Rojas Rojas, abogada" className="h-full w-full object-cover" />
            </div>
            <span className="absolute right-3 top-3 rounded-sm bg-paper/90 px-3 py-1.5 font-roman text-[11px] uppercase tracking-[0.2em] text-bronze backdrop-blur">Abogada</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant, showBadge }) {
  if (variant === "B") return <HeroB showBadge={showBadge} />;
  if (variant === "C") return <HeroC showBadge={showBadge} />;
  return <HeroA showBadge={showBadge} />;
}
Object.assign(window, { Hero });