/* ============================================================
   hero.jsx — Hero (3 variants) · CallMockup · SocialStrip
   ============================================================ */
function CallMockup({ floatStat = true }) {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  const rows = [
    { icon: "calendar-check", label: t.mReason, value: t.mReasonV },
    { icon: "clock", label: t.mPref, value: t.mPrefV },
    { icon: "sparkles", label: t.mStatus, value: <span className="text-brand font-semibold">{t.mStatusV}</span> },
  ];
  return (
    <div className="relative">
      <div className="absolute -inset-10 bg-gradient-brand opacity-20 blur-3xl rounded-[40px]" />
      <div className="relative bg-card rounded-3xl shadow-card border border-border overflow-hidden">
        {/* chrome */}
        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border bg-warm">
          <div className="flex items-center gap-2">
            <div className="w-5 h-5 rounded-md bg-navy grid place-items-center">
              <Icon name="phone" className="w-3 h-3 text-navy-foreground" />
            </div>
            <span className="text-[11px] font-semibold text-navy">LEGION UNITED</span>
          </div>
          <div className="flex items-center gap-2 text-[11px] text-slate font-medium">
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inline-flex h-full w-full rounded-full bg-teal ping-soft" />
              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-teal" />
            </span>
            {t.mInbound}
          </div>
        </div>

        <div className="p-6 space-y-5">
          {/* caller */}
          <div className="flex items-center gap-4">
            <div className="relative shrink-0">
              <span className="absolute inset-0 rounded-2xl bg-brand/30 pulse-ring" />
              <div className="relative w-14 h-14 rounded-2xl bg-gradient-brand grid place-items-center shadow-glow">
                <Icon name="phone" className="w-6 h-6 text-brand-foreground" />
              </div>
            </div>
            <div className="flex-1 min-w-0">
              <span className="text-[10px] uppercase tracking-widest text-slate font-semibold">{t.mCaller}</span>
              <p className="font-display text-xl text-navy leading-tight">{t.mCallerName}</p>
              <p className="text-sm text-slate tabular">{t.mCallerMeta}</p>
            </div>
            {/* live voice equalizer */}
            <div className="flex items-end gap-0.5 h-8 mr-1">
              {[0, 1, 2, 3, 4].map((i) => (
                <span key={i} className="eq-bar w-1 rounded-full bg-teal" style={{ animationDelay: `${i * 0.13}s`, height: "40%" }} />
              ))}
            </div>
            <span className="text-xs font-medium px-2.5 py-1 rounded-full bg-teal-soft text-teal border border-teal/20">{t.mAnswered}</span>
          </div>

          {/* detail rows */}
          <div className="rounded-2xl bg-warm border border-border divide-y divide-border overflow-hidden">
            {rows.map((r, i) => (
              <div key={i} className="flex items-center justify-between gap-3 px-4 py-3 text-sm">
                <div className="flex items-center gap-2.5 text-slate">
                  <Icon name={r.icon} className="w-4 h-4 text-brand" />
                  <span>{r.label}</span>
                </div>
                <div className="text-navy font-medium text-right">{r.value}</div>
              </div>
            ))}
          </div>

          {/* summary */}
          <div className="rounded-2xl border border-border p-5">
            <div className="flex items-center justify-between mb-3">
              <p className="text-[10px] uppercase tracking-widest text-slate font-semibold">{t.mSummary}</p>
              <span className="text-[10px] text-slate tabular">14:32 · 1m 42s</span>
            </div>
            <p className="text-sm text-navy/85 leading-relaxed">{t.mSummaryV}</p>
          </div>

          {/* actions */}
          <div className="grid grid-cols-2 gap-2">
            <button className="h-11 rounded-xl bg-navy text-navy-foreground text-sm font-medium flex items-center justify-center gap-2 hover:opacity-95 transition">
              {t.mView} <Icon name="chevron-right" className="w-4 h-4" />
            </button>
            <button className="h-11 rounded-xl bg-warm border border-border text-navy text-sm font-medium flex items-center justify-center gap-2 hover:bg-secondary transition">
              <Icon name="message-square-text" className="w-4 h-4" /> {t.mCallback}
            </button>
          </div>
        </div>
      </div>

    </div>
  );
}

function HeroBadge() {
  const { t } = window.LU.useLang();
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass border border-border shadow-soft text-xs text-slate">
      <span className="relative flex h-2 w-2">
        <span className="absolute inline-flex h-full w-full rounded-full bg-teal opacity-75 ping-soft" />
        <span className="relative inline-flex rounded-full h-2 w-2 bg-teal" />
      </span>
      {t.badge}
    </div>
  );
}

function HeroCTAs({ center }) {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  return (
    <div className={`flex flex-wrap gap-3 ${center ? "justify-center" : ""}`}>
      <a href="#demo" className="group inline-flex h-12 items-center gap-2 px-6 rounded-xl bg-gradient-brand text-brand-foreground font-medium hover:opacity-95 shadow-glow transition">
        <Icon name="phone-call" className="w-4 h-4" /> {t.ctaCall}
        <Icon name="arrow-right" className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
      </a>
      <a href="#flow" className="inline-flex h-12 items-center gap-2 px-6 rounded-xl glass border border-border text-navy font-medium hover:bg-secondary transition">
        {t.flowEye} <Icon name="arrow-down" className="w-4 h-4 text-brand" />
      </a>
    </div>
  );
}

function HeroReassure({ center }) {
  const { t } = window.LU.useLang();
  const { Icon } = window.UI;
  return (
    <div className={`flex flex-wrap items-center gap-x-8 gap-y-3 text-sm text-slate ${center ? "justify-center" : ""}`}>
      {t.reassure.map((r) => (
        <span key={r} className="inline-flex items-center gap-2"><Icon name="check" className="w-4 h-4 text-teal" /> {r}</span>
      ))}
    </div>
  );
}

function HeadlineMark({ big }) {
  const { t } = window.LU.useLang();
  return (
    <h1 className={`${big ? "text-5xl sm:text-7xl lg:text-[5.25rem]" : "text-5xl sm:text-6xl lg:text-[4.5rem]"} text-navy leading-[1.02] text-balance font-bold`}>
      {t.heroH1a}<br />{t.heroH1b}<br />
      <span className="relative inline-block text-brand">
        {t.heroH1c}
        <svg className="absolute -bottom-2 left-0 w-full" height="10" viewBox="0 0 200 10" preserveAspectRatio="none" aria-hidden="true">
          <path d="M2 7 Q 100 1 198 6" stroke="oklch(0.72 0.13 188)" strokeWidth="3" fill="none" strokeLinecap="round" />
        </svg>
      </span>
    </h1>
  );
}

function Hero({ variant = "split" }) {
  const { t } = window.LU.useLang();
  const { Reveal } = window.UI;

  const Decor = () => (
    <>
      <div className="absolute inset-0 grid-bg opacity-50 [mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,black,transparent_75%)]" />
      <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full glow-a blur-3xl drift" />
      <div className="absolute top-10 right-0 w-[28rem] h-[28rem] rounded-full glow-b blur-3xl drift" style={{ animationDelay: "-6s" }} />
    </>
  );

  if (variant === "centered") {
    return (
      <section id="top" className="relative overflow-hidden bg-mesh">
        <Decor />
        <div className="relative mx-auto max-w-5xl px-6 pt-20 pb-20 lg:pt-24 text-center">
          <Reveal><HeadlineMark big /></Reveal>
          <Reveal delay={160}><p className="mt-7 text-lg text-slate max-w-2xl mx-auto text-pretty leading-relaxed">{t.heroSub}</p></Reveal>
          <Reveal delay={240}><div className="mt-9"><HeroCTAs center /></div></Reveal>
          <Reveal delay={320}><div className="mt-10"><HeroReassure center /></div></Reveal>
        </div>
        <div className="relative mx-auto max-w-3xl px-6 pb-24">
          <Reveal delay={120}><CallMockup /></Reveal>
        </div>
      </section>
    );
  }

  if (variant === "spotlight") {
    return (
      <section id="top" className="relative overflow-hidden bg-navy text-navy-foreground">
        <div className="absolute inset-0 grid-bg opacity-[0.07]" />
        <div className="absolute -top-32 left-1/4 w-[34rem] h-[34rem] rounded-full glow-a blur-3xl drift" />
        <div className="absolute top-20 right-0 w-[30rem] h-[30rem] rounded-full glow-b blur-3xl drift" style={{ animationDelay: "-7s" }} />
        <div className="relative mx-auto max-w-6xl px-6 pt-20 pb-24 text-center">
          <Reveal delay={80}>
            <h1 className="text-5xl sm:text-7xl lg:text-[5.5rem] leading-[1.0] text-balance font-bold">
              {t.heroH1a} {t.heroH1b} <span className="text-teal">{t.heroH1c}</span>
            </h1>
          </Reveal>
          <Reveal delay={160}><p className="mt-7 text-lg text-navy-foreground/75 max-w-2xl mx-auto text-pretty">{t.heroSub}</p></Reveal>
          <Reveal delay={240}><div className="mt-9 flex justify-center"><HeroCTAs center /></div></Reveal>
          <Reveal delay={320}><div className="mt-12 max-w-3xl mx-auto"><CallMockup floatStat={false} /></div></Reveal>
        </div>
      </section>
    );
  }

  // split (default)
  return (
    <section id="top" className="relative overflow-hidden bg-mesh">
      <Decor />
      <div className="relative mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pt-28 lg:pb-32 grid lg:grid-cols-[1.05fr_1fr] gap-16 items-center">
        <div>
          <Reveal><HeadlineMark /></Reveal>
          <Reveal delay={160}><p className="mt-7 text-lg text-slate max-w-xl text-pretty leading-relaxed">{t.heroSub}</p></Reveal>
          <Reveal delay={240}><div className="mt-9"><HeroCTAs /></div></Reveal>
          <Reveal delay={320}><div className="mt-10"><HeroReassure /></div></Reveal>
        </div>
        <Reveal delay={120} x><div className="lg:pl-6"><CallMockup /></div></Reveal>
      </div>
    </section>
  );
}

function SocialStrip() {
  const { t } = window.LU.useLang();
  return (
    <section className="border-y border-border bg-card">
      <div className="mx-auto max-w-7xl px-6 py-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
        <p className="text-xs uppercase tracking-widest text-slate font-medium">{t.builtFor}</p>
        {t.sectors.map((s) => (
          <span key={s} className="text-sm text-navy font-medium">{s}</span>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, CallMockup, SocialStrip });