import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrow } from "@/components/icons";
import { PageHero } from "@/components/PageHero";
import { type BlogPost, blogPosts } from "@/lib/content";
import { site } from "@/lib/site";

type Params = { slug: string };

const TRENDING_POSTS = [
  "Top 10 Vanta Competitors & Alternatives: A Detailed Comparison",
  "SOC 2 Compliance Checklist: 12 Essential Steps to Take",
  "Top 10 Vanta Competitors & Alternatives: A Detailed Comparison",
  "SOC 2 Compliance Checklist: 12 Essential Steps to Take",
  "Top 10 Vanta Competitors & Alternatives: A Detailed Comparison",
  "SOC 2 Compliance Checklist: 12 Essential Steps to Take",
] as const;

const DETAIL_TITLE =
  "Building Compliance You Can Trust: Audit Trails, Human-in-the-Loop, and Ethical AI at AttestPath";

function RelatedPostCard({ post }: { post: BlogPost }) {
  return (
    <div className="col-12 col-md-6 col-lg-4">
      <div className="bento-card" data-reveal>
        <Image
          src="/assets/img/placeholder.svg"
          alt=""
          width={800}
          height={500}
          className="img-fluid mb-3 mb-md-4 b-rounded-lg"
        />
        <h3 className="text-limit-1">{post.title}</h3>
        <p className="text-limit-2">{post.excerpt}</p>
        <div className="d-flex justify-content-between align-items-center gap-2 mt-auto pt-md-4 pt-3">
          <p className="bc-n mb-0">{post.date}</p>
          <Link
            className="btn-av min-w-fit-content py-2 ps-3"
            href={`/blog/${post.slug}`}
          >
            Read Article{" "}
            <span className="btn-arrow">
              <IconArrow />
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
}

export function generateStaticParams() {
  return blogPosts.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<Params>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = blogPosts.find((p) => p.slug === slug);
  if (!post) return {};

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      type: "article",
      title: `${post.title} | ${site.name}`,
      description: post.excerpt,
    },
    twitter: { title: `${post.title} | ${site.name}`, description: post.excerpt },
  };
}

export default async function BlogDetailPage({
  params,
}: {
  params: Promise<Params>;
}) {
  const { slug } = await params;
  const post = blogPosts.find((p) => p.slug === slug);
  if (!post) notFound();

  const relatedPosts = blogPosts.filter((p) => p.slug !== post.slug).slice(0, 3);

  return (
    <>
      <PageHero
        title="Our"
        accent="Blog"
        lead="Stay updated with our latest Blogs"
      />

      <section className="section pt-4 pt-md-5">
        <div className="container">
          <div className="row g-4">
            <div className="col-lg-8">
              <article className="blog-detail-page">
                <p className="mb-2 bc-n">{post.date}</p>
                <h2 className="post-title">{DETAIL_TITLE}</h2>
                <Image
                  src="/assets/img/placeholder.svg"
                  alt=""
                  width={800}
                  height={500}
                  className="img-fluid mb-3 rounded-4"
                  priority
                />
                <p>
                  The GRC industry has a trust problem. And it&apos;s not because
                  of a lack of technology, but because of how that technology
                  has been built.
                </p>
                <p>
                  The GRC industry has a trust problem. And it&apos;s not because
                  of a lack of technology, but because of how that technology
                  has been built.
                </p>
                <p>
                  On March18, 2026, a leaked spreadsheet revealed that a major
                  GRC platform had generated 494 near-identical compliance
                  reports with pre-written auditor conclusions. Board meeting
                  minutes were fabricated. Risk assessments were offered as
                  one-click templates. 99.8% of reports contained identical
                  boilerplate text, right down to the same grammatical errors.
                </p>
                <p>
                  That incident exposed something we&apos;d been balancing for a
                  long time: speed is nothing without substance, and compliance
                  is not theater. The reports look complete, but they protect no
                  one.
                </p>
                <ul>
                  <li>
                    <p>
                      The GRC industry has a trust problem. And it&apos;s not
                      because of a lack of technology, but because of how that
                      technology has been built.
                    </p>
                  </li>
                  <li>
                    <p>
                      The GRC industry has a trust problem. And it&apos;s not
                      because of a lack of technology, but because of how that
                      technology has been built.
                    </p>
                  </li>
                </ul>
                <p>
                  Over the past year we have carefully weighed the balance
                  between speed and substance. From day one, we partnered with
                  auditors and compliance industry veterans to identify the
                  lowest hanging fruit for automation. The approach has been
                  simple: how can we automate the time consuming manual effort,
                  while preserving the key decisions, approvals, and audit
                  trails that make compliance a source of security and truth.
                  Every architectural decision in our platform starts from the
                  same question: would an auditor trust this?
                </p>
                <p>
                  This post is a look under the hood at how we&apos;ve built that
                  trust into the infrastructure itself.
                </p>
                <h3>What this means for you</h3>
                <p>
                  The compliance industry is at an inflection point. The
                  companies that will win the next decade are building on real
                  foundations, and their compliance posture should be one of
                  them.
                </p>
                <Image
                  src="/assets/img/placeholder.svg"
                  alt=""
                  width={800}
                  height={500}
                  className="img-fluid mb-3 rounded-4"
                />
                <p>
                  We built AttestPath for auditors who take their independence
                  seriously, for companies that want compliance they can
                  actually stand behind, and for an industry that deserves
                  better than fabricated reports and rubber-stamped
                  certifications.
                </p>
                <ol>
                  <li>
                    <p>
                      The GRC industry has a trust problem. And it&apos;s not
                      because of a lack of technology, but because of how that
                      technology has been built.
                    </p>
                  </li>
                  <li>
                    <p>
                      The GRC industry has a trust problem. And it&apos;s not
                      because of a lack of technology, but because of how that
                      technology has been built.
                    </p>
                  </li>
                </ol>
                <p>
                  If you&apos;re evaluating what &quot;real&quot; looks like in compliance
                  automation right now, we are always happy to talk.
                </p>
              </article>
            </div>

            <div className="col-lg-4">
              <div className="bento-card bento-card-no-hover" data-reveal>
                <h2 className="text-xxl mb-4">
                  Trending <em>Posts</em>
                </h2>
                <ul className="list-style-none p-0 m-0">
                  {TRENDING_POSTS.map((title, i) => (
                    <li
                      className={
                        i === TRENDING_POSTS.length - 1
                          ? "mb-0"
                          : "pb-3 mb-3 border-bottom"
                      }
                      key={`${i}-${title}`}
                    >
                      <Link
                        href="/blog"
                        className="d-flex align-items-start gap-1 gap-md-2"
                      >
                        <span className="faq-n mt-2">
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <span className="text-limit-2">{title}</span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-cream blog-page">
        <div className="container">
          <div className="split-head mb-5">
            <p className="kicker">
              <span className="num">01</span>Blog
            </p>
            <h2 className="mb-0">
              Related <em>Posts</em>
            </h2>
          </div>
          <div className="row g-4 g-lg-3 g-xl-4">
            {relatedPosts.map((relatedPost) => (
              <RelatedPostCard key={relatedPost.slug} post={relatedPost} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}