import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Surface } from "@/components/marketing/MarketingFrame";

export function FinalCTASection({ primaryHref }: { primaryHref: string }) {
  return (
    <section className="mx-auto max-w-7xl px-4 pb-24 pt-8 sm:px-6 lg:px-8 lg:pb-28">
      <Surface className="bg-[linear-gradient(180deg,rgba(88,166,255,0.12),rgba(255,255,255,0.03))]">
        <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
          <div>
            <div className="text-[11px] uppercase tracking-[0.28em] text-[#9fb0c7]">Final CTA</div>
            <h2 className="mt-3 font-display text-balance text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">
              让每一个 AI 应用创意，
              <br />
              都更快走到盈利
            </h2>
            <p className="mt-5 max-w-2xl text-sm leading-7 text-[#9fb0c7]">
              适合个人开发者、AI 独立开发团队和 1-10 人创业小团队。
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Button
              asChild
              className="h-12 rounded-full border border-[#58a6ff]/25 bg-[linear-gradient(135deg,_rgba(88,166,255,1),_rgba(52,224,196,0.78))] px-6 text-base font-semibold text-[#07111F] shadow-[0_20px_44px_rgba(55,143,255,0.24)] transition hover:brightness-110"
            >
              <Link to={primaryHref}>立即体验 PMFlow</Link>
            </Button>
            <Button
              asChild
              variant="ghost"
              className="h-12 rounded-full border border-white/12 bg-white/[0.03] px-6 text-base text-white hover:border-white/18 hover:bg-white/[0.06]"
            >
              <Link to="/login">预约产品演示</Link>
            </Button>
          </div>
        </div>
      </Surface>
    </section>
  );
}