import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { LinkedIn } from "@/components/icons";
import { getLetterContent } from "@/lib/letter";
import { getGlobalContent } from "@/lib/global";

export const revalidate = 60; // ISR

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

export default async function LetterPage() {
  const [letter, global] = await Promise.all([getLetterContent(), getGlobalContent()]);

  return (
    <article className="relative">
      {/* soft top wash behind the header */}
      <div className="wash-aurora pointer-events-none absolute inset-x-0 top-0 -z-10 h-80" />

      <div className="mx-auto max-w-7xl px-6 pb-24 pt-36 sm:pt-44 lg:px-8">
        {/* Founder photo — uses the source image's own ratio (370:532) so the
            full portrait shows with no crop, keeping the corner rounding even
            on all four sides. Scaled to 180×259 here. */}
        {letter.authorImage ? (
          <Image
            src={letter.authorImage}
            alt={letter.signatureName}
            width={370}
            height={532}
            className="h-[259px] w-[180px] shrink-0 overflow-hidden rounded-xl object-cover"
          />
        ) : (
          <div className="h-[259px] w-[180px] shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-wash-sky to-wash-mint grayscale" />
        )}

        <h1 className="mt-8 font-display text-2xl font-bold tracking-tight text-ink sm:text-3xl [white-space:pre-line]">
          {letter.title}
        </h1>

        <hr className="my-9 border-line" />

        {/* Letter body — rich text from the CMS, styled via .letter-prose */}
        <div
          className="letter-prose text-lg leading-relaxed text-ink-soft"
          dangerouslySetInnerHTML={{ __html: letter.body }}
        />

        {/* Signature */}
        <div className="mt-12">
          <p className="font-display text-lg font-bold text-ink">{letter.signatureName}</p>
          <p className="text-muted">{letter.signatureTitle}</p>
        </div>

        {/* Write to me */}
        <div className="mt-10 flex flex-wrap items-center gap-4 border-t border-line pt-8">
          <span className="text-sm text-muted">Write to me at:</span>
          <a
            href={`mailto:${global.contactEmail}`}
            className="text-sm font-semibold text-leaf-deep underline-offset-2 hover:underline"
          >
            {global.contactEmail}
          </a>
          <a
            href={global.linkedinUrl}
            target="_blank"
            rel="noopener noreferrer"
            aria-label="wedigtech on LinkedIn"
            className="flex h-9 w-9 items-center justify-center rounded-lg bg-black text-white transition-transform hover:scale-105"
          >
            <LinkedIn className="h-5 w-5" />
          </a>
        </div>

        <div className="mt-12">
          <Link
            href="/"
            className="text-sm font-semibold text-muted transition-colors hover:text-leaf-deep"
          >
            ← Back to home
          </Link>
        </div>
      </div>
    </article>
  );
}