import { ArrowRight } from "lucide-react";

/* Each field sits on an arm that turns around the headline (transform only).
Add once to globals.css:
@keyframes orbit { to { transform: rotate(1turn); } }
*/

const zones = [
  { city: "London", time: "09:00" },
  { city: "Mumbai", time: "13:30" },
  { city: "Austin", time: "03:00" },
];
const arm = "absolute left-1/2 top-[52%] size-0 will-change-transform motion-reduce:animate-none";
const field = "absolute left-0 top-0 aspect-square w-[max(40vw,280px)] rounded-full";

export function HeroOrbit() {
  return (
    <section aria-labelledby="orbit-title" className="relative isolate overflow-hidden bg-bg px-5 pb-24 pt-5 font-sans text-fg sm:px-10">
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden [mask-image:linear-gradient(to_bottom,var(--tst-fg)_55%,transparent)] animate-fade motion-reduce:animate-none">
        <span className="absolute left-1/2 top-[52%] aspect-square w-[max(48vw,300px)] -translate-x-1/2 -translate-y-1/2 rounded-full border border-fg/10" />
        <span className="absolute left-1/2 top-[52%] aspect-square w-[max(76vw,470px)] -translate-x-1/2 -translate-y-1/2 rounded-full border border-dashed border-fg/10" />
        <span className={arm + " animate-[orbit_26s_linear_infinite]"}>
          <span className={field + " [transform:translate(-50%,-50%)_translateX(max(24vw,120px))] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_52%,transparent),transparent)]"} />
          <span className="absolute -m-1 size-2 rounded-full bg-primary shadow-[0_0_0_4px_color-mix(in_srgb,var(--tst-primary)_22%,transparent)] [transform:translateX(max(24vw,150px))]" />
        </span>
        <span className={arm + " animate-[orbit_34s_linear_-11s_infinite_reverse]"}>
          <span className={field + " [transform:translate(-50%,-50%)_translateX(max(30vw,150px))] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-info)_46%,transparent),transparent)]"} />
          <span className="absolute -m-1 size-2 rounded-full bg-info shadow-[0_0_0_4px_color-mix(in_srgb,var(--tst-info)_22%,transparent)] [transform:translateX(max(38vw,235px))]" />
        </span>
        <span className={arm + " animate-[orbit_20s_linear_-7s_infinite]"}>
          <span className={field + " !w-[max(30vw,220px)] [transform:translate(-50%,-50%)_translateX(max(18vw,100px))] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-warning)_46%,transparent),transparent)]"} />
        </span>
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(40%_36%_at_50%_50%,color-mix(in_srgb,var(--tst-bg)_66%,transparent),transparent_80%)]" />

      <nav aria-label="Main" className="mx-auto mb-16 flex max-w-[1080px] items-center justify-between gap-4 sm:mb-24">
        <a href="/" className="flex items-center gap-2 text-[15px] font-semibold">
          <span className="size-[22px] rounded-sm bg-gradient-to-br from-primary to-info" /> Halfday
        </a>
        <a href="/signup" className="inline-flex h-8 items-center rounded bg-primary px-3 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">Try Halfday</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 py-4 text-center">
        <span className="rounded-full border border-border-strong px-2.5 py-0.5 text-xs font-medium text-fg-muted animate-rise motion-reduce:animate-none">Scheduling across time zones</span>
        <h1 id="orbit-title" className="max-w-[14ch] text-balance text-4xl font-medium leading-[1.02] tracking-[-0.04em] sm:text-6xl lg:text-7xl animate-rise [animation-delay:80ms] motion-reduce:animate-none">
          Meetings that respect everyone’s morning.
        </h1>
        <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg animate-rise [animation-delay:160ms] motion-reduce:animate-none">
          Halfday finds the hour that works for the whole team, wherever they are, and keeps it fair as the seasons change.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] motion-reduce:animate-none">
          <a href="/find" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover active:scale-[.97]">
            Find a time <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/how" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 font-medium hover:bg-surface active:scale-[.97]">See how it works</a>
        </div>
        <div className="mt-2 flex flex-wrap justify-center gap-2">
          {zones.map((z) => (
            <span key={z.city} className="inline-flex h-[30px] items-center gap-2 rounded-full border border-border bg-bg/80 px-3 text-[12.5px] text-fg-muted">
              <span className="size-1.5 rounded-full bg-success" /> {z.city} <b className="font-medium tabular-nums text-fg">{z.time}</b>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}