import { type CSSProperties } from 'react';
import './contact.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';

interface IconifyIconProps {
  className?: string;
  icon: string;
  style?: CSSProperties;
}

function IconifyIcon({ className, icon, style }: IconifyIconProps) {
  return <iconify-icon className={className} icon={icon} style={style} />;
}

const contactSubjects = [
  'Priser',
  'Premium',
  'CV-optimering',
  'Jobsøgning',
  'Match-algoritme',
  'Interviewtræning',
  'AI-agent',
  'Jobnotifikationer',
  'Virksomhedsprofil',
  'Annonceoprettelse',
  'Ansøgerflow',
  'Integrationer',
  'API-adgang',
  'Data & sikkerhed',
  'GDPR',
  'Brugeradgang',
  'Onboarding',
  'Opsigelse',
  'Faktura',
  'Betaling',
  'Support',
  'Bug rapport',
  'Feature-ønske',
  'Partnerskab',
  'Presse',
  'Nyhedsbrev',
  'Teknisk hjælp',
  'Skift plan',
  'Demo',
  'Andet',
];

const floatingSubjects = contactSubjects.map((label, index) => {
  const row = Math.floor(index / 5);
  const col = index % 5;
  const top = Math.min(90, Math.max(8, 12 + row * 14 + ((index * 11) % 8) - 3));
  const left = Math.min(92, Math.max(8, 10 + col * 18 + ((index * 17) % 10) - 4));

  return {
    label,
    top,
    left,
    duration: 4.8 + (index % 5) * 0.7,
    delay: -(index % 7) * 0.65,
  };
});

export function ContactPage() {
  return (
    <div className="contact-react-root scroll-smooth bg-[#f8fafc] relative min-h-screen text-gray-600 selection:bg-teal-100 selection:text-teal-900 overflow-x-hidden flex flex-col font-normal contact-scrollbar">
      <div className="fixed top-[-15%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-br from-teal-400/30 to-emerald-300/10 blur-[140px] pointer-events-none z-0" />
      <div className="fixed bottom-[-15%] right-[-10%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-tl from-indigo-500/20 to-purple-400/10 blur-[160px] pointer-events-none z-0" />
      <div className="fixed top-[20%] right-[15%] w-[40vw] h-[40vw] rounded-full bg-gradient-to-tr from-cyan-400/20 to-blue-300/10 blur-[130px] pointer-events-none z-0" />

      <SiteNavbar />

      <main className="flex-1 relative z-10 pt-16">
        <section className="pt-24 pb-12 px-6 lg:px-12 max-w-7xl mx-auto text-center">
          <h1 className="text-4xl md:text-6xl font-medium tracking-tight text-gradient-subtle mb-5">
            Kontakt os
          </h1>
          <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Har du spørgsmål om platformen, priser eller samarbejde? Send os en besked, så vender vi hurtigt tilbage.
          </p>
        </section>

        <section className="pb-24 px-6 lg:px-12 max-w-7xl mx-auto w-full">
          <div className="contact-grid-shell grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div className="relative h-full min-h-[520px] rounded-[2.5rem] bg-gradient-to-br from-white/65 to-white/20 border border-white/70 backdrop-blur-2xl shadow-[0_12px_40px_rgba(0,0,0,0.05)] overflow-hidden">
              <div className="absolute -top-20 -left-16 w-56 h-56 rounded-full bg-teal-300/25 blur-[70px] pointer-events-none" />
              <div className="absolute -bottom-20 -right-16 w-64 h-64 rounded-full bg-indigo-300/20 blur-[80px] pointer-events-none" />

              <div className="absolute inset-0 pl-[5px]">
                {floatingSubjects.map((subject, index) => (
                  <div
                    key={`${subject.label}-${index}`}
                    className="absolute contact-floating-pill"
                    style={{
                      top: `${subject.top}%`,
                      left: `${subject.left}%`,
                      animationDuration: `${subject.duration}s`,
                      animationDelay: `${subject.delay}s`,
                    }}
                  >
                    <div className="relative -translate-x-1/2 -translate-y-1/2">
                      <span className="inline-flex items-center px-3 py-1.5 rounded-full bg-white/75 backdrop-blur-xl border border-white/80 text-xs md:text-sm text-gray-700 shadow-[0_10px_25px_rgba(15,23,42,0.12)] whitespace-nowrap">
                        {subject.label}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="h-full rounded-[2.5rem] p-8 md:p-10 bg-gradient-to-br from-white/75 to-white/35 backdrop-blur-2xl border border-white/80 shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
              <div className="mb-8">
                <h2 className="text-2xl md:text-3xl font-medium text-gray-900 tracking-tight mb-3">Send en besked</h2>
                <p className="text-base text-gray-600">
                  Fortæl os kort, hvad du har brug for hjælp til.
                </p>
              </div>

              <form className="space-y-5">
                <div>
                  <label htmlFor="contact-name" className="block text-sm font-medium text-gray-700 mb-2">Navn</label>
                  <input
                    id="contact-name"
                    type="text"
                    placeholder="Dit navn"
                    className="w-full px-4 py-3 rounded-2xl bg-white/80 border border-white/90 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-300 focus:border-teal-200 shadow-sm"
                  />
                </div>

                <div>
                  <label htmlFor="contact-email" className="block text-sm font-medium text-gray-700 mb-2">E-mail</label>
                  <input
                    id="contact-email"
                    type="email"
                    placeholder="navn@eksempel.dk"
                    className="w-full px-4 py-3 rounded-2xl bg-white/80 border border-white/90 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-300 focus:border-teal-200 shadow-sm"
                  />
                </div>

                <div>
                  <label htmlFor="contact-message" className="block text-sm font-medium text-gray-700 mb-2">Besked</label>
                  <textarea
                    id="contact-message"
                    rows={7}
                    placeholder="Skriv din besked her..."
                    className="w-full px-4 py-3 rounded-2xl bg-white/80 border border-white/90 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-300 focus:border-teal-200 shadow-sm resize-none"
                  />
                </div>

                <button
                  type="submit"
                  className="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-2xl bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white font-medium border border-gray-700 hover:from-gray-800 hover:to-gray-700 transition-all shadow-[0_8px_20px_rgba(17,24,39,0.2)]"
                >
                  Send besked
                  <IconifyIcon icon="solar:arrow-right-linear" className="text-lg" style={{ strokeWidth: 1.5 }} />
                </button>
              </form>
            </div>
          </div>

        </section>
      </main>

      <SiteFooter />
    </div>
  );
}
