import Link from 'next/link';

import { Routes } from '@/config/routes';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

type KbhPlusPaywallProps = {
  className?: string;
  isLoggedIn?: boolean;
};

export function KbhPlusPaywall({
  className,
  isLoggedIn = false
}: KbhPlusPaywallProps) {
  return (
    <section
      className={cn(
        'mx-auto flex w-full max-w-[1362px] grow items-center justify-center p-6 md:p-[30px] xl:border-x',
        className
      )}
    >
      <div className='max-w-2xl text-center'>
        <p className='text-sm tracking-[0.4em] text-neutral-400 uppercase'>
          KBH+
        </p>
        <h1 className='mt-4 font-serif text-3xl font-semibold text-neutral-900 md:text-4xl'>
          {isLoggedIn
            ? 'Opgrader til Plus for fuld adgang'
            : 'Fuld adgang kræver medlemskab'}
        </h1>
        <p className='mt-6 text-base text-neutral-600 md:text-lg'>
          {isLoggedIn ? (
            <>
              Du har et <strong>Basis</strong>-abonnement, som giver adgang til
              det meste indhold. For at få adgang til{' '}
              <strong>KBH+ sektionen</strong> med baggrundsstof, skal du
              opgradere til <strong>Plus</strong> eller et{' '}
              <strong>Erhvervsabonnement</strong>.
            </>
          ) : (
            <>
              Artikler og analyser i KBH+ er forbeholdt medlemmer af Magasinet
              KBH. Log ind hvis du allerede er medlem, eller bliv medlem for at
              få adgang til hele magasinet.
            </>
          )}
        </p>
        <div className='mt-8 flex flex-col items-center justify-center gap-3 md:flex-row md:gap-4'>
          {isLoggedIn ? (
            <>
              <Button
                asChild
                className='w-full max-w-xs rounded-none bg-neutral-900 text-white hover:bg-neutral-800'
              >
                <Link href={Routes.PAYMENTS.PERSONAL.MAIN}>
                  Opgrader til Plus
                </Link>
              </Button>
              <Button
                asChild
                variant='secondary'
                className='w-full max-w-xs rounded-none border border-neutral-900 bg-transparent text-neutral-900 hover:bg-neutral-100'
              >
                <Link href={Routes.PAYMENTS.BUSINESS}>Erhvervsabonnement</Link>
              </Button>
            </>
          ) : (
            <>
              <Button
                asChild
                className='w-full max-w-xs rounded-none bg-neutral-900 text-white hover:bg-neutral-800'
              >
                <Link href={Routes.AUTH.SIGN_IN}>Log ind</Link>
              </Button>
              <Button
                asChild
                variant='secondary'
                className='w-full max-w-xs rounded-none border border-neutral-900 bg-transparent text-neutral-900 hover:bg-neutral-100'
              >
                <Link href={Routes.PAYMENTS.PERSONAL.MAIN}>Bliv medlem</Link>
              </Button>
            </>
          )}
        </div>
        {!isLoggedIn && (
          <p className='mt-6 text-sm text-neutral-500'>
            Er du virksomhed eller organisation?{' '}
            <Link
              href={Routes.PAYMENTS.BUSINESS}
              className='text-client-red underline decoration-from-font underline-offset-2'
            >
              Se erhvervsabonnement
            </Link>
            .
          </p>
        )}
        {isLoggedIn && (
          <div className='mt-6 rounded-md bg-neutral-100 p-4'>
            <p className='text-sm text-neutral-700'>
              <strong>Sammenligning:</strong>
            </p>
            <div className='mt-3 grid grid-cols-1 gap-3 text-left text-sm md:grid-cols-2'>
              <div>
                <p className='font-semibold text-neutral-900'>
                  Basis (29 kr/md)
                </p>
                <ul className='mt-1 ml-4 list-disc text-neutral-600'>
                  <li>90% af indholdet</li>
                  <li>Ingen KBH+ adgang</li>
                </ul>
              </div>
              <div>
                <p className='text-client-red font-semibold'>Plus (69 kr/md)</p>
                <ul className='mt-1 ml-4 list-disc text-neutral-600'>
                  <li>Alt indhold inkl. KBH+</li>
                  <li>Ingen reklamer</li>
                  <li>Magasinet KBH-krus</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}