import { NewsletterForm } from "./Newsletter";

interface AdvisoryCtaProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  formHeading?: string;
}

export function AdvisoryCta({
  eyebrow = "Stay ahead of the season",
  title = "Seasonal advisories, straight to your inbox",
  description = "Planting-window guidance, new variety releases and drought early-warning alerts for your region.",
  formHeading = "Subscribe to advisories",
}: AdvisoryCtaProps) {
  return (
    <div className="container-page my-10 md:my-14">
      {/* Organic fluid container */}
      <div className="relative isolate px-8 py-12 sm:px-12 md:py-16 lg:px-16 text-white">
        {/* Organic Hand-Drawn Wavy Shape Background with White Contour Line */}
        <svg
          viewBox="0 0 1200 360"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="none"
          className="pointer-events-none absolute inset-0 -z-10 size-full overflow-visible drop-shadow-md"
        >
          {/* Organic Green Shape (#009F4F) with Continuous White Border Line (#FFFFFF) */}
          <path
            d="M 60,40 C 200,16 380,50 580,24 C 780,6 960,44 1140,26 C 1175,24 1195,62 1195,110 C 1195,160 1198,200 1195,250 C 1195,295 1175,335 1140,332 C 960,314 780,354 580,328 C 400,306 220,352 70,330 C 35,324 12,295 12,250 C 12,200 10,150 12,100 C 12,56 35,26 60,40 Z"
            fill="#009F4F"
            stroke="#FFFFFF"
            strokeWidth="4.5"
            strokeLinejoin="round"
          />
        </svg>

        {/* Content Section: original data */}
        <div className="relative z-10 grid items-center gap-8 md:grid-cols-2 lg:gap-12">
          <div>
            <p className="eyebrow text-white font-bold tracking-wider">
              {eyebrow}
            </p>
            <h2 className="mt-3 text-2xl font-extrabold text-white sm:text-3xl md:text-4xl md:leading-tight">
              {title}
            </h2>
            <p className="mt-3 max-w-lg text-sm leading-relaxed text-white/90 sm:text-base">
              {description}
            </p>
          </div>

          <div className="md:justify-self-end w-full max-w-md">
            <NewsletterForm variant="dark" heading={formHeading} />
          </div>
        </div>
      </div>
    </div>
  );
}