import { useEffect, useState, type CSSProperties } from 'react';
import './homepage.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import screen1Image from '../../../assets/screen1.png';
import screen2Image from '../../../assets/screen2.png';

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

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

const trustedCompanyLogos = [
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/60939fdba79df07cd812c88d_gws-logo-300x137.png',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30145fcb24b0fbeed48_horse.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30482be352ae620de93_St%C3%A6rmose.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b303b480060b735069de_plast-line.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30019b62383f496b96e_DKM.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/608fa2bec9c901a64c864a6e_29a1c682_logo.jpeg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302fde5303d3b057be1_JPD.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b300089747750fea09bd_find%20job%20abroad.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302bd1bed78e2c84ebe_Midtfjord.svg',
];

export function HomePage() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [isTipsOpen, setIsTipsOpen] = useState(false);
  const [isHowOpen, setIsHowOpen] = useState(false);

  useEffect(() => {
    if (!isNavOpen) {
      return undefined;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    function handleEscape(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setIsNavOpen(false);
      }
    }

    window.addEventListener('keydown', handleEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', handleEscape);
    };
  }, [isNavOpen]);

  useEffect(() => {
    function handleResize() {
      if (window.innerWidth > 990) {
        setIsNavOpen(false);
      }
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      const target = event.target as HTMLElement | null;
      if (!target?.closest('.homepage-how-dropdown')) {
        setIsHowOpen(false);
      }
      if (!target?.closest('.homepage-tips-dropdown')) {
        setIsTipsOpen(false);
      }
    }

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  return (
    <div className="homepage-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 custom-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" />

      <nav className="homepage-nav fixed top-0 inset-x-0 z-50 h-16 bg-white/20 backdrop-blur-2xl border-b border-white/50 shadow-[0_4px_30px_rgba(0,0,0,0.03)] flex items-center justify-between px-6 lg:px-12 transition-all">
        <a href="#" className="flex items-center gap-2 group outline-none">
          <svg viewBox="0 0 100 100" className="w-8 h-8 rounded-lg shadow-[0_4px_15px_rgba(49,103,201,0.2)] group-hover:shadow-[0_6px_20px_rgba(49,103,201,0.3)] transition-all group-hover:scale-105">
            <defs>
              <linearGradient id="navLogoBg" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#1A9A75" />
                <stop offset="100%" stopColor="#3167C9" />
              </linearGradient>
              <linearGradient id="navLogoFg" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#6ACEEB" />
                <stop offset="100%" stopColor="#46D3B6" />
              </linearGradient>
            </defs>
            <rect width="100" height="100" fill="url(#navLogoBg)" />
            <path fillRule="evenodd" clipRule="evenodd" d="M 60 15 L 72 15 L 72 85 L 60 85 L 60 72.98 A 28 28 0 1 1 60 27.02 Z M 44 34 A 16 16 0 1 0 44 66 A 16 16 0 1 0 44 34 Z" fill="url(#navLogoFg)" />
          </svg>
          <span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
        </a>

        <div className="homepage-nav-links">
          <a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
          <div className="homepage-how-dropdown">
            <button
              type="button"
              className="homepage-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
              onClick={() => {
                setIsHowOpen((current) => !current);
                setIsTipsOpen(false);
              }}
              aria-expanded={isHowOpen}
            >
              Sådan virker det
              <IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
            </button>
            <div className={isHowOpen ? 'homepage-how-menu open' : 'homepage-how-menu'}>
              <a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
              <a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
            </div>
          </div>
          <div className="homepage-tips-dropdown">
            <button
              type="button"
              className="homepage-tips-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm"
              onClick={() => {
                setIsTipsOpen((current) => !current);
                setIsHowOpen(false);
              }}
              aria-expanded={isTipsOpen}
            >
              Tips og tricks
              <IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
            </button>
            <div className={isTipsOpen ? 'homepage-tips-menu open' : 'homepage-tips-menu'}>
              <a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
              <a href="/jobordbogen" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
            </div>
          </div>
        </div>

        <div className="homepage-nav-actions">
          <a href="#" className="hidden sm:block text-base font-normal text-gray-700 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Log ind</a>
          <a href="#" className="text-base font-normal text-white bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 px-5 py-2.5 rounded-full transition-all shadow-[0_4px_15px_rgba(0,0,0,0.1)] outline-none border border-gray-700">Opret dig</a>
        </div>

        <button
          type="button"
          className="homepage-nav-hamburger"
          aria-expanded={isNavOpen}
          aria-label={isNavOpen ? 'Luk menu' : 'Åbn menu'}
          onClick={() => setIsNavOpen((current) => !current)}
        >
          <IconifyIcon icon={isNavOpen ? 'solar:close-circle-linear' : 'solar:hamburger-menu-linear'} className="text-xl text-gray-800" style={{ strokeWidth: 1.8 }} />
        </button>

        <div className={isNavOpen ? 'homepage-nav-popup open' : 'homepage-nav-popup'}>
          <a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For virksomheder</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: For jobsøgere</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: FAQ</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Sådan virker det: Nyhedsbrev</a>
          <a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
          <a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
          <a href="#" className="homepage-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
        </div>
      </nav>

      <main className="flex-1 relative z-10 pt-16">
        <section className="relative pt-24 pb-32 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl aspect-[2/1] bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-3xl border border-white/60 rounded-[3rem] shadow-[0_8px_40px_rgba(0,0,0,0.06)] -z-10 animate-float-slow" />

          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-white/60 to-white/30 backdrop-blur-xl border border-white/80 text-teal-800 text-sm font-medium uppercase tracking-wider mb-8 shadow-[0_4px_20px_rgba(20,184,166,0.1)]">
            <IconifyIcon icon="solar:magic-stick-3-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
            Fremtidens rekruttering
          </div>

          <h1 className="text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight text-gradient mb-8 leading-tight max-w-4xl drop-shadow-sm">
            Arbejd, Danmarks
            <br />
            Nye Jobportal
          </h1>

          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl font-normal leading-relaxed drop-shadow-sm">
            Opdag drømmejobbet med kraften fra AI. Vi matcher dine færdigheder med de perfekte muligheder og hjælper dig hele vejen til samtalen.
          </p>

          <button type="button" className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white rounded-full font-normal text-lg overflow-hidden shadow-[0_8px_25px_rgba(17,24,39,0.25)] hover:shadow-[0_12px_35px_rgba(17,24,39,0.35)] transition-all outline-none border border-gray-700 hover:-translate-y-0.5">
            <span className="relative z-10">Udforsk Arbejd.com</span>
            <IconifyIcon icon="solar:arrow-right-linear" className="text-xl group-hover:translate-x-1 transition-transform relative z-10" style={{ strokeWidth: 1.5 }} />
          </button>
        </section>

        <section className="py-12 border-y border-white/40 bg-gradient-to-r from-white/10 via-white/30 to-white/10 backdrop-blur-xl shadow-[0_4px_30px_rgba(0,0,0,0.02)]">
          <div className="max-w-7xl mx-auto px-6 lg:px-12">
            <p className="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8 drop-shadow-sm">Stoles på af innovative virksomheder</p>
            <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
              {trustedCompanyLogos.map((logo, index) => (
                <img
                  key={`${logo}-${index}`}
                  src={logo}
                  alt={`Virksomhedslogo ${index + 1}`}
                  className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 hover:scale-105"
                  loading="lazy"
                  decoding="async"
                  referrerPolicy="no-referrer"
                />
              ))}
            </div>
          </div>
        </section>

        <section className="py-32 px-6 lg:px-12 max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div className="relative w-full md:w-[112%] lg:w-[118%] md:-ml-[6%] lg:-ml-[9%] h-[660px] sm:h-[730px] md:h-[800px] lg:h-[860px] flex items-center justify-center overflow-visible">
              <div className="absolute top-1/4 left-[10%] w-24 h-24 rounded-full bg-gradient-to-tr from-white/40 via-white/10 to-teal-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home" />
              <div className="absolute bottom-1/5 right-[10%] w-32 h-32 rounded-[2rem] rotate-12 bg-gradient-to-tr from-white/40 via-white/10 to-indigo-50/30 backdrop-blur-xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.06)] z-0 animate-float-ambient-home [animation-delay:2s]" />

              <div className="relative flex items-center justify-center w-full max-w-5xl mx-auto transform scale-[0.65] sm:scale-75 md:scale-90 lg:scale-100 -space-x-12 sm:-space-x-16 md:-space-x-20">
                <div className="homepage-glass-glare relative w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/40 to-white/10 backdrop-blur-3xl border border-white/50 shadow-[0_30px_60px_rgba(0,0,0,0.15),inset_0_0_20px_rgba(255,255,255,0.6)] animate-float-1-home z-20">
                  <div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
                  <div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
                  <div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/40 border border-white/50 rounded-l-md shadow-sm" />
                  <div className="absolute -right-[2px] top-44 w-1 h-20 bg-white/40 border border-white/50 rounded-r-md shadow-sm" />

                  <div className="relative w-full h-full rounded-[2.8rem] bg-white overflow-hidden shadow-[inset_0_0_10px_rgba(255,255,255,0.1)] border border-white/60 isolate">
                    <img src={screen1Image} alt="App UI Design 1" className="absolute inset-0 w-full h-full object-cover z-0" />

                    <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-[100px] h-[30px] bg-black rounded-full z-50 shadow-[0_4px_10px_rgba(0,0,0,0.3)] flex items-center justify-between px-3">
                      <div className="w-2.5 h-2.5 rounded-full bg-gray-800 flex items-center justify-center">
                        <div className="w-1 h-1 rounded-full bg-indigo-500 blur-[1px]" />
                      </div>
                      <div className="w-2.5 h-2.5 rounded-full bg-gray-800" />
                    </div>

                    <div className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-[0.65rem] font-medium text-white/95">
                      <span>9:41</span>
                      <div className="flex items-center gap-1.5 drop-shadow-md">
                        <IconifyIcon icon="solar:cellular-network-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
                        <IconifyIcon icon="solar:wi-fi-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
                        <IconifyIcon icon="solar:battery-charge-linear" className="text-sm" style={{ strokeWidth: 1.5 }} />
                      </div>
                    </div>

                    <div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 w-1/3 h-[4px] bg-white/90 rounded-full z-50 shadow-sm" />
                  </div>
                </div>

                <div className="homepage-glass-glare relative w-[320px] h-[680px] sm:w-[360px] sm:h-[740px] rounded-[3.5rem] p-3 bg-gradient-to-br from-white/30 to-white/5 backdrop-blur-2xl border border-white/40 shadow-[0_20px_50px_rgba(0,0,0,0.1),inset_0_0_20px_rgba(255,255,255,0.4)] animate-float-2-home z-10">
                  <div className="absolute -left-[2px] top-28 w-1 h-8 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
                  <div className="absolute -left-[2px] top-40 w-1 h-14 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
                  <div className="absolute -left-[2px] top-56 w-1 h-14 bg-white/30 border border-white/40 rounded-l-md shadow-sm" />
                  <div className="absolute -right-[2px] top-44 w-1 h-20 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />

                  <div className="relative w-full h-full rounded-[2.8rem] bg-white overflow-hidden shadow-[inset_0_0_10px_rgba(255,255,255,0.1)] border border-white/60 isolate">
                    <img src={screen2Image} alt="App UI Design 2" className="absolute inset-0 w-full h-full object-cover z-0" />

                    <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-[100px] h-[30px] bg-black rounded-full z-50 shadow-[0_4px_10px_rgba(0,0,0,0.3)] flex items-center justify-between px-3">
                      <div className="w-2.5 h-2.5 rounded-full bg-gray-800 flex items-center justify-center">
                        <div className="w-1 h-1 rounded-full bg-teal-400 blur-[1px]" />
                      </div>
                      <div className="w-2.5 h-2.5 rounded-full bg-gray-800" />
                    </div>

                    <div className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-[0.65rem] font-medium text-white/95">
                      <span>9:41</span>
                      <div className="flex items-center gap-1.5 drop-shadow-md">
                        <IconifyIcon icon="solar:cellular-network-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
                        <IconifyIcon icon="solar:wi-fi-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
                        <IconifyIcon icon="solar:battery-charge-linear" className="text-sm" style={{ strokeWidth: 1.5 }} />
                      </div>
                    </div>

                    <div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 w-1/3 h-[4px] bg-white/90 rounded-full z-50 shadow-sm" />
                  </div>
                </div>
              </div>
            </div>

            <div className="flex flex-col justify-center">
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-6">
                En intelligent genvej
                <br />
                til dit næste job
              </h2>
              <p className="text-lg text-gray-600 mb-10 font-normal leading-relaxed drop-shadow-sm">
                Arbejd.com kombinerer det nyeste inden for kunstig intelligens med et intuitivt design, der gør din jobsøgning hurtigere, skarpere og mere succesfuld.
              </p>

              <div className="space-y-4">
                <div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(20,184,166,0.08)] hover:border-teal-200/60 transition-all cursor-default">
                  <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-50 to-white border border-teal-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                    <IconifyIcon icon="solar:document-text-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-understøttet CV-optimering</h3>
                    <p className="text-base text-gray-600 font-normal">Få skræddersyet dit CV til præcis den stilling du søger, så du altid står skarpest muligt.</p>
                  </div>
                </div>

                <div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(99,102,241,0.08)] hover:border-indigo-200/60 transition-all cursor-default">
                  <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-50 to-white border border-indigo-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                    <IconifyIcon icon="solar:pen-new-square-linear" className="text-2xl text-indigo-600" style={{ strokeWidth: 1.5 }} />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI Ansøgninger</h3>
                    <p className="text-base text-gray-600 font-normal">Generer målrettede og personlige ansøgninger, der fanger arbejdsgiverens opmærksomhed.</p>
                  </div>
                </div>

                <div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(6,182,212,0.08)] hover:border-cyan-200/60 transition-all cursor-default">
                  <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-50 to-white border border-cyan-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                    <IconifyIcon icon="solar:gamepad-linear" className="text-2xl text-cyan-600" style={{ strokeWidth: 1.5 }} />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-interview Simulator</h3>
                    <p className="text-base text-gray-600 font-normal">Øv dig til samtalen med vores AI. Få øjeblikkelig feedback og personlige anbefalinger.</p>
                  </div>
                </div>

                <div className="group flex items-start gap-5 p-5 bg-gradient-to-br from-white/50 to-white/10 backdrop-blur-2xl border border-white/60 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:shadow-[0_12px_40px_rgba(245,158,11,0.08)] hover:border-amber-200/60 transition-all cursor-default">
                  <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-50 to-white border border-amber-100/50 shadow-sm flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                    <IconifyIcon icon="solar:radar-linear" className="text-2xl text-amber-600" style={{ strokeWidth: 1.5 }} />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 tracking-tight mb-1">AI-agenter søger for dig</h3>
                    <p className="text-base text-gray-600 font-normal">Lad vores intelligente agenter overvåge markedet og finde det perfekte match til din profil.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
          <div className="text-center mb-16 relative z-10">
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Succeshistorier</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Se hvordan andre har brugt Arbejd til at lande drømmejobbet og starte næste kapitel i deres career.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
            <div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group">
              <div className="aspect-video bg-gray-100 relative overflow-hidden">
                <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80" alt="Team" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
                <div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
                  <button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
                    <IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
                  </button>
                </div>
              </div>
              <div className="p-6 relative">
                <p className="text-base text-gray-700 italic mb-6 leading-relaxed">"Simulatoren var en gamechanger. Jeg var super nervøs for min samtale, men feedbacken gav mig roen til at performe 100%."</p>
                <div className="flex items-center gap-3">
                  <img src="https://i.pravatar.cc/150?img=32" alt="Sofie" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
                  <div>
                    <h4 className="text-base font-medium text-gray-900">Sofie Jensen</h4>
                    <p className="text-sm text-teal-600 font-normal">Landed job som Marketing Manager</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group">
              <div className="aspect-video bg-gray-100 relative overflow-hidden">
                <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&q=80" alt="Meeting" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
                <div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
                  <button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
                    <IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
                  </button>
                </div>
              </div>
              <div className="p-6">
                <p className="text-base text-gray-700 italic mb-6 leading-relaxed">"AI-ansøgningerne sparede mig timevis af arbejde. Det ramte den professionelle tone perfekt fra første forsøg."</p>
                <div className="flex items-center gap-3">
                  <img src="https://i.pravatar.cc/150?img=12" alt="Mikkel" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
                  <div>
                    <h4 className="text-base font-medium text-gray-900">Mikkel Larsen</h4>
                    <p className="text-sm text-indigo-600 font-normal">Landed job som Frontend Udvikler</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-gradient-to-br from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all group md:col-span-2 lg:col-span-1">
              <div className="aspect-video bg-gray-100 relative overflow-hidden">
                <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80" alt="Success" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" />
                <div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent flex items-center justify-center">
                  <button type="button" className="w-14 h-14 rounded-full bg-white/30 backdrop-blur-md border border-white/60 shadow-xl flex items-center justify-center text-white hover:scale-110 hover:bg-white/50 transition-all outline-none">
                    <IconifyIcon icon="solar:play-linear" className="text-2xl ml-1" style={{ strokeWidth: 1.5 }} />
                  </button>
                </div>
              </div>
              <div className="p-6">
                <p className="text-base text-gray-700 italic mb-6 leading-relaxed">"Agenten fandt et job jeg aldrig selv ville have søgt på. Det viste sig at være det helt rigtige match for mig."</p>
                <div className="flex items-center gap-3">
                  <img src="https://i.pravatar.cc/150?img=47" alt="Amalie" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
                  <div>
                    <h4 className="text-base font-medium text-gray-900">Amalie Nielsen</h4>
                    <p className="text-sm text-cyan-600 font-normal">Landed job som Projektleder</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
          <div className="text-center mb-16 relative z-10">
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Mød holdet bag</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Passionerede mennesker der brænder for at revolutionere måden, vi finder arbejde på.</p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto relative z-10">
            <div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300">
              <div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-teal-400 to-emerald-300 shadow-md">
                <img src="https://i.pravatar.cc/150?img=11" alt="Lasse Nielsen" className="w-full h-full rounded-full border-2 border-white object-cover" />
              </div>
              <h3 className="text-xl font-medium text-gray-900 tracking-tight">Lasse Nielsen</h3>
              <p className="text-base text-teal-600 font-normal mb-6">CEO &amp; Founder</p>
              <div className="flex items-center justify-center gap-3">
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <span className="text-sm font-medium">in</span>
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
              </div>
            </div>

            <div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300">
              <div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-indigo-400 to-purple-300 shadow-md">
                <img src="https://i.pravatar.cc/150?img=5" alt="Emma" className="w-full h-full rounded-full border-2 border-white object-cover" />
              </div>
              <h3 className="text-xl font-medium text-gray-900 tracking-tight">Emma Schmidt</h3>
              <p className="text-base text-indigo-600 font-normal mb-6">Head of AI</p>
              <div className="flex items-center justify-center gap-3">
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <span className="text-sm font-medium">in</span>
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
              </div>
            </div>

            <div className="bg-gradient-to-b from-white/60 to-white/20 backdrop-blur-2xl border border-white/60 rounded-3xl p-6 text-center shadow-[0_8px_30px_rgba(0,0,0,0.03)] hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] transition-all duration-300 sm:col-span-2 lg:col-span-1">
              <div className="w-24 h-24 mx-auto mb-4 rounded-full p-1 bg-gradient-to-tr from-cyan-400 to-blue-300 shadow-md">
                <img src="https://i.pravatar.cc/150?img=60" alt="Christian" className="w-full h-full rounded-full border-2 border-white object-cover" />
              </div>
              <h3 className="text-xl font-medium text-gray-900 tracking-tight">Christian Berg</h3>
              <p className="text-base text-cyan-600 font-normal mb-6">Lead Designer</p>
              <div className="flex items-center justify-center gap-3">
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <span className="text-sm font-medium">in</span>
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:camera-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
                <a href="#" className="w-8 h-8 rounded-full bg-white/50 backdrop-blur-sm border border-white flex items-center justify-center text-gray-500 hover:text-gray-900 hover:bg-white transition-all shadow-sm outline-none">
                  <IconifyIcon icon="solar:letter-linear" className="text-base" style={{ strokeWidth: 1.5 }} />
                </a>
              </div>
            </div>
          </div>
        </section>

        <section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40 relative">
          <div className="text-center mb-16 relative z-10">
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Gennemsigtige priser</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto font-normal drop-shadow-sm">Vælg den plan, der passer bedst til din karriererejse. Start din rejse i dag.</p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative z-10 items-stretch">
            <div className="bg-gradient-to-br from-white/60 to-white/10 backdrop-blur-3xl border border-white/60 rounded-[2rem] p-8 shadow-[0_8px_30px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden">
              <h3 className="text-2xl font-medium text-gray-900 tracking-tight mb-2">30 dage</h3>
              <p className="text-base text-gray-600 mb-6">Perfekt til at komme hurtigt i gang.</p>
              <div className="mb-8">
                <span className="text-5xl font-medium text-gray-900 tracking-tight">49 kr</span>
              </div>

              <ul className="space-y-4 mb-8 flex-1">
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
              </ul>
              <button type="button" className="w-full py-3 rounded-xl bg-white/60 backdrop-blur-md border border-white hover:bg-white/90 text-gray-900 font-medium text-base transition-colors shadow-sm outline-none mt-auto">Vælg 30 dage</button>
            </div>

            <div className="bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-3xl border border-gray-700/50 rounded-[2rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.2)] flex flex-col relative overflow-hidden transform lg:-translate-y-4">
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-teal-400 via-cyan-400 to-indigo-400" />
              <div className="absolute top-[-20%] right-[-20%] w-[60%] h-[60%] bg-gradient-to-bl from-teal-500/30 to-cyan-500/10 blur-[60px] rounded-full pointer-events-none" />

              <div className="flex justify-between items-start mb-2 relative z-10">
                <h3 className="text-2xl font-medium text-white tracking-tight drop-shadow-md">90 dage</h3>
                <span className="px-3 py-1.5 text-xs font-medium text-teal-900 bg-gradient-to-r from-teal-300 to-emerald-300 rounded-lg uppercase tracking-wider shadow-[0_0_15px_rgba(45,212,191,0.3)]">Mest populær</span>
              </div>
              <p className="text-base text-gray-400 mb-6 relative z-10">Ideelt til den dedikerede jobsøgende.</p>
              <div className="mb-8 relative z-10">
                <span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">129 kr</span>
              </div>

              <ul className="space-y-4 mb-8 flex-1 relative z-10">
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-300 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-400 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
              </ul>
              <button type="button" className="w-full py-3 rounded-xl bg-gradient-to-r from-white to-gray-100 text-gray-900 font-medium text-base hover:from-gray-50 hover:to-white transition-all shadow-[0_4px_15px_rgba(255,255,255,0.1)] outline-none relative z-10 mt-auto">Vælg 90 dage</button>
            </div>

            <div className="bg-gradient-to-br from-white/60 to-white/10 backdrop-blur-3xl border border-white/60 rounded-[2rem] p-8 shadow-[0_8px_30px_rgba(0,0,0,0.04)] flex flex-col relative overflow-hidden">
              <h3 className="text-2xl font-medium text-gray-900 tracking-tight mb-2">365 dage</h3>
              <p className="text-base text-gray-600 mb-6">Det bedste langsigtede valg til din karriere.</p>
              <div className="mb-5 relative">
                <span className="text-5xl font-medium text-gray-900 tracking-tight">249 kr</span>
                <span className="block text-sm text-teal-600 font-medium mt-1">Svarer til 0.68 kr. pr. dag</span>
              </div>

              <div className="mb-6 p-4 rounded-xl bg-gradient-to-br from-teal-50/80 to-emerald-50/80 border border-teal-200/50 shadow-sm relative overflow-hidden">
                <div className="absolute -right-3 -top-3 text-teal-500/10">
                  <IconifyIcon icon="solar:gift-bold" className="text-7xl" />
                </div>
                <h4 className="text-sm font-medium text-teal-900 mb-1 relative z-10 flex items-center gap-2">
                  <IconifyIcon icon="solar:gift-linear" className="text-base text-teal-600" style={{ strokeWidth: 1.5 }} />
                  Giv en gave
                </h4>
                <p className="text-xs text-teal-800 relative z-10 leading-snug">Få en gratis 3-måneders Premium-kode med i købet til en ven.</p>
              </div>

              <ul className="space-y-4 mb-8 flex-1">
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Download et professionelt CV - Klar til brug med et enkelt klik</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Karriereagent med personlige anbefalinger</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Øget synlighed – bliv fundet af virksomheder</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Lad systemet lave din ansøgning for dig</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Optimer dit CV med intelligente forslag</span></li>
                <li className="flex items-start gap-3 text-sm text-gray-700 leading-snug"><IconifyIcon icon="solar:check-circle-linear" className="text-lg text-teal-500 flex-shrink-0 mt-0.5" style={{ strokeWidth: 1.5 }} /><span>Job simulatoren – træn til din næste jobsamtale</span></li>
              </ul>
              <button type="button" className="w-full py-3 rounded-xl bg-white/60 backdrop-blur-md border border-white hover:bg-white/90 text-gray-900 font-medium text-base transition-colors shadow-sm outline-none mt-auto">Vælg 365 dage</button>
            </div>
          </div>
        </section>

        <section className="py-24 px-6 lg:px-12 max-w-7xl mx-auto relative z-10">
          <div className="bg-gradient-to-br from-teal-400/20 via-indigo-400/10 to-purple-400/20 backdrop-blur-3xl border border-white/60 rounded-[3rem] p-10 md:p-16 text-center shadow-[0_20px_60px_rgba(0,0,0,0.05)] relative overflow-hidden group">
            <div className="absolute inset-0 bg-gradient-to-t from-white/60 to-white/20 z-0" />
            <div className="absolute top-0 right-0 w-[40%] h-[100%] bg-gradient-to-l from-white/40 to-transparent skew-x-12 translate-x-[150%] group-hover:translate-x-[-250%] transition-transform duration-1000 z-0" />

            <div className="relative z-10 max-w-3xl mx-auto flex flex-col items-center">
              <IconifyIcon icon="solar:rocket-linear" className="text-5xl text-teal-600 mb-6 drop-shadow-sm" style={{ strokeWidth: 1.5 }} />
              <h2 className="text-3xl md:text-5xl font-medium tracking-tight text-gradient-subtle mb-6 leading-tight drop-shadow-sm">
                Klar til at tage styringen
                <br />
                over din karriere?
              </h2>
              <p className="text-xl text-gray-700 mb-10 font-normal leading-relaxed drop-shadow-sm">
                Lad ikke de bedste muligheder gå til andre. Tilslut dig tusindvis af ambitiøse jobsøgere, der allerede bruger fremtidens værktøjer på Arbejd.com. Din næste store chance venter.
              </p>
              <button type="button" className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border border-gray-700 hover:border-gray-600 text-white rounded-full font-normal text-lg transition-all shadow-[0_8px_25px_rgba(17,24,39,0.2)] outline-none hover:-translate-y-0.5">
                Tilmeld dig Arbejd.com i dag
                <IconifyIcon icon="solar:arrow-right-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
              </button>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
