'use client';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger
} from '@/components/ui/dialog';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';

export default function VisionModal() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <button className='text-client-blue flex cursor-pointer items-center gap-1 rounded-none hover:underline'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 512 512'
            className='fill-client-blue size-4'
          >
            <path d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z' />
          </svg>
          <span className='leading-none font-medium'>læs mere</span>
        </button>
      </DialogTrigger>
      <DialogContent
        className='max-h-[calc(100dvh-1.5rem)] w-full gap-0 overflow-y-auto rounded-none p-5 sm:max-h-[calc(90dvh)] lg:min-w-[798px]'
        showCloseButton={false}
        aria-describedby={undefined}
      >
        <div className='relative flex w-full flex-col lg:flex-row'>
          <Button
            className='bg-client-blue hover:bg-bg-client-blue absolute top-0 right-0 flex h-[34px] w-[38px] cursor-pointer items-center justify-center rounded-none'
            onClick={() => setOpen(false)}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='0 0 384 512'
              className='size-6 fill-white'
            >
              <path d='M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z' />
            </svg>
          </Button>
          <div className='bg-client-blue p-3'>
            <Image
              src='/images/visions-popup/vis-pop-up-logo.png'
              alt='Visioner for København'
              width={69}
              height={69}
            />
            <DialogTitle className='mt-2 text-2xl font-bold text-white'>
              VISIONER
              <br />
              FOR
              <br />
              KØBENHAVN
            </DialogTitle>
          </div>
          <div className='border-x-client-blue flex-1 border-0 bg-[#dddee8] px-3 pt-4 pb-3 leading-5 font-bold text-neutral-600 lg:border-x lg:pt-10'>
            <p className='text-2xl leading-6 text-neutral-800'>
              Hvad synes du, vi skal have i København?
            </p>
            <p className='pt-3'>
              Er du registreret bruger hos Magasinet KBH kan du stemme visioner
              præsenteret på siden op og ned.
            </p>
            <div className='flex items-center gap-4 pt-2'>
              <Image
                src='/images/visions-popup/popup_visioner_chart_03.png'
                alt='Visioner for København'
                width={68}
                height={98}
                className='shrink-0'
              />
              <p>
                Du stemmer ved at klikke enten på pil op eller pil ned, når du
                er på en side med en vision.
              </p>
            </div>
            <p className='pt-4'>
              Vi kan ikke love dig, at populære visioner bliver til virkelighed
              i morgen. Men Magasinet KBH er et centralt medie at orientere sig
              i for både offentlige og private der har med Københavns udvikling
              at gøre.
            </p>
          </div>
          <div className='flex w-full flex-col gap-3 bg-[#dddee8] px-3 pt-4 pb-3 text-xs leading-5 font-bold text-neutral-600 lg:w-54 lg:pt-12'>
            <p className='text-[22px]'>Har du en vision?</p>
            <p>
              Vi inviterer med mellemrum arkitekter til at sende deres visioner
              ind til Magasinet KBH.
            </p>
            <p>
              Men man behøver ikke at være arkitekt for at få gode idéer. Derfor
              er alle læsere velkomne til at sende deres vision ind til
              Magasinet KBH.
            </p>
            <p>
              Send os mindst én illustration af din idé sammen med en kortfattet
              tekst.
            </p>
            <p>
              Illustrationen kan være alt fra en blyantstegning eller et foto
              taget med din telefon til en Photoshop-collage.
            </p>
            <p>
              Du kan også bruge et billede fundet på nettet, men du skal sikre
              dig, at billedet må reproduceres. Har du fundet billedet på
              nettet, så skriv i din mail til os hvor på nettet du har fundet
              det.
            </p>
            <p>
              Skriv til
              <br />
              <Link
                href='mailto:visioner@magasinetkbh.dk'
                className='text-client-blue'
              >
                visioner@magasinetkbh.dk
              </Link>
            </p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}