import { type CSSProperties } from 'react';
import './homepage.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';
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',
];

const floatingPeople = Array.from({ length: 36 }, (_, index) => {
  const row = Math.floor(index / 9);
  const col = index % 9;
  const top = Math.min(92, Math.max(6, 10 + row * 22 + ((index * 13) % 9) - 4));
  const left = Math.min(96, Math.max(4, 6 + col * 11 + ((index * 17) % 7) - 3));

  return {
    id: index,
    src: `https://i.pravatar.cc/60?img=${(index % 70) + 1}`,
    top,
    left,
    duration: 5 + (index % 5),
    delay: -(index % 7) * 0.8,
  };
});

const foundJobs = [
  'Elektriker',
  'Kok',
  'Tjener',
  'Pædagog',
  'SOSU-hjælper',
  'Sygeplejerske',
  'Murer',
  'Tømrer',
  'Lagermedarbejder',
  'Butiksassistent',
  'Rengøringsassistent',
  'Chauffør',
  'Kontorassistent',
  'Receptionist',
  'Mekaniker',
  'Maler',
  'VVS-montør',
  'Bager',
];

export function HomePage() {
  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" />

      <SiteNavbar />

      <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 JOBSØGNING
          </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.com
            <br />
            Din hurtigste vej til
            <br />
            dit næste job
          </h1>

          <p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-2xl font-normal leading-relaxed drop-shadow-sm">
            CV, ansøgninger, jobmatch og interviewtræning – samlet ét sted med din personlige AI-assistent.
          </p>

          <a href="https://app.arbejd.com" 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 }} />
          </a>
        </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-store" />
              <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-store [animation-delay:2s]" />

              <div className="relative flex items-center justify-center w-full max-w-5xl mx-auto transform scale-[0.55] 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 shrink-0 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-store 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 isolate"
                    style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
                  >
                    <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 shrink-0 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 isolate"
                    style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
                  >
                    <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">Smart 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">Målrettede 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">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">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-20 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div className="flex flex-col justify-center">
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-6">
                Nu i App Store
                <br />
                og Google Play
              </h2>
              <p className="text-lg text-gray-600 mb-10 font-normal leading-relaxed drop-shadow-sm">
                Du kan nu bruge Arbejd.com direkte fra mobilen. Download appen og få adgang til jobsøgning, CV og samtaletræning, uanset hvor du er.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <a
                  href="https://apps.apple.com/dk/app/arbejd-com/id1466763785"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center justify-center gap-3 px-6 py-3.5 bg-gray-900 text-white rounded-2xl shadow-[0_8px_25px_rgba(17,24,39,0.22)] hover:bg-gray-800 transition-all outline-none border border-gray-800"
                >
                  <IconifyIcon icon="mdi:apple" className="text-2xl" />
                  <span className="text-sm font-medium tracking-wide">Download på App Store</span>
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=arbejd.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center justify-center gap-3 px-6 py-3.5 bg-white/70 backdrop-blur-xl text-gray-900 rounded-2xl border border-white/90 shadow-[0_8px_25px_rgba(15,23,42,0.08)] hover:bg-white transition-all outline-none"
                >
                  <IconifyIcon icon="mdi:google-play" className="text-xl text-teal-600" />
                  <span className="text-sm font-medium tracking-wide">Hent i Google Play</span>
                </a>
              </div>
            </div>

            <div className="relative w-full md:w-[112%] lg:w-[118%] md:-mr-[6%] lg:-mr-[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.55] 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 shrink-0 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-black overflow-hidden shadow-[inset_0_0_10px_rgba(0,0,0,0.1)] border border-gray-800/50 isolate"
                    style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
                  >
                    <div className="absolute inset-0 bg-black overflow-y-auto homepage-no-scrollbar pb-16">
                      <div className="h-16 w-full" />

                      <div className="flex gap-4 px-5 pb-4">
                        <div className="w-24 h-24 rounded-[1.4rem] bg-gradient-to-br from-indigo-500 to-teal-400 p-[1px] shrink-0 shadow-lg">
                          <div className="w-full h-full bg-gray-900/20 backdrop-blur-sm rounded-[1.3rem] flex items-center justify-center">
                            <IconifyIcon icon="solar:case-minimalistic-linear" className="text-4xl text-white drop-shadow-md" style={{ strokeWidth: 1.5 }} />
                          </div>
                        </div>
                        <div className="flex flex-col pt-1 w-full">
                          <h1 className="text-white text-xl tracking-tight font-medium leading-tight">Arbejd.com</h1>
                          <p className="text-gray-400 text-xs mt-0.5">Ansæt &amp; find jobs</p>
                          <div className="mt-auto flex items-center justify-between">
                            <button type="button" className="bg-blue-600 text-white text-sm font-medium rounded-full px-5 py-1.5">HENT</button>
                            <IconifyIcon icon="solar:export-linear" className="text-blue-500 text-xl" style={{ strokeWidth: 1.5 }} />
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center justify-between px-5 py-3 border-y border-gray-800/60 mt-2">
                        <div className="flex flex-col items-center">
                          <span className="text-gray-500 text-xs font-medium tracking-wide uppercase">1.2K anmeld.</span>
                          <span className="text-gray-300 text-lg font-medium">4.8</span>
                          <div className="flex text-gray-500 text-xs gap-0.5 mt-0.5">
                            <IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
                            <IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
                            <IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
                            <IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
                            <IconifyIcon icon="solar:star-linear" className="text-white" style={{ strokeWidth: 1.5 }} />
                          </div>
                        </div>
                        <div className="w-px h-8 bg-gray-800/60" />
                        <div className="flex flex-col items-center">
                          <span className="text-gray-500 text-xs font-medium tracking-wide uppercase">Alder</span>
                          <span className="text-gray-300 text-lg font-medium">4+</span>
                          <span className="text-gray-500 text-xs mt-1">År</span>
                        </div>
                        <div className="w-px h-8 bg-gray-800/60" />
                        <div className="flex flex-col items-center">
                          <span className="text-gray-500 text-xs font-medium tracking-wide uppercase">Hitliste</span>
                          <span className="text-gray-300 text-lg font-medium">#1</span>
                          <span className="text-gray-500 text-xs mt-1">Erhverv</span>
                        </div>
                      </div>

                      <div className="mt-5">
                        <div className="flex gap-3 overflow-x-auto px-5 pb-4 snap-x snap-mandatory homepage-no-scrollbar">
                          <div className="w-48 h-[22rem] rounded-[1.5rem] bg-[#0a0a0a] border border-gray-800 shrink-0 snap-center relative overflow-hidden flex flex-col items-center pt-6 px-4">
                            <div className="w-full text-left text-white/90 text-sm font-medium mb-4">Find jobs</div>
                            <div className="w-full h-24 rounded-xl bg-gray-900 border border-gray-800 mb-3 relative overflow-hidden">
                              <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-teal-500/10" />
                            </div>
                            <div className="w-full h-12 rounded-lg bg-gray-900 border border-gray-800 mb-2" />
                            <div className="w-full h-12 rounded-lg bg-gray-900 border border-gray-800" />
                          </div>
                          <div className="w-48 h-[22rem] rounded-[1.5rem] bg-[#0a0a0a] border border-gray-800 shrink-0 snap-center relative overflow-hidden flex flex-col items-center pt-6 px-4">
                            <div className="w-full text-left text-white/90 text-sm font-medium mb-4">Håndter talent</div>
                            <div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
                              <div className="w-8 h-8 rounded-full bg-gray-800" />
                              <div className="flex-1 h-2 rounded bg-gray-800" />
                            </div>
                            <div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
                              <div className="w-8 h-8 rounded-full bg-gray-800" />
                              <div className="flex-1 h-2 rounded bg-gray-800" />
                            </div>
                            <div className="w-full h-16 rounded-xl bg-gray-900 border border-gray-800 mb-2 flex items-center px-3 gap-3">
                              <div className="w-8 h-8 rounded-full bg-gray-800" />
                              <div className="flex-1 h-2 rounded bg-gray-800" />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="px-5 mt-2 pb-8">
                        <h2 className="text-white text-sm font-medium mb-2">Beskrivelse</h2>
                        <p className="text-gray-400 text-xs leading-relaxed font-normal">
                          Arbejd.com er den ultimative platform til at finde jobs og ansætte de bedste freelancere. Uanset om du vil fremme din karriere eller opbygge dit drømmehold, forbinder vi dig med de rigtige muligheder globalt.
                        </p>
                      </div>
                    </div>
                    <div className="absolute top-0 inset-x-0 h-24 bg-gradient-to-b from-black/80 via-black/40 to-transparent z-10 pointer-events-none" />
                    <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-xs 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-0 inset-x-0 h-16 bg-gradient-to-t from-black/80 to-transparent z-10 pointer-events-none" />
                    <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 shrink-0 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-store z-10">
                  <div className="absolute -right-[2px] top-32 w-1 h-24 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />
                  <div className="absolute -right-[2px] top-64 w-1 h-12 bg-white/30 border border-white/40 rounded-r-md shadow-sm" />

                  <div
                    className="relative w-full h-full rounded-[2.8rem] bg-[#121212] overflow-hidden shadow-[inset_0_0_10px_rgba(0,0,0,0.1)] border border-gray-800/50 isolate"
                    style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}
                  >
                    <div className="absolute inset-0 bg-[#121212] overflow-y-auto homepage-no-scrollbar pb-16">
                      <div className="flex items-center justify-between px-4 pt-14 pb-3 text-white/90">
                        <IconifyIcon icon="solar:arrow-left-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
                        <div className="flex gap-4">
                          <IconifyIcon icon="solar:magnifer-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
                          <IconifyIcon icon="solar:menu-dots-vertical-linear" className="text-xl" style={{ strokeWidth: 1.5 }} />
                        </div>
                      </div>

                      <div className="flex gap-5 px-5 pt-1 pb-5">
                        <div className="w-20 h-20 rounded-[1.2rem] bg-gradient-to-br from-indigo-500 to-teal-400 p-[1px] shrink-0 shadow-md">
                          <div className="w-full h-full bg-gray-900/20 backdrop-blur-sm rounded-[1.1rem] flex items-center justify-center">
                            <IconifyIcon icon="solar:case-minimalistic-linear" className="text-3xl text-white drop-shadow-md" style={{ strokeWidth: 1.5 }} />
                          </div>
                        </div>
                        <div className="flex flex-col justify-center">
                          <h1 className="text-white text-xl tracking-tight font-medium leading-tight">Arbejd.com - Jobs</h1>
                          <span className="text-teal-400 text-sm font-normal mt-0.5">Arbejd Inc.</span>
                          <span className="text-gray-400 text-xs mt-1">Indeholder annoncer · Køb i appen</span>
                        </div>
                      </div>

                      <div className="flex items-center justify-center gap-6 px-5 py-2">
                        <div className="flex flex-col items-center">
                          <div className="flex items-center gap-1 text-white text-sm font-medium">4.8 <IconifyIcon icon="solar:star-linear" className="text-xs" style={{ strokeWidth: 1.5 }} /></div>
                            <span className="text-gray-400 text-xs mt-0.5">1M anmeldelser</span>
                        </div>
                        <div className="w-px h-6 bg-gray-700/60" />
                        <div className="flex flex-col items-center text-white text-sm font-medium">
                          10M+
                          <span className="text-gray-400 text-xs font-normal mt-0.5">Downloads</span>
                        </div>
                        <div className="w-px h-6 bg-gray-700/60" />
                        <div className="flex flex-col items-center text-white text-sm font-medium">
                          <div className="border border-white/60 rounded-[3px] px-1 text-xs leading-tight mt-0.5">E</div>
                            <span className="text-gray-400 text-xs font-normal mt-0.5">Alle</span>
                        </div>
                      </div>

                      <div className="px-5 py-5">
                        <button type="button" className="w-full bg-[#01875F] text-white text-sm font-medium py-2.5 rounded-full transition-colors">Installer</button>
                      </div>

                      <div className="mt-1">
                        <div className="flex gap-3 overflow-x-auto px-5 pb-4 snap-x snap-mandatory homepage-no-scrollbar">
                          <div className="w-[140px] h-[260px] rounded-xl bg-[#1c1c1c] border border-white/5 shrink-0 snap-center relative overflow-hidden flex flex-col pt-5 px-3">
                            <div className="w-full text-left text-white/90 text-sm font-medium mb-4">Udforsk</div>
                            <div className="flex gap-2 mb-3">
                              <div className="w-10 h-10 rounded-lg bg-[#2a2a2a]" />
                              <div className="flex-1 h-10 rounded-lg bg-[#2a2a2a]" />
                            </div>
                            <div className="w-full h-16 rounded-lg bg-[#2a2a2a] mb-2" />
                            <div className="w-full h-16 rounded-lg bg-[#2a2a2a]" />
                          </div>
                          <div className="w-[140px] h-[260px] rounded-xl bg-[#1c1c1c] border border-white/5 shrink-0 snap-center relative overflow-hidden flex flex-col pt-5 px-3">
                            <div className="w-full text-left text-white/90 text-sm font-medium mb-4">Beskeder</div>
                            <div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
                              <div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
                              <div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
                            </div>
                            <div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
                              <div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
                              <div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
                            </div>
                            <div className="w-full h-12 rounded-lg bg-[#2a2a2a] mb-2 flex items-center px-2 gap-2">
                              <div className="w-6 h-6 rounded-full bg-[#3a3a3a]" />
                              <div className="flex-1 h-2 rounded bg-[#3a3a3a]" />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="px-5 mt-2 pb-8">
                        <div className="flex items-center justify-between mb-2">
                          <h2 className="text-white text-sm font-medium">Om denne app</h2>
                          <IconifyIcon icon="solar:arrow-right-linear" className="text-white text-lg" style={{ strokeWidth: 1.5 }} />
                        </div>
                        <p className="text-gray-400 text-xs leading-relaxed font-normal">
                          Kom i kontakt med tusindvis af fagfolk. Find fjernarbejde, freelanceopgaver og kontraktarbejde globalt på Arbejd.com.
                        </p>
                      </div>
                    </div>

                    <div className="absolute top-0 inset-x-0 h-20 bg-gradient-to-b from-[#121212]/90 via-[#121212]/50 to-transparent z-10 pointer-events-none" />

                    <div className="absolute top-3.5 left-1/2 -translate-x-1/2 w-5 h-5 bg-[#0a0a0a] border border-black/80 rounded-full z-50 shadow-[inset_0_0_4px_rgba(0,0,0,0.8)] flex items-center justify-center">
                      <div className="w-2 h-2 rounded-full bg-gray-900 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center">
                        <div className="w-1 h-1 rounded-full bg-teal-500/30 blur-[0.5px]" />
                      </div>
                    </div>

                    <div className="absolute top-0 inset-x-0 h-12 flex items-center justify-between px-6 pt-1 z-40 text-xs font-medium text-white/95">
                      <span>10:00</span>
                      <div className="flex items-center gap-1.5 drop-shadow-md">
                        <IconifyIcon icon="solar:wi-fi-linear" className="text-xs" style={{ strokeWidth: 1.5 }} />
                        <IconifyIcon icon="solar:cellular-network-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-0 inset-x-0 h-16 bg-gradient-to-t from-[#121212]/90 to-transparent z-10 pointer-events-none" />
                    <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-1/4 h-[3px] bg-white/90 rounded-full z-50 shadow-sm" />
                  </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="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="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="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>

        {false ? (
          <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>
        ) : null}

        <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="w-full max-w-2xl mx-auto flex items-center justify-center gap-4 p-4 rounded-2xl bg-gradient-to-r from-teal-50/80 to-indigo-50/80 border border-white shadow-sm backdrop-blur-md mb-10 relative z-10">
            <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center flex-shrink-0 border border-teal-100">
              <IconifyIcon icon="solar:star-fall-minimalistic-linear" className="text-xl text-teal-600" style={{ strokeWidth: 1.5 }} />
            </div>
            <p className="text-base text-gray-700 text-left leading-snug">
              <span className="font-medium text-gray-900">Kom i gang koster ikke noget.</span> Prøv appen gratis, og opgrader når du er klar til at udnytte vores premium funktioner.
            </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 flex items-center gap-3">
                <span className="text-5xl font-medium text-gray-900 tracking-tight">49 kr</span>
                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-teal-50 text-teal-700 border border-teal-200">1,63 kr/dag</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 flex items-center gap-3">
                <span className="text-5xl font-medium text-white tracking-tight drop-shadow-md">129 kr</span>
                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-white/15 text-teal-200 border border-white/20">1,43 kr/dag</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 border-t border-white/40 relative">
          <div className="max-w-5xl mx-auto text-center relative z-10 mb-10">
            <h2 className="text-2xl md:text-4xl font-medium tracking-tight text-gradient-subtle leading-tight">
              48.000 har allerede fundet deres job gennem Arbejd.com – så hvorfor ikke lade jobbet finde dig? ✨
            </h2>
          </div>

          <div className="max-w-5xl mx-auto relative">
            <div className="relative h-[360px] sm:h-[420px] 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-visible">
              <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" />
              {floatingPeople.map((person) => (
                <div
                  key={person.id}
                  className="homepage-avatar-float group absolute w-[30px] h-[30px]"
                  style={{
                    top: `${person.top}%`,
                    left: `${person.left}%`,
                    animationDuration: `${person.duration}s`,
                    animationDelay: `${person.delay}s`,
                  }}
                >
                  <div className="relative -translate-x-1/2 -translate-y-1/2">
                    <div className="w-[30px] h-[30px] rounded-full bg-white/45 backdrop-blur-xl border border-white/80 shadow-[0_8px_18px_rgba(15,23,42,0.12)] overflow-hidden transition-transform duration-300 group-hover:scale-[1.35] group-hover:z-30">
                      <img
                        src={person.src}
                        alt={`Profil ${person.id + 1}`}
                        className="w-full h-full object-cover"
                        loading="lazy"
                        decoding="async"
                        referrerPolicy="no-referrer"
                      />
                    </div>
                    <div className={`pointer-events-none absolute top-full mt-2 whitespace-nowrap rounded-xl border border-white/80 bg-white/75 backdrop-blur-xl px-3 py-1.5 text-[11px] font-medium text-gray-700 shadow-[0_10px_25px_rgba(15,23,42,0.12)] opacity-0 translate-y-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0 ${person.left < 18 ? 'left-0' : person.left > 82 ? 'right-0' : 'left-1/2 -translate-x-1/2'}`}>
                      Fandt job: {foundJobs[person.id % foundJobs.length]}
                    </div>
                  </div>
                </div>
              ))}
            </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>
              <a href="https://app.arbejd.com" 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 }} />
              </a>
            </div>
          </div>
        </section>

      </main>
      <SiteFooter />
    </div>
  );
}
