import { type CSSProperties } from 'react';
import './companies.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 companyLogos = [
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30019b62383f496b96e_DKM.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b300089747750fea09bd_find%20job%20abroad.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302bd1bed78e2c84ebe_Midtfjord.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b302fde5303d3b057be1_JPD.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/60939fdba79df07cd812c88d_gws-logo-300x137.png',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b303b480060b735069de_plast-line.svg',
  'https://cdn.prod.website-files.com/5d4a8e9cc03a64b5d34a42b4/6086b30482be352ae620de93_St%C3%A6rmose.svg',
  'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=320&q=80',
  'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=320&q=80',
  'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=320&q=80',
];

const jobMatches = [
  { title: 'Tømrer', count: '72 kandidater' },
  { title: 'Pædagog', count: '359 kandidater' },
  { title: 'Chauffør', count: '438 kandidater' },
  { title: 'Tjener', count: '836 kandidater' },
  { title: 'Rengøring', count: '1471 kandidater' },
  { title: 'Sygeplejerske', count: '192 kandidater' },
];

const features = [
  { icon: 'solar:wallet-money-linear', title: 'Gratis oprettelse', text: 'Hurtig og ubegrænset gratis oprettelse af jobannoncer' },
  { icon: 'solar:bolt-linear', title: 'Effektivt', text: 'Reducer rekrutteringsudgifter med op til 90%' },
  { icon: 'solar:users-group-two-rounded-linear', title: '1-1 match', text: 'Systematiserer, sorterer og matcher op med dine krav' },
  { icon: 'solar:hand-shake-linear', title: 'Beslut med et klik', text: 'Træf beslutningerne hurtigt og effektivt' },
  { icon: 'solar:lock-keyhole-linear', title: 'Ingen begrænsninger', text: 'Direkte adgang til ansøgerne og kandidaterne' },
  { icon: 'solar:chat-line-linear', title: 'Dialog', text: 'Gå i dialog med kandidaterne med det samme' },
  { icon: 'solar:close-circle-linear', title: 'Afslå med et klik', text: 'Afslag og samtale invitationer sendes med et enkelt klik' },
  { icon: 'solar:hand-money-linear', title: 'Nem betaling', text: 'Betal kun hvis I ønsker adgang til kontaktoplysninger' },
  { icon: 'solar:graph-up-linear', title: 'Automatiseret', text: 'Spar tid - ingen manuel screeningsproces' },
];

export function ForVirksomhederPage() {
  return (
    <div className="companies-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" />

      <SiteNavbar activeTab="how" activeHowItem="companies" />

      <main className="flex-1 relative z-10 pt-16">
        <section className="py-20 px-6 lg:px-12 max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div>
              <h1 className="text-4xl md:text-6xl font-medium tracking-tight text-gradient-subtle mb-6">Udvælg og ansæt den rigtige medarbejder</h1>
              <ul className="space-y-3 mb-8">
                {[
                  'Gratis oprettelse af jobannoncer',
                  'Reducer og undgå fejl- og forgæves rekrutteringer',
                  'Sorterer og matcher udbuddet af ansøgere',
                  'Indkaldelser og afslag sendes med ét klik',
                ].map((item) => (
                  <li key={item} className="flex items-start gap-3 text-base text-gray-700">
                    <IconifyIcon icon="solar:check-circle-linear" className="text-xl text-teal-600 mt-0.5" style={{ strokeWidth: 1.5 }} />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>

              <div className="flex flex-wrap gap-4 mb-5">
                <a href="https://app.arbejd.com/welcome" className="inline-flex items-center justify-center gap-2 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">Opret en gratis profil</a>
                <a href="https://app.arbejd.com/welcome" className="inline-flex items-center justify-center gap-2 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">Opret Virksomhed</a>
              </div>
              <p className="text-sm text-gray-500 mb-4">Oprettelse kan pt. kun ske via bærbar eller desktop. Ved at tilmelde din virksomhed accepterer du samtidigt Arbejd.coms forretningsbetingelser og privatlivspolitik.</p>
              <p className="text-sm text-gray-600 mb-4">Har du allerede en profil? <a href="https://app.arbejd.com/" className="text-teal-700 hover:text-teal-900">Log in her</a></p>

              <div className="p-4 rounded-2xl bg-gradient-to-r from-white/70 to-white/40 border border-white/80 shadow-sm max-w-lg">
                <h3 className="text-base font-medium text-gray-900 mb-1">Hjælp til oprettelse?</h3>
                <p className="text-sm text-gray-600 mb-2">Vi sidder klar til at hjælpe dig på telefonen og guider dig igennem oprettelsen.</p>
                <a href="tel:+4542162228" className="inline-flex items-center gap-2 text-teal-700 font-medium hover:text-teal-900">
                  <IconifyIcon icon="solar:phone-linear" className="text-lg" style={{ strokeWidth: 1.5 }} />
                  Ring På +45 42 16 22 28
                </a>
              </div>
            </div>

            <div className="relative">
              <div className="rounded-[2.5rem] bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/80 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
                <img src={screen1Image} alt="A laptop showing the Arbejd.com dashboard" className="w-full rounded-2xl border border-white/70 shadow-sm" />
              </div>
              <div className="absolute -bottom-8 -right-4 w-[45%] rounded-[2rem] bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/80 p-3 shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
                <img src={screen2Image} alt="An iPhone showing the Arbejd.com app" className="w-full rounded-xl border border-white/80" />
              </div>
            </div>
          </div>
        </section>

        <section className="py-14 px-6 lg:px-12 max-w-7xl mx-auto border-y border-white/40 bg-gradient-to-r from-white/10 via-white/30 to-white/10 backdrop-blur-xl">
          <p className="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8">Vi har hjulpet virksomheder over hele Danmark</p>
          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12 opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
            {companyLogos.map((logo, index) => (
              <img key={`${logo}-${index}`} src={logo} alt={`Company logo ${index + 1}`} className="h-8 md:h-10 w-auto object-contain" loading="lazy" decoding="async" referrerPolicy="no-referrer" />
            ))}
          </div>
        </section>

        <section className="py-20 px-6 lg:px-12 max-w-7xl mx-auto">
          <div className="text-center max-w-3xl mx-auto mb-10">
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Vi har dygtige kandidater fra alle brancher</h2>
            <p className="text-lg text-gray-600">Med over 37.000 kandidater på tværs af hele landet og 22 brancheområder, er der gode muligheder for at finde din næste kollega eller medarbejder.</p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-10">
            {jobMatches.map((job) => (
              <div key={job.title} className="rounded-2xl border border-white/80 bg-white/60 backdrop-blur-xl p-4 shadow-sm text-center">
                <div className="inline-flex items-center gap-1.5 text-amber-500 text-xs mb-2">
                  <IconifyIcon icon="solar:star-linear" className="text-sm" style={{ strokeWidth: 1.5 }} />
                  <span>2/3 match</span>
                </div>
                <h3 className="text-base font-medium text-gray-900">{job.title}</h3>
                <p className="text-xs text-gray-500 mt-1">{job.count}</p>
              </div>
            ))}
          </div>

          <div className="text-center">
            <a href="https://app.arbejd.com/welcome" className="inline-flex items-center justify-center gap-2 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">Opret Dig Nu</a>
          </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-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-5">Der er en smartere måde at hyre på</h2>
              <p className="text-lg text-gray-600 mb-7">Vores intelligente platform hjælper dig med at screene og hyre kandidater hurtigere. Stop med at spilde hundredvis af timer på at screene kandidater der ikke lever op til stillingens krav. Vi præsenterer dig først for dem der matcher jobbet bedst. Enkelt og tidsbesparende.</p>
              <a href="https://app.arbejd.com/welcome" className="inline-flex items-center justify-center gap-2 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">Opret Dig Nu</a>
            </div>
            <div className="relative rounded-[2.5rem] bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl border border-white/80 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.05)]">
              <img src={screen1Image} alt="A snapshot of the Arbejd.com dashboard showing candidates" className="w-full rounded-2xl border border-white/70" />
              <div className="absolute -top-6 -right-4 w-16 h-16 rounded-2xl bg-white/80 border border-white/80 shadow-lg flex items-center justify-center animate-float-slow">
                <IconifyIcon icon="solar:bell-bing-linear" className="text-3xl text-amber-500" style={{ strokeWidth: 1.5 }} />
              </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-12 items-center">
            <div className="order-2 lg:order-1">
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-5">Du er igang på få minutter</h2>
              <p className="text-lg text-gray-600 mb-7">Screen tusindvis af kandidater ud fra uddannelse, kvalifikationer, afstand til jobbet og andre relevante filtre. Skip telefoninterviews og chat direkte med ansøgerne – sikkert og nemt på Arbejd.com.</p>
              <a href="https://app.arbejd.com/welcome" className="inline-flex items-center justify-center gap-2 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">Opret Dig Nu</a>
            </div>
            <div className="order-1 lg:order-2 space-y-4">
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {['Poul\nMaskinmester', 'Lene\nKok', 'Pernille\nAdvokat', 'Troels\nLagermedarbejder', 'Selma\nServicemedarbejder', 'Caroline\nKommunikationsmedarbejder'].map((person) => {
                  const [name, role] = person.split('\n');
                  return (
                    <div key={person} className="rounded-xl bg-white/70 border border-white/80 p-3 backdrop-blur-md shadow-sm">
                      <p className="text-sm font-medium text-gray-900">{name}</p>
                      <p className="text-xs text-gray-500">{role}</p>
                    </div>
                  );
                })}
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div className="rounded-xl bg-white/70 border border-white/80 p-3 backdrop-blur-md shadow-sm text-xs text-gray-700">Send besked, favorit og download CV</div>
                <div className="rounded-xl bg-white/70 border border-white/80 p-3 backdrop-blur-md shadow-sm text-xs text-gray-700">Kørekort & certifikater</div>
                <div className="rounded-xl bg-white/70 border border-white/80 p-3 backdrop-blur-md shadow-sm text-xs text-gray-700">Sprog, kvalifikationer og erfaring</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="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Designet til din virksomhed</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature) => (
              <div key={feature.title} className="p-6 bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-xl border border-white/80 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all group">
                <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 mb-4 group-hover:scale-110 transition-transform">
                  <IconifyIcon icon={feature.icon} className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
                </div>
                <h3 className="text-lg font-medium text-gray-900 mb-2 tracking-tight">{feature.title}</h3>
                <p className="text-base text-gray-600 font-normal leading-relaxed">{feature.text}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="py-20 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40">
          <div className="max-w-4xl mx-auto rounded-[2.5rem] border border-white/80 bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl p-10 shadow-[0_12px_40px_rgba(0,0,0,0.05)] text-center">
            <div className="text-sm font-medium text-teal-700 mb-3">Fra DKK 995/adgang</div>
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Gratis og ubegrænset oprettelse</h2>
            <p className="text-lg text-gray-600 mb-8">Arbejd.com er anderledes. Du får gratis adgang til vores SaaS-løsning samt ubegrænset oprettelse af annoncer. Så kan du finde dine kandidater hurtigt og effektivt. Du betaler først, når du vil i kontakt med ansøgerne.</p>
            <a href="/pricing" className="inline-flex items-center justify-center gap-2 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">Se Priserne</a>
          </div>
        </section>

        <section className="py-20 px-6 lg:px-12 max-w-7xl mx-auto border-t border-white/40">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <div className="text-xs uppercase tracking-widest text-teal-700 font-medium mb-3">For virksomheder</div>
            <h2 className="text-3xl md:text-4xl font-medium tracking-tight text-gradient-subtle mb-4">Det behøver ikke være svært at finde relevante kandidater</h2>
            <p className="text-lg text-gray-600">Du kan oprette så mange jobopslag du ønsker og screene relevante kandidater, helt gratis. Du betaler altså først når du ønsker at tage kontakt til en jobansøger. Se vores prismodeller her.</p>
          </div>

          <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
            {[
              'Når du har oprettet dig som virksomhed, kan du starte dit jobopslag ved at gå til "Annoncer" -> og trykke "Opret annonce". Du guides herefter igennem oprettelsen, og du kan til enhver tid gå til og fra din oprettelse af jobannoncen.',
              'Du opretter en konto her, hvor du nemt kan udfylde information om din virksomhed. Opret herefter gratis dit jobopslag som helt automatisk matches med alle de relevante kandidater til stillingen.',
              'Ja - modsat konkurrenterne betaler du hos Arbejd.com ingenting for oprettelsen af jobannoncer. Du kan oprette så mange du har lyst til uden betaling. Du betaler først når du ønsker at tage kontakt til en jobansøger. Se vores prismodeller her.',
            ].map((answer) => (
              <div key={answer} className="rounded-2xl border border-white/80 bg-white/70 backdrop-blur-xl p-6 shadow-sm md:col-span-1">
                <p className="text-base text-gray-700 leading-relaxed mb-5">{answer}</p>
                <div className="text-xs text-gray-500">Senest opdateret<br />May 5, 2021</div>
              </div>
            ))}
            <div className="rounded-2xl border border-white/80 bg-white/70 backdrop-blur-xl p-6 shadow-sm flex items-center justify-center md:col-span-2">
              <a href="#" className="inline-flex items-center gap-2 text-teal-700 hover:text-teal-900 font-medium">
                <IconifyIcon icon="solar:alt-arrow-down-linear" className="text-lg" style={{ strokeWidth: 1.5 }} />
                Se Flere Svar
              </a>
            </div>
          </div>
        </section>

        <section className="pb-24 px-6 lg:px-12 max-w-7xl mx-auto">
          <div className="max-w-4xl mx-auto rounded-[2.5rem] border border-white/80 bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-2xl p-10 shadow-[0_12px_40px_rgba(0,0,0,0.05)] text-center">
            <div className="w-12 h-12 rounded-2xl bg-white/80 border border-white/80 shadow-sm flex items-center justify-center mx-auto mb-4">
              <IconifyIcon icon="solar:magnifer-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
            </div>
            <h3 className="text-2xl md:text-3xl font-medium text-gray-900 tracking-tight mb-3">Større virksomhed eller vikar- og rekrutterings-bureau?</h3>
            <p className="text-lg text-gray-600 mb-6">Kontakt os på +45 42 16 22 28 for en skræddersyet løsning.</p>
            <a href="tel:+4542162228" className="inline-flex items-center justify-center gap-2 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">Ring Nu</a>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}
