import { ArrowRight } from "lucide-react";

/* Add once to globals.css:
@keyframes sunrise { from { transform: translateY(9%) scale(.94, .86); opacity: .7; } }
@keyframes rim-pulse { from { opacity: .35; } }
*/

const logos = ["Northwind", "Larkspur", "Tidewell", "Oakline", "Halcyon"];
const planet = "absolute left-1/2 top-[calc(100%-clamp(110px,15vw,160px))] -ml-[130%] aspect-square w-[260%] rounded-full";

export function HeroHorizon() {
  return (
    <section aria-labelledby="horizon-title" className="relative isolate overflow-hidden bg-bg px-5 pb-[clamp(150px,20vw,210px)] pt-5 font-sans text-fg sm:px-10">
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden animate-fade motion-reduce:animate-none">
        {/* The glow rises from the bottom edge and breathes */}
        <span className="absolute -inset-x-[15%] bottom-[calc(clamp(110px,15vw,160px)-30px)] h-[70%] origin-bottom bg-[radial-gradient(38%_80%_at_50%_100%,color-mix(in_srgb,var(--tst-warning)_78%,transparent),color-mix(in_srgb,var(--tst-danger)_50%,transparent)_34%,color-mix(in_srgb,var(--tst-primary)_34%,transparent)_62%,transparent)] animate-[sunrise_12s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />
        {/* The planet: page-coloured disc with a lit edge */}
        <span className={planet + " bg-bg shadow-[0_0_0_1px_color-mix(in_srgb,var(--tst-warning)_60%,var(--tst-bg))]"} />
        <span className={planet + " shadow-[0_-14px_48px_-2px_color-mix(in_srgb,var(--tst-warning)_80%,transparent),0_-3px_12px_color-mix(in_srgb,var(--tst-danger)_55%,transparent)] animate-[rim-pulse_6s_ease-in-out_infinite_alternate] motion-reduce:animate-none"} />
      </div>

      <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" /> Daybreak
        </a>
        <a href="/call" className="inline-flex h-8 items-center rounded bg-primary px-3 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">Book a call</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 text-center">
        <a href="/changelog" className="inline-flex items-center gap-2 rounded-full border border-fg/10 bg-bg/70 py-0.5 pl-0.5 pr-3 text-[12.5px] text-fg-muted animate-rise motion-reduce:animate-none">
          <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">2.0</span>
          Panel-level fault maps <ArrowRight className="size-3.5" aria-hidden />
        </a>
        <h1 id="horizon-title" className="max-w-[15ch] 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">
          Know every panel’s output from first light.
        </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">
          Daybreak watches each string on your solar sites and sends crews to the faulty panel, not the whole row.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] motion-reduce:animate-none">
          <a href="/live" 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]">
            See a live site <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/contact" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 font-medium hover:bg-surface active:scale-[.97]">Talk to us</a>
        </div>
      </div>
      <div className="absolute inset-x-0 bottom-8 flex flex-wrap justify-center gap-x-7 gap-y-2 px-5 text-[13.5px] font-semibold text-fg-subtle">
        {logos.map((l) => <span key={l}>{l}</span>)}
      </div>
    </section>
  );
}