'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { cn } from '@/components/ui/utils';
import dynamic from 'next/dynamic';

const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });

interface Props {
  className?: string;
  compact?: boolean;
}

/**
 * BrochureCTA — Shows a button that opens a modal asking for an email address.
 * The full-catalog PDF is ONLY revealed after email submission.
 * No direct download link is exposed anywhere.
 */
export default function BrochureCTA({ className, compact = false }: Props) {
  const t = useTranslations('Brochure');
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className={cn(className)}>
        <button
          type="button"
          onClick={() => setOpen(true)}
          className={cn(
            'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
            'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
            compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
          )}
        >
          {/* Green top accent */}
          <span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />

          {/* Icon */}
          <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
            <svg
              className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
              />
            </svg>
          </span>

          {/* Labels */}
          <span className="flex-1 min-w-0">
            <span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">
              PDF Katalog
            </span>
            <span
              className={cn(
                'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
                compact ? 'text-base' : 'text-lg md:text-xl',
              )}
            >
              {t('ctaTitle')}
            </span>
          </span>

          {/* Arrow */}
          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2.5}
                d="M9 5l7 7-7 7"
              />
            </svg>
          </span>
        </button>
      </div>

      <BrochureModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}