import Image from "next/image";
import { NewsletterForm } from "./newsletter-form";
import { LinkedIn } from "./icons";
import type { GlobalContent } from "@/lib/global";

export function SiteFooter({ global }: { global: GlobalContent }) {
  return (
    <footer id="contact" className="relative overflow-hidden">
      {/* Community / newsletter CTA */}
      <div className="wash-aurora">
        <div className="mx-auto grid max-w-6xl items-center gap-10 px-6 py-20 md:grid-cols-[minmax(0,340px)_1fr] md:py-28 lg:px-10">
          {/* Portrait — CMS image if set, else the decorative gradient */}
          <div className="relative mx-auto aspect-[3/4] w-full max-w-[340px] overflow-hidden rounded-[2.5rem] border border-line shadow-lift md:mx-0">
            {global.footerImage ? (
              <Image
                src={global.footerImage}
                alt=""
                fill
                sizes="(min-width: 768px) 340px, 100vw"
                className="object-cover object-top"
              />
            ) : (
              <>
                <div className="absolute inset-0 bg-gradient-to-br from-wash-sky via-wash-mint to-wash-green" />
                <div className="absolute inset-0 bg-[radial-gradient(60%_50%_at_50%_25%,rgba(255,255,255,0.6),transparent)]" />
                <div className="absolute bottom-0 left-1/2 h-40 w-40 -translate-x-1/2 rounded-t-full bg-gradient-to-b from-teal/50 to-sky/40 blur-[2px]" />
                <div className="absolute bottom-24 left-1/2 h-20 w-20 -translate-x-1/2 rounded-full bg-gradient-to-br from-leaf/70 to-teal/60" />
              </>
            )}
          </div>

          {/* Copy + form */}
          <div className="max-w-xl">
            <h2 className="whitespace-normal font-display text-3xl font-bold leading-tight text-ink lg:whitespace-pre-line sm:text-4xl">
              {global.newsletterHeading}
              {global.newsletterHeadingHighlight ? (
                <>
                  {global.newsletterHeading ? "\n" : null}
                  <span className="text-gradient">{global.newsletterHeadingHighlight}</span>
                </>
              ) : null}
            </h2>
            <div className="mt-7 max-w-md">
              <NewsletterForm />
            </div>
            {/* Contact text + LinkedIn icon — parallel-aligned with proper gap.
                Text sits flush, icon positioned right with minimal gap. */}
            <div className="mt-8 flex items-start gap-3">
              <div className="max-w-sm">
                <p className="text-sm text-muted leading-snug">
                  {global.footerContactText}
                </p>
                <a
                  href={`mailto:${global.contactEmail}`}
                  className="inline-block  mt-6 text-black underline-offset-2 hover:underline"
                >
                  {global.contactEmail}
                </a>
              </div>
              <a
                href={global.linkedinUrl}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="wedigtech on LinkedIn"
                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-black text-white transition-transform hover:scale-105"
              >
                <LinkedIn className="h-5 w-5 " />
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Copyright bar */}
      <div className="border-t border-line bg-paper">
        <div className="mx-auto max-w-7xl px-6 py-6 text-center lg:px-10">
          <p className="text-sm text-muted">{global.copyrightText}</p>
        </div>
      </div>
    </footer>
  );
}