import { home } from "@/lib/content";
import { Button } from "@/components/ui/Button";
import { GoldenSpiral } from "@/components/graphics/GoldenSpiral";
import { BotanicalMotif } from "@/components/graphics/BotanicalMotif";

export function CallToAction() {
  const { callToAction: cta } = home;
  if (!cta.visible) return null;
  return (
    <section
      aria-labelledby="cta-title"
      className="relative isolate overflow-hidden bg-slate-600 text-white"
    >
      <svg
        className="pointer-events-none absolute inset-x-0 -top-px h-10 w-full md:h-16"
        viewBox="0 0 1440 80"
        preserveAspectRatio="none"
        aria-hidden="true"
      >
        <path
          d="M0 0 L1440 0 L1440 10 C 1200 70, 900 70, 660 30 C 420 -5, 200 10, 0 50 Z"
          fill="var(--color-ivory-50)"
        />
      </svg>
      <GoldenSpiral
        className="text-gold-400/80 pointer-events-none absolute top-[4%] -right-[6%] h-[120%] w-auto max-lg:opacity-40"
        strokeWidth={0.1}
        flipX
      />
      <BotanicalMotif className="pointer-events-none absolute -right-2 bottom-0 h-[92%] w-auto max-lg:opacity-30" />
      <div className="container-site relative py-16 md:py-20 lg:py-24">
        <div className="max-w-[36rem]">
          <h2 id="cta-title" className="text-h2 text-white">
            {cta.title}
          </h2>
          <p className="mt-3 text-lg text-white">{cta.subtitle}</p>
          <div className="mt-7">
            <Button href={cta.cta.href} variant="ivory" size="lg">
              {cta.cta.label}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}