import Image from "next/image";
import Link from "next/link";
import InfoPageShell from "@/components/InfoPageShell";
import { getOpinionArticles } from "@/content/courseVisits";
import {
  createBreadcrumbJsonLd,
  createCollectionPageJsonLd,
  createPageMetadata,
} from "@/app/seo";

const pageTitle = "Meninger";
const pageDescription =
  "Redaksjonelle artikler, siste nytt og kommentarer fra TeeOff, samlet i én egen seksjon.";

export const metadata = createPageMetadata({
  title: pageTitle,
  description: pageDescription,
  path: "/meninger",
});

export const dynamic = "force-dynamic";

export default async function OpinionsPage() {
  const articles = await getOpinionArticles();
  const featuredArticle = articles[0];

  const collectionJsonLd = createCollectionPageJsonLd({
    name: pageTitle,
    description: pageDescription,
    path: "/meninger",
  });

  const breadcrumbJsonLd = createBreadcrumbJsonLd([
    { name: "Hjem", path: "/" },
    { name: "Meninger", path: "/meninger" },
  ]);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />

      <InfoPageShell
        eyebrow="Meninger"
        title="Redaksjonelt innhold uten tvangstrøye"
        intro="Meninger samler TeeOffs kommentarer, siste nytt og andre artikler som ikke nødvendigvis er rene banebesøk. Her kan innholdet stå alene, men fortsatt kobles til baneprofiler når det gir mening."
      >
        {featuredArticle ? (
          <section className="grid gap-6 xl:grid-cols-[1.2fr,0.8fr]">
            <article className="surface-card overflow-hidden rounded-[2rem]">
              <div className="relative aspect-[4/5] sm:aspect-[16/10]">
                <Image
                  src={featuredArticle.heroImages[0].src}
                  alt={featuredArticle.heroImages[0].alt}
                  fill
                  priority
                  sizes="(max-width: 768px) 100vw, 70vw"
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#112015]/90 via-[#112015]/42 to-transparent" />
                <div className="absolute inset-x-0 bottom-0 p-5 sm:p-8">
                  <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
                    {featuredArticle.eyebrow}
                  </p>
                  <h2 className="mt-4 max-w-3xl text-4xl font-black text-white sm:text-5xl">
                    {featuredArticle.title}
                  </h2>
                  <p className="mt-4 max-w-2xl text-base leading-7 text-white/86">
                    {featuredArticle.excerpt}
                  </p>
                  <div className="mt-6 flex flex-wrap gap-3 text-[11px] font-black uppercase tracking-[0.16em] text-white/72">
                    <span>{featuredArticle.locationLabel}</span>
                    <span>{featuredArticle.readingTime}</span>
                    <span>{featuredArticle.publishedAt}</span>
                  </div>
                  <div className="mt-6 flex flex-wrap gap-3">
                    <Link
                      href={`/meninger/${featuredArticle.slug}`}
                      className="inline-flex items-center rounded-full bg-[#FF5722] px-5 py-3 text-sm font-black uppercase tracking-[0.16em] text-white transition hover:bg-[#C94F2D]"
                    >
                      Les artikkelen
                    </Link>
                    {featuredArticle.facilitySlug ? (
                      <Link
                        href={`/golfbaner/${featuredArticle.facilitySlug}`}
                        className="inline-flex items-center rounded-full border border-white/18 bg-white/10 px-5 py-3 text-sm font-black uppercase tracking-[0.16em] text-white transition hover:bg-white/18"
                      >
                        Gå til baneprofil
                      </Link>
                    ) : null}
                  </div>
                </div>
              </div>
            </article>

            <aside className="surface-card rounded-[2rem] p-6 sm:p-8">
              <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#FF5722]">
                Redaksjonell seksjon
              </p>
              <h2 className="mt-4 text-3xl font-black text-[#112015]">Meninger står nå separat</h2>
              <div className="mt-6 grid gap-3">
                {featuredArticle.highlights.map((highlight) => (
                  <div
                    key={highlight}
                    className="rounded-[1.4rem] border border-[#112015]/8 bg-[#F7F9F2] px-4 py-4"
                  >
                    <p className="text-sm font-bold leading-6 text-[#334238]">{highlight}</p>
                  </div>
                ))}
              </div>
              <p className="mt-6 text-sm leading-6 text-[#536256]">
                Artikler med kategorier som ikke er Banebesøk kan nå importeres og publiseres
                uten å lekes om til baneartikler først.
              </p>
            </aside>
          </section>
        ) : null}

        <section className="mt-8">
          <div className="flex items-end justify-between gap-4">
            <div>
              <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
                Artikler
              </p>
              <h2 className="mt-3 text-3xl font-black text-[#112015]">Meninger i system</h2>
            </div>
            <p className="text-sm font-bold text-[#5A685C]">{articles.length} publisert</p>
          </div>

          <div className="mt-6 grid gap-5 lg:grid-cols-2">
            {articles.map((article) => (
              <article key={article.slug} className="surface-card overflow-hidden rounded-[2rem]">
                <div className="grid gap-0 md:grid-cols-[0.95fr,1.05fr]">
                  <div className="relative min-h-[16rem]">
                    <Image
                      src={article.heroImages[0].src}
                      alt={article.heroImages[0].alt}
                      fill
                      sizes="(max-width: 768px) 100vw, 40vw"
                      className="object-cover"
                    />
                  </div>
                  <div className="p-5 sm:p-6">
                    <div className="flex flex-wrap gap-3 text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">
                      <span>{article.eyebrow}</span>
                      <span>{article.locationLabel}</span>
                      <span>{article.readingTime}</span>
                    </div>
                    <h3 className="mt-4 text-3xl font-black text-[#112015]">{article.title}</h3>
                    <p className="mt-4 text-sm leading-6 text-[#536256]">{article.excerpt}</p>
                    <div className="mt-5 flex flex-wrap gap-2">
                      {article.quickFacts.slice(0, 3).map((fact) => (
                        <span
                          key={`${article.slug}-${fact.label}`}
                          className="rounded-full border border-[#112015]/8 bg-[#F7F9F2] px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] text-[#334238]"
                        >
                          {fact.label}: {fact.value}
                        </span>
                      ))}
                    </div>
                    <div className="mt-6 flex flex-wrap gap-3">
                      <Link
                        href={`/meninger/${article.slug}`}
                        className="inline-flex items-center rounded-full bg-[#112015] px-4 py-3 text-[11px] font-black uppercase tracking-[0.16em] text-white transition hover:bg-[#25312A]"
                      >
                        Åpne artikkel
                      </Link>
                      {article.facilitySlug ? (
                        <Link
                          href={`/golfbaner/${article.facilitySlug}`}
                          className="inline-flex items-center rounded-full border border-[#112015]/10 bg-white px-4 py-3 text-[11px] font-black uppercase tracking-[0.16em] text-[#112015] transition hover:border-[#8BC34A]"
                        >
                          Baneprofil
                        </Link>
                      ) : null}
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </section>
      </InfoPageShell>
    </>
  );
}