import { PublicLayout } from "@/components/layout/public/public-layout";
import PostContentRenderer from "@/components/tip-tap/tiptap-renderer/post-content-renderer";
import { Separator } from "@/components/ui/separator";
import { createHelpers } from "@/lib/trpc/server";
import { Badge } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next";
import { buildMetadataFromContent } from "@/lib/meta-tags/server";

export async function generateMetadata(): Promise<Metadata> {
    return await buildMetadataFromContent({
        title: "Sponsorer",
        description: "Sponsorer Magasinet KBH",
        author: "Magasinet KBH",
        url: "https://magasinetkbh.dk/payments/sponsorship"
    });
}

const sponsorSocials = [
    {
        id: 1,
        label: "Del på Facebook",
        url: "https://www.facebook.com/sharer.php?u=https://www.magasinetkbh.dk/sponsorship",
        icon: "https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-facebook.svg"
    },
    {
        id: 2,
        label: "Del på Twitter",
        url: "https://twitter.com/intent/tweet?url=https://www.magasinetkbh.dk/sponsorship",
        icon: "https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-twitter.svg"
    },
    {
        id: 3,
        label: "Del på LinkedIn",
        url: "https://www.linkedin.com/shareArticle?mini=true&url=https://www.magasinetkbh.dk/sponsorship",
        icon: "https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-linkedin.svg"
    },
    {
        id: 4,
        label: "Del via Email",
        url: "mailto:?subject=Stoet MagasinetKBH&body=https://www.magasinetkbh.dk/sponsor",
        icon: "https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-email.svg"
    }
];

export default async function Sposorship() {
    const helpers = await createHelpers();

    const [plans, sponsors] = await Promise.all([
        helpers.sponsorPlan.list.fetch({}),
        helpers.sponsor.list.fetch({
            with: ["logo"]
        })
    ]);

    const sortedPlans = plans?.sort((a, b) => a.price - b.price);

    return (
        <PublicLayout>
            <section className="mx-auto w-full max-w-[1362px] items-center p-3 md:p-[30px] xl:border-x">
                <div className="flex w-full flex-col items-center text-center">
                    <h1 className="mb-6 text-3xl font-bold text-neutral-600">
                        Sponsorér Magasinet KBH og vis at I støtter Københavns udvikling
                    </h1>
                    <Separator className="max-w-[60%] bg-neutral-600" />
                    <Badge className="fill-client-red/80 my-8 size-20 stroke-transparent" />
                    <div>
                        <h2 className="mb-6 text-4xl font-bold uppercase">BLIV SPONSOR</h2>
                        <p className="mx-auto mb-4 max-w-180 text-lg font-bold text-neutral-500">
                            Bliv sponsor af Magasinet KBH og vis at I støtter en bred og aktiv debat om Københavns
                            udvikling.
                        </p>
                        <p className="mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500">
                            Magasinet KBH er et centralt medie for såvel titusinder af &quot;almindelige&quot;
                            københavnere som for arkitekter, byplanlæggere, udviklere, politikere, entreprenører m.v.
                        </p>
                        <p className="mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500">
                            Med et sponsorat sender I et klart signal om, at jeres organisation er engageret i
                            udviklingen af Danmarks hovedstad.
                        </p>
                        <div className="mx-auto mt-8 grid max-w-270 grid-cols-1 gap-x-8 gap-y-4 md:grid-cols-3">
                            {sortedPlans?.map((item) => (
                                <article key={item.id} className="w-full self-start bg-neutral-100">
                                    <h6 className="bg-neutral-600 p-4 text-lg font-bold text-white">{item.title}</h6>
                                    <p className="my-8 font-bold">Fra</p>
                                    <p className="my-3 text-6xl font-bold">{item.price / 100},-</p>
                                    <p className="my-3 font-bold">/år</p>
                                    <div className="px-4">
                                        <PostContentRenderer nodeContent={item.content} />
                                    </div>
                                    <Link
                                        href={`mailto:sponsor@magasinetkbh.dk?subject=${item.title}&body=Hej%20Magasinet%20KBH%2C%0D%0A%0D%0AVi%20er%20interesserede%20i%20at%20st%C3%B8tte%20udgivelsen%20ved%20at%20blive%20sponsor%20og%20vil%20meget%20gerne%20h%C3%B8re%20n%C3%A6rmere.%0D%0A%0D%0AMed%20venlig%20hilsen%0D%0A%0D%0A%0D%0A`}
                                        className="bg-client-red hover:bg-client-red/80 my-7 inline-block rounded-md px-6 py-2 text-lg font-bold text-white transition"
                                    >
                                        Send e-mail
                                    </Link>
                                </article>
                            ))}
                        </div>
                        <p className="mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500">
                            * Beløbene tillægges moms
                        </p>
                        <p className="mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500">
                            ** Et sponsorat af Magasinet KBH er teknisk set en markedsføringsudgift. Derfor er der fuld
                            fradragsret både moms- og skattemæssigt.
                        </p>
                        <p className="mx-auto mb-6 max-w-200 text-lg font-bold text-neutral-500">
                            Alle sponsorer kan vise &#39;Vi sponsorerer KBH&#39; banneret på deres egen hjemmeside.
                        </p>
                        <Image
                            src="https://www.magasinetkbh.dk/sites/default/files/public/uploads/imce/vi-sponsorerer-rund-ed.png"
                            alt="BLIV SPONSOR"
                            width={140}
                            height={140}
                            className="mx-auto my-6 size-36"
                        />
                        <p className="mx-auto mb-6 max-w-200 text-lg font-bold text-neutral-500">
                            (Vi sender en web-venlig version til jer, når I er blevet sponsor)
                        </p>
                        <div className="my-12">
                            <p className="text-lg font-medium text-neutral-600 uppercase">del siden på</p>
                            <ul className="mt-6 flex justify-center gap-2">
                                {sponsorSocials.map((item, index) => (
                                    <li key={index}>
                                        <Link href={item.url} className="rounded-full">
                                            <Image
                                                width={34}
                                                height={34}
                                                alt={item.label}
                                                src={item.icon}
                                                className="rounded-full transition-transform hover:scale-110"
                                            />
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                    <Separator className="max-w-[45%] bg-neutral-600" />
                    {!!sponsors.length && (
                        <div className="my-12">
                            <h2 className="mb-12 text-4xl font-bold uppercase">SPONSORER</h2>
                            <ul className="flex max-w-300 flex-wrap justify-center gap-8">
                                {sponsors.map((item, index) => (
                                    <li key={index} className="min-w-80">
                                        <Link
                                            href={item.url}
                                            target="_blank"
                                            className="text-client-red relative text-lg font-bold no-underline transition-all hover:underline"
                                        >
                                            {item.title}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </section>
        </PublicLayout>
    );
}