import type { Metadata } from "next";
import { Button } from "@/components/button";
import { getPartnershipContent, type SectionCopy } from "@/lib/partnership-content";
import Image from "next/image";
export const revalidate = 60; // ISR

export async function generateMetadata(): Promise<Metadata> {
  const content = await getPartnershipContent();
  return {
    title: content.seoTitle,
    description: content.seoDescription,
    openGraph: {
      title: content.seoTitle,
      description: content.seoDescription,
      images: [{ url: "https://wedigtech-strapi-media.s3.ap-south-1.amazonaws.com/files/icon.png" }],
    },
    twitter: {
      title: content.seoTitle,
      description: content.seoDescription,
      images: ["https://wedigtech-strapi-media.s3.ap-south-1.amazonaws.com/files/icon.png"],
    },
  };
}

/** Small uppercase section label in the brand green. */
function Eyebrow({ children }: { children: string }) {
  if (!children) return null;
  return (
    <p className="font-display text-xs font-semibold uppercase tracking-[0.22em] text-leaf-deep">
      {children}
    </p>
  );
}

/** Heading + inline gradient highlight + plain suffix (line breaks via pre-line). */
/** `whitespace-normal` below sm: the CMS newline collapses to a space so the
 *  heading flows continuously on phones instead of stranding a lone word. */
function Heading({ copy, className }: { copy: SectionCopy; className: string }) {
  return (
    <h2 className={`whitespace-normal lg:whitespace-pre-line ${className}`}>
      {copy.heading}
      {copy.highlight ? (
        <>
          {copy.heading ? "\n" : null}
          <span className="text-gradient">{copy.highlight}</span>
        </>
      ) : null}
      {copy.headingSuffix}
    </h2>
  );
}

export default async function PartnershipPage() {
  const content = await getPartnershipContent();
  const {
    hero,
    heroBackground,
    audience,
    audienceTypes,
    partnering,
    investments,
    investmentsImage,
    finalCta,
  } = content;

  return (
    <>
      {/* ============================ HERO ============================ */}
      {/* min-h-screen (not svh) — svh only landed in Safari 15.4 and this site
          still targets iOS 15.0. Full height so the wash + waves fill the first
          view instead of cutting off mid-page. */}
      <section className="relative flex items-center overflow-hidden">
        {/* Canva hero wash behind the wave PNG. The PNG is opaque with a white
            background, so it needs mix-blend-multiply for the gradient to read
            through — white multiplies to transparent, the waves stay. */}
        <div className="pointer-events-none absolute inset-0 -z-20 bg-[linear-gradient(90deg,#f0ffed_0%,#c6e9ff_100%)]" />
        <Image
          src={heroBackground}
          alt=""
          fill
          priority
          sizes="100vw"
          className="-z-10 object-cover mix-blend-multiply"
        />
        {/* pt clears the absolutely-positioned header and leaves roughly the
            same gap under the logo as pb leaves under the CTA. */}
        <div className="mx-auto w-full max-w-7xl px-6 pb-28 pt-40 sm:pt-48 lg:px-10">
          <div className="max-w-3xl">
            <div className="animate-rise">
              <Eyebrow>{hero.eyebrow}</Eyebrow>
            </div>
            <h1
              className="animate-rise mt-6 whitespace-normal font-display text-4xl font-bold leading-[1.08] tracking-tight text-ink lg:whitespace-pre-line sm:text-6xl"
              style={{ animationDelay: "80ms" }}
            >
              {hero.heading}
              {hero.highlight ? (
                <>
                  {hero.heading ? "\n" : null}
                  <span className="text-gradient font-bold">{hero.highlight}</span>
                </>
              ) : null}
              {hero.headingSuffix}
            </h1>
            {hero.body ? (
              <p
                className="animate-rise mt-7 max-w-2xl text-base leading-relaxed text-ink-soft sm:text-lg"
                style={{ animationDelay: "160ms" }}
              >
                {hero.body}
              </p>
            ) : null}
            <div className="animate-rise mt-10" style={{ animationDelay: "240ms" }}>
              <Button href={content.heroCtaUrl} variant="gradient">
                {content.heroCtaLabel}
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* ====================== WHO THIS IS FOR ======================= */}
      <section className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <Eyebrow>{audience.eyebrow}</Eyebrow>
        <Heading
          copy={audience}
          className="mt-4 font-display text-3xl font-bold leading-tight tracking-tight text-ink sm:text-4xl"
        />
        {/* 1080px = the width where this breaks to 3 evenly-filled lines, matching Canva. */}
        {audience.body ? (
          <p className="mt-5 max-w-[67.5rem] text-base leading-relaxed text-ink-soft">
            {audience.body}
          </p>
        ) : null}

        <div className="mt-9 grid gap-6 sm:grid-cols-3">
          {audienceTypes.map((t) => (
            <div key={t.title} className="gradient-border rounded-[1.25rem] p-7">
              <h3 className="font-display text-xl font-bold text-ink">{t.title}</h3>
              {t.description ? (
                <p className="mt-3 text-sm leading-relaxed text-ink-soft">{t.description}</p>
              ) : null}
            </div>
          ))}
        </div>
      </section>

      {/* ==================== WHAT WE PARTNER FOR ===================== */}
      <section className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <Eyebrow>{partnering.eyebrow}</Eyebrow>
        <Heading
          copy={partnering}
          className="mt-4 font-display text-3xl font-bold leading-tight tracking-tight text-ink sm:text-4xl"
        />
        {partnering.body ? (
          <p className="mt-5 max-w-[67.5rem] text-base leading-relaxed text-ink-soft">
            {partnering.body}
          </p>
        ) : null}

        <div className="mt-10 grid items-stretch gap-8 lg:grid-cols-2">
          {/* Numbered cards. The index is rendered here, not typed into the CMS,
              so reordering in Strapi renumbers them automatically. */}
          <div className="flex flex-col gap-6">
            {investments.map((inv, i) => (
              <div key={inv.title} className="gradient-border flex-1 rounded-[1.25rem] p-7">
                <h3 className="font-display text-xl font-bold text-ink">
                  {i + 1}. {inv.title}
                </h3>
                {inv.description ? (
                  <p className="mt-3 text-sm leading-relaxed text-ink-soft">{inv.description}</p>
                ) : null}
              </div>
            ))}
          </div>

          {/* CMS image if set, else the decorative gradient panel. max-h caps
              the stretch: `investments` is repeatable, so a long list would
              otherwise crop a landscape image into a tall strip. */}
          <div className="relative min-h-[18rem] overflow-hidden rounded-[1.25rem] lg:max-h-[34rem]">
            {investmentsImage ? (
              <Image
                src={investmentsImage}
                alt=""
                fill
                sizes="(min-width: 1024px) 50vw, 100vw"
                className="object-cover"
              />
            ) : (
              <>
                <div className="absolute inset-0 bg-gradient-to-br from-teal/45 via-wash-sky to-sky/45" />
                <div className="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_50%,rgba(255,255,255,0.5),transparent_65%)]" />
              </>
            )}
          </div>
        </div>
      </section>


      {/* ======================== FINAL CTA ========================== */}
      {/* Canva's full-bleed green→blue band, centred. Uses the .text-gradient
          stops as a solid fill rather than clipped text. */}
      <section className="mx-auto max-w-7xl px-6 pb-24 pt-20 lg:px-10">
        {/* Canva band is 1240.5 x 359.9 — py-14 + this type scale reproduces
            that height/width ratio at the section's 1200px content width. */}
        <div className="rounded-[1.25rem] bg-[linear-gradient(90deg,#51e139_0%,#52abe3_100%)] px-8 py-14 text-center">
          <h2
            className="mx-auto max-w-4xl font-display text-3xl font-bold leading-tight tracking-tight text-ink sm:text-5xl"
            style={{ whiteSpace: "pre-line" }}
          >
            {finalCta.heading}
            {finalCta.highlight}
            {finalCta.headingSuffix}
          </h2>
          {finalCta.body ? (
            <p className="mx-auto mt-6 max-w-[53rem] text-base leading-relaxed text-ink/80">
              {finalCta.body}
            </p>
          ) : null}
          <div className="mt-9">
            <Button href={content.finalCtaUrl} variant="gradient">
              {content.finalCtaLabel}
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}