/* heroes.jsx — three hero variations the user can switch between. */

function HeroCTAs({onDark}) {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
        <PlayBtn tone={onDark ? "onDark" : "dark"} />
        <GhostBtn
          tone={onDark ? "onDark" : "light"}
          onClick={() => scrollToId("how")}
          className="text-base"
        >
          <Icons.PlayCircle size={18} /> See how it works
        </GhostBtn>
      </div>
      <p
        className={
          "flex items-center gap-2 text-[13.5px] " +
          (onDark ? "text-white/65" : "text-brand-800/60")
        }
      >
        <Icons.Check size={15} stroke={3} className="text-amber-500" />
        Free to download · No card needed · 500 AI replies free every month
      </p>
    </div>
  );
}

/* ── Hero A — Emerald immersive (matches app splash) ───────────────────── */
function HeroEmerald() {
  return (
    <section className="relative overflow-hidden bg-brand-700 text-white">
      <div
        className="rings pointer-events-none absolute inset-0"
        aria-hidden="true"
      />
      <div
        className="pointer-events-none absolute -left-40 bottom-0 h-[460px] w-[460px] rounded-full bg-brand-500/40 blur-3xl"
        aria-hidden="true"
      />
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-5 pb-20 pt-28 sm:px-8 lg:grid-cols-[1.05fr_.95fr] lg:gap-8 lg:pb-28 lg:pt-36">
        <div className="relative z-10">
          <div
            data-reveal
            className="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-[13px] font-semibold text-amber-400 ring-1 ring-white/15"
          >
            <span className="h-1.5 w-1.5 rounded-full bg-amber-500 animate-floaty" />{" "}
            WhatsApp · Instagram · Facebook Messenger
          </div>
          <h1
            data-reveal
            data-delay="60"
            className="display-tight font-display text-[40px] font-extrabold sm:text-[52px] lg:text-[58px]"
          >
            Your shop never sleeps.{" "}
            <span className="text-amber-400">Neither does your assistant.</span>
          </h1>
          <p
            data-reveal
            data-delay="120"
            className="mt-6 max-w-xl text-[18px] leading-relaxed text-white/80 sm:text-[20px]"
          >
            My PA replies to your customers on WhatsApp, Instagram and
            Messenger, sends receipts, and runs your business — even when you're
            not on your phone.
          </p>
          <div data-reveal data-delay="180" className="mt-8">
            <HeroCTAs onDark />
          </div>
        </div>

        <div data-reveal data-delay="160" className="relative mx-auto">
          <PhoneFrame className="animate-floaty">
            <div className="h-[560px]">
              <WhatsAppThread />
            </div>
          </PhoneFrame>
          <FloatCard
            className="left-[-14px] top-16 w-[176px] animate-floaty"
            style={{animationDelay: "1.2s"}}
          >
            <div className="flex items-center gap-2">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-50 text-brand-600">
                <Icons.BarChart size={18} />
              </span>
              <div>
                <div className="text-[11px] font-medium text-brand-950/50">
                  Revenue today
                </div>
                <div className="font-display text-[18px] font-extrabold text-brand-800">
                  ₦47,200
                </div>
              </div>
            </div>
          </FloatCard>
          <FloatCard
            className="bottom-24 right-[-10px] w-[164px] animate-floaty"
            style={{animationDelay: "0.5s"}}
          >
            <div className="flex items-center gap-2">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-amber-500/15 text-amber-600">
                <Icons.Clock size={18} />
              </span>
              <div>
                <div className="text-[11px] font-medium text-brand-950/50">
                  Replied in
                </div>
                <div className="font-display text-[18px] font-extrabold text-brand-800">
                  3 seconds
                </div>
              </div>
            </div>
          </FloatCard>
        </div>
      </div>
    </section>
  );
}

/* ── Hero B — Light & airy (off-white, split) ──────────────────────────── */
function HeroLight() {
  return (
    <section className="relative overflow-hidden bg-cream">
      <div
        className="pointer-events-none absolute -right-32 -top-24 h-[420px] w-[420px] rounded-full bg-brand-200/40 blur-3xl"
        aria-hidden="true"
      />
      <div
        className="pointer-events-none absolute -left-24 bottom-0 h-[360px] w-[360px] rounded-full bg-amber-500/15 blur-3xl"
        aria-hidden="true"
      />
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-5 pb-20 pt-28 sm:px-8 lg:grid-cols-[1.05fr_.95fr] lg:pb-28 lg:pt-36">
        <div className="relative z-10">
          <div data-reveal className="mb-6">
            <Eyebrow>
              WhatsApp · Instagram · Messenger · built for your shop
            </Eyebrow>
          </div>
          <h1
            data-reveal
            data-delay="60"
            className="display-tight font-display text-[40px] font-extrabold text-brand-900 sm:text-[52px] lg:text-[58px]"
          >
            Your shop never sleeps.
            <br />
            <span className="relative inline-block">
              Neither does your assistant.
              <svg
                className="absolute -bottom-2 left-0 w-full"
                viewBox="0 0 320 14"
                fill="none"
                aria-hidden="true"
                preserveAspectRatio="none"
              >
                <path
                  d="M3 9C70 3 250 2 317 8"
                  stroke="#F59E0B"
                  strokeWidth="4"
                  strokeLinecap="round"
                />
              </svg>
            </span>
          </h1>
          <p
            data-reveal
            data-delay="120"
            className="mt-7 max-w-xl text-[18px] leading-relaxed text-brand-800/75 sm:text-[20px]"
          >
            My PA replies to your customers on WhatsApp, Instagram and
            Messenger, sends receipts, and runs your business — even when you're
            not on your phone.
          </p>
          <div data-reveal data-delay="180" className="mt-8">
            <HeroCTAs />
          </div>
        </div>

        <div data-reveal data-delay="160" className="relative mx-auto">
          <div
            className="absolute inset-6 -z-10 rounded-[2.6rem] bg-gradient-to-br from-brand-600 to-brand-800"
            aria-hidden="true"
          />
          <PhoneFrame glow={false} className="animate-floaty">
            <div className="h-[560px]">
              <WhatsAppThread />
            </div>
          </PhoneFrame>
          <FloatCard
            className="left-[-18px] top-20 w-[178px] animate-floaty"
            style={{animationDelay: "1s"}}
          >
            <div className="flex items-center gap-2">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-50 text-brand-600">
                <Icons.BarChart size={18} />
              </span>
              <div>
                <div className="text-[11px] font-medium text-brand-950/50">
                  Revenue today
                </div>
                <div className="font-display text-[18px] font-extrabold text-brand-800">
                  ₦47,200
                </div>
              </div>
            </div>
          </FloatCard>
          <FloatCard
            className="bottom-20 right-[-12px] w-[150px] animate-floaty"
            style={{animationDelay: "0.4s"}}
          >
            <div className="text-[11px] font-medium text-brand-950/50">
              Replied in
            </div>
            <div className="mt-0.5 font-display text-[20px] font-extrabold text-brand-800">
              3 sec
            </div>
            <div className="text-[11px] text-brand-950/45">day or night</div>
          </FloatCard>
        </div>
      </div>
    </section>
  );
}

/* ── Hero C — Centered, big type, phone below ──────────────────────────── */
function HeroCentered() {
  return (
    <section className="relative overflow-hidden bg-brand-700 text-white">
      <div
        className="rings pointer-events-none absolute inset-0"
        aria-hidden="true"
      />
      <div
        className="pointer-events-none absolute left-1/2 top-1/3 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-brand-500/30 blur-3xl"
        aria-hidden="true"
      />
      <div className="relative z-10 mx-auto max-w-4xl px-5 pt-28 text-center sm:px-8 lg:pt-36">
        <div data-reveal className="mb-6 flex justify-center">
          <div className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-[13px] font-semibold text-amber-400 ring-1 ring-white/15">
            <span className="h-1.5 w-1.5 rounded-full bg-amber-500" /> WhatsApp
            · Instagram · Facebook Messenger
          </div>
        </div>
        <h1
          data-reveal
          data-delay="60"
          className="display-tight mx-auto max-w-3xl font-display text-[42px] font-extrabold sm:text-[58px] lg:text-[68px]"
        >
          Your shop never sleeps.{" "}
          <span className="text-amber-400">Neither does your assistant.</span>
        </h1>
        <p
          data-reveal
          data-delay="120"
          className="mx-auto mt-6 max-w-2xl text-[18px] leading-relaxed text-white/80 sm:text-[21px]"
        >
          My PA replies to your customers on WhatsApp, Instagram and Messenger,
          sends receipts, and runs your business — even when you're not on your
          phone.
        </p>
        <div data-reveal data-delay="180" className="mt-9 flex justify-center">
          <HeroCTAs onDark />
        </div>
      </div>

      <div
        data-reveal
        data-delay="220"
        className="relative z-10 mx-auto mt-12 max-w-md px-5 pb-20 lg:pb-24"
      >
        <PhoneFrame className="animate-floaty">
          <div className="h-[520px]">
            <WhatsAppThread />
          </div>
        </PhoneFrame>
        <FloatCard
          className="left-[-6px] top-24 w-[170px] animate-floaty sm:left-[-40px]"
          style={{animationDelay: "1.1s"}}
        >
          <div className="flex items-center gap-2">
            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-50 text-brand-600">
              <Icons.BarChart size={18} />
            </span>
            <div>
              <div className="text-[11px] font-medium text-brand-950/50">
                Revenue today
              </div>
              <div className="font-display text-[18px] font-extrabold text-brand-800">
                ₦47,200
              </div>
            </div>
          </div>
        </FloatCard>
        <FloatCard
          className="bottom-28 right-[-6px] w-[150px] animate-floaty sm:right-[-36px]"
          style={{animationDelay: "0.5s"}}
        >
          <div className="text-[11px] font-medium text-brand-950/50">
            Replied in
          </div>
          <div className="mt-0.5 font-display text-[20px] font-extrabold text-brand-800">
            3 sec
          </div>
          <div className="text-[11px] text-brand-950/45">day or night</div>
        </FloatCard>
      </div>
    </section>
  );
}

const HEROES = {
  emerald: {label: "Emerald immersive", node: HeroEmerald},
  light: {label: "Light & airy", node: HeroLight},
  centered: {label: "Centered big-type", node: HeroCentered},
};

Object.assign(window, {HEROES, HeroEmerald, HeroLight, HeroCentered});