import { Arrow, Glow, TrustStrip } from "../lib/primitives.jsx";

export default function Closing() {
  return (
    <section className="relative overflow-hidden text-center py-[clamp(100px,14vh,180px)]">
      <Glow color="oklch(0.74 0.175 35 / 0.35)" size={1000}
            style={{ top: "20%", left: "50%", transform: "translateX(-50%)" }} />
      <Glow color="oklch(0.45 0.10 35 / 0.20)" size={600}
            style={{ bottom: -200, left: "50%", transform: "translateX(-50%)" }} />

      <div className="wrap max-w-[900px] mx-auto relative">
        <h2 className="font-medium tracking-[-0.03em] leading-[1.02] text-balance text-[clamp(40px,6vw,84px)]">
          If you can <em className="not-italic bg-clip-text text-transparent"
            style={{ backgroundImage: "linear-gradient(180deg, var(--c-accent), oklch(0.62 0.18 18))" }}>describe</em> it,
          <br />you can <em className="not-italic bg-clip-text text-transparent"
            style={{ backgroundImage: "linear-gradient(180deg, var(--c-accent), oklch(0.62 0.18 18))" }}>build</em> it.
        </h2>
        <p className="mt-7 text-fg-dim text-balance max-w-[640px] mx-auto text-[clamp(17px,1.6vw,21px)]">
          And you can keep building it — all the way to customers.
          <br />No new tools. No homework. No going back to the wall.
        </p>
        <div className="mt-9 inline-flex flex-col items-center gap-3.5">
          <div className="flex gap-3 items-center flex-wrap justify-center">
            <a href="/beta.html" className="btn btn-primary h-14 px-7 text-base">
              Request invite <Arrow />
            </a>
            <a href="#how" className="btn btn-ghost">See how it works</a>
          </div>
          <TrustStrip items={["No credit card", "No homework", "No new tools to learn"]} />
        </div>
      </div>
    </section>
  );
}
