import { Star } from "lucide-react";

/* Ribbons hang from the top edge and sway (skew + stretch, transform only).
Add once to globals.css:
@keyframes sway { from { transform: skewX(-9deg) scaleY(.9); } to { transform: skewX(9deg) scaleY(1.06) translateX(22%); } }
*/

const ribbon = "absolute -top-[14%] h-[86%] w-[max(21%,110px)] origin-top rounded-full blur-[30px] will-change-transform animate-[sway_11s_ease-in-out_infinite_alternate] motion-reduce:animate-none";
const tint = (token: string, pct: number) => "color-mix(in srgb, var(--tst-" + token + ") " + pct + "%, var(--tst-bg))";
const ribbons = [
  { left: "-6%", height: "86%", dur: "11s", delay: "0s", a: tint("primary", 50), b: tint("success", 34) },
  { left: "14%", height: "74%", dur: "13s", delay: "-4s", a: tint("info", 48), b: tint("primary", 30) },
  { left: "36%", height: "92%", dur: "10s", delay: "-2s", a: tint("success", 44), b: tint("info", 32) },
  { left: "57%", height: "78%", dur: "14s", delay: "-7s", a: tint("primary", 46), b: tint("danger", 26) },
  { left: "78%", height: "86%", dur: "12s", delay: "-5s", a: tint("warning", 46), b: tint("primary", 30) },
];

export function HeroCurtains() {
  return (
    <section aria-labelledby="curtains-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 bg-[linear-gradient(to_bottom,color-mix(in_srgb,var(--tst-info)_8%,var(--tst-bg)),var(--tst-bg)_75%)] animate-fade motion-reduce:animate-none">
        {ribbons.map((r) => (
          <span key={r.left} className={ribbon}
            style={{ left: r.left, height: r.height, animationDuration: r.dur, animationDelay: r.delay,
              background: "linear-gradient(to bottom, transparent, " + r.a + " 38%, " + r.b + " 70%, transparent)" }} />
        ))}
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-[linear-gradient(to_bottom,transparent_30%,color-mix(in_srgb,var(--tst-bg)_60%,transparent)_62%,var(--tst-bg)_96%)]" />

      <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" /> Stillwater
        </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 free</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 pt-8 text-center sm:pt-24">
        <span className="text-xs font-medium uppercase tracking-[.1em] text-fg-muted animate-rise motion-reduce:animate-none">Guided breathing &amp; sleep</span>
        <h1 id="curtains-title" className="max-w-[13ch] text-balance text-4xl font-normal leading-[1.02] tracking-[-0.04em] sm:text-6xl lg:text-7xl animate-rise [animation-delay:80ms] motion-reduce:animate-none">
          Ten quiet minutes, wherever the day goes.
        </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">
          Short guided sessions for the commute, the desk and the hour before bed — with a voice you will actually want to hear.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] motion-reduce:animate-none">
          <a href="/session" className="inline-flex h-11 items-center rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover active:scale-[.97]">Start a session</a>
          <a href="/pricing" 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 plans</a>
        </div>
        <p className="mt-2 inline-flex items-center gap-2 text-[13px] text-fg-muted">
          <span className="inline-flex gap-0.5 text-warning" aria-label="Rated 4.9 out of 5">
            {[0, 1, 2, 3, 4].map((i) => <Star key={i} className="size-3.5 fill-current" aria-hidden />)}
          </span>
          4.9 from 18,000 listeners
        </p>
      </div>
    </section>
  );
}