import { useMemo, useState, type CSSProperties } from 'react';
import './jobordbogen.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';

type ViewMode = 'dict' | 'academy';

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

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

export interface DictCard {
  accent: string;
  body: string;
  title: string;
}

export function slugifyJobordbogenTitle(title: string) {
  return title
    .toLowerCase()
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .replace(/æ/g, 'ae')
    .replace(/ø/g, 'oe')
    .replace(/å/g, 'aa')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
}

export const dictCards: DictCard[] = [
  {
    accent: 'teal',
    title: '2-ugers reglen',
    body: 'For at opnå retten til dagpenge skal du melde dig ind i en A-kasse inden for to uger af, at du afslutter din uddannelse. Når du har meldt dig ind i en A-kasse er der en obligatorisk karensmåned, hvilket betyder at du først får udbetalt dagpenge en måned efter at din uddannelse slutter.',
  },
  {
    accent: 'indigo',
    title: 'Afslag',
    body: 'Et afslag fra en arbejdsgiver er et klart svar på, at du ikke får det job, du har søgt. Afslag er en naturlig del af livet som jobsøgende, uanset hvor uønsket det kan være. Måske har du sendt en motiveret ansøgning, du har måske endda været til samtale og følt, at kemien var perfekt.',
  },
  {
    accent: 'amber',
    title: 'Agil',
    body: 'Et af de seneste års store buzzwords i erhvervslivet har været udtrykket “agil”, hvilket i sin essens betyder smidighed. Ordet har forskellige betydninger hvor det bruges, f.eks. har “agil ledelse” og “agil systemudvikling” forskellige karakteristika.',
  },
  {
    accent: 'rose',
    title: 'A-kasse',
    body: 'En arbejdsløshedskasse eller a-kasse, som det oftest kaldes i folkemunde, er en organisation der sikrer dig økonomisk i tilfælde af arbejdsløshed. A-kasser er ofte tilknyttet bestemte faggrupper eller brancher, men der findes også tværfaglige a-kasser. Det er som udgangspunkt frivilligt at være medlem af en a-kasse.',
  },
  {
    accent: 'emerald',
    title: 'Anciennitet',
    body: 'Anciennitet er et udtryk for, hvor længe du har været ansat på en arbejdsplads eller i en bestemt branche. Høj anciennitet kan ofte medføre bedre vilkår, højere løn og længere opsigelsesvarsler, afhængigt af din kontrakt eller overenskomst.',
  },
  {
    accent: 'cyan',
    title: 'ATP',
    body: 'ATP står for Arbejdsmarkedets Tillægspension og er en lovpligtig pensionsordning for næsten alle lønmodtagere i Danmark. Både du og din arbejdsgiver betaler til ordningen, og pengene bliver udbetalt, når du når folkepensionsalderen.',
  },
  {
    accent: 'violet',
    title: 'Bruttoløn',
    body: 'Bruttoløn er den løn, du har tjent før skat, arbejdsmarkedsbidrag og pension er trukket fra. Det er oftest dette beløb, der tales om, når du forhandler løn til en jobsamtale, modsat nettoløn, som er det, du reelt får udbetalt på kontoen.',
  },
  {
    accent: 'fuchsia',
    title: 'Dagpenge',
    body: 'Dagpenge er en økonomisk ydelse, du kan få som forsikret ledig i en a-kasse. Det er et økonomisk sikkerhedsnet for dig, som står uden arbejde, indtil du finder dit næste job. Der er særlige krav, du skal opfylde for at være berettiget til at modtage dagpenge.',
  },
  {
    accent: 'orange',
    title: 'Elevatortale',
    body: 'En elevatortale er en kort, præcis præsentation af dig selv, dine kernekompetencer og hvad du søger. Tanken bag begrebet er, at du skal kunne levere dit budskab og skabe interesse på den tid, det tager at køre en tur i en elevator.',
  },
  {
    accent: 'sky',
    title: 'Fagforening',
    body: 'En organisation der varetager lønmodtagernes interesser på arbejdsmarkedet. En fagforening kan hjælpe dig med rådgivning omkring løn, kontrakter, arbejdsmiljø og ved eventuelle konflikter på din arbejdsplads.',
  },
  {
    accent: 'pink',
    title: 'Feriepenge',
    body: 'Som lønmodtager optjener du automatisk retten til betalt ferie. For hver måned du er ansat, optjener du 2,08 dages ferie. Feriepengene udbetales typisk, når du afholder ferie, eller når du fratræder en stilling.',
  },
  {
    accent: 'lime',
    title: 'Funktionær',
    body: 'En lønmodtager, der typisk udfører kontorarbejde, handelsarbejde eller klinisk arbejde. Som funktionær er du dækket af funktionærloven, som sikrer dig særlige rettigheder i forhold til opsigelsesvarsler, løn under sygdom og fratrædelsesgodtgørelse.',
  },
  {
    accent: 'teal',
    title: 'Akkord',
    body: 'En akkordløn er en aflønning, som afhænger af din præsterede produktionsmængde og ikke den anvendte arbejdstid. Du bliver lønnet efter resultat, ofte kombineret med en grundtimeløn.',
  },
  {
    accent: 'indigo',
    title: 'Aktivering',
    body: 'Aktivering giver dig som jobsøgende muligheder for at udvikle kompetencer og få erhvervserfaring. Forløbet sker gennem jobcenteret med fx virksomhedspraktik, løntilskud eller opkvalificering.',
  },
  {
    accent: 'amber',
    title: 'Ambitiøs',
    body: 'At være ambitiøs handler om at arbejde målrettet mod det, du ønsker at opnå, fx dit drømmejob. Det handler om vedholdenhed, udvikling og høje standarder i din jobsøgning.',
  },
  {
    accent: 'rose',
    title: 'Analytisk',
    body: 'At være analytisk betyder at tænke systematisk, logisk og grundigt i arbejdsopgaver. Kompetencen kan trænes og er værdifuld i mange roller.',
  },
  {
    accent: 'emerald',
    title: 'Ansættelsesdato',
    body: 'Ansættelsesdatoen er den dag, hvor du officielt anses som ansat. Løn, pension og øvrige vilkår træder typisk i kraft fra denne dato.',
  },
  {
    accent: 'cyan',
    title: 'Ansøgningsfrist',
    body: 'Ansøgningsfristen er den sidste dato for indsendelse af ansøgning til et jobopslag. Efter fristen bliver ansøgninger som udgangspunkt ikke taget i betragtning.',
  },
  {
    accent: 'violet',
    title: 'Ansvarsområder',
    body: 'Ansvarsområder er de opgaver, du forventes at levere på i en stilling. En klar afstemning af ansvar skaber tryghed og bedre samarbejde.',
  },
  {
    accent: 'fuchsia',
    title: 'Arbejdsforhold',
    body: 'Arbejdsforhold dækker de samlede vilkår på en arbejdsplads, fx arbejdsmiljø, arbejdstid og aflønning. Gode arbejdsforhold giver trivsel og fair rammer.',
  },
  {
    accent: 'orange',
    title: 'Arbejdsgiver',
    body: 'En arbejdsgiver er den virksomhed eller person, der ansætter dig, udbetaler løn og fordeler opgaver. Det er også arbejdsgiveren, der udbyder stillinger.',
  },
  {
    accent: 'sky',
    title: 'Arbejdsløs',
    body: 'Når du står uden job, er du arbejdsløs eller ledig. Begrebet bruges også samfundsøkonomisk om personer uden beskæftigelse, som står til rådighed for arbejdsmarkedet.',
  },
  {
    accent: 'pink',
    title: 'Arbejdsmiljø',
    body: 'Arbejdsmiljø beskriver de fysiske, sociale og psykiske forhold på en arbejdsplads. Et godt arbejdsmiljø handler om trivsel, tryghed og ordentlige rammer.',
  },
  {
    accent: 'lime',
    title: 'Arbejdsskade',
    body: 'En arbejdsskade er en skade eller sygdom, som opstår pga. dit arbejde eller arbejdsmiljø. Det kan være både fysiske og psykiske skader.',
  },
  {
    accent: 'teal',
    title: 'Arbejdsskade-forsikring',
    body: 'Arbejdsskadeforsikring er lovpligtig for erhvervsdrivende og dækker arbejdsskader og erhvervssygdomme. Forsikringen beskytter ansatte ved arbejdsrelaterede skader.',
  },
  {
    accent: 'indigo',
    title: 'Arbejdstager',
    body: 'En arbejdstager er en person, der sælger sin arbejdskraft og er ansat eller søger ansættelse. Modsætningen er selvstændigt erhvervsdrivende.',
  },
  {
    accent: 'amber',
    title: 'Arbejdsudbud',
    body: 'Arbejdsudbud er det samlede antal timer, befolkningen ønsker at arbejde for en given løn. Det handler ikke om antallet af ledige stillinger.',
  },
  {
    accent: 'rose',
    title: 'Arbejdsvilkår',
    body: 'Arbejdsvilkår omfatter løn, arbejdsmiljø, tid og de generelle betingelser, du arbejder under. Ændringer i vilkår skal varsles korrekt.',
  },
  {
    accent: 'emerald',
    title: 'Bachelor',
    body: 'En bachelor er en mellemlang videregående uddannelse. Universitetsbachelor tager normalt 3 år og professionsbachelor 3,5-4 år afhængigt af uddannelsen.',
  },
  {
    accent: 'cyan',
    title: 'Barselsvikariat',
    body: 'Et barselsvikariat er en midlertidig stilling, hvor du dækker en ansat under barsel. Det kan være en vej ind i senere fastansættelse.',
  },
  {
    accent: 'violet',
    title: 'Bortvisning',
    body: 'Bortvisning er arbejdsgivers mest alvorlige sanktion, hvor ansættelsen ophører med øjeblikkelig virkning ved grov misligholdelse.',
  },
  {
    accent: 'fuchsia',
    title: 'Brancheområde',
    body: 'Et brancheområde er en bred kategori med flere forskellige jobfunktioner. Ét område kan rumme mange roller og kompetenceprofiler.',
  },
  {
    accent: 'orange',
    title: 'Certifikat',
    body: 'Et certifikat dokumenterer konkrete kompetencer opnået gennem kursus, træning eller uddannelse. Det kan være krav i bestemte jobfunktioner.',
  },
  {
    accent: 'sky',
    title: 'Coach',
    body: 'En coach hjælper med professionel eller personlig udvikling gennem sparring, struktur og målretning. Coaching kan støtte både karriere og trivsel.',
  },
  {
    accent: 'pink',
    title: 'CSR',
    body: 'CSR står for Corporate Social Responsibility og handler om virksomhedens sociale, miljømæssige og etiske ansvar i samfundet.',
  },
  {
    accent: 'lime',
    title: 'CV',
    body: 'Et CV er en oversigt over dine erfaringer, kompetencer og uddannelse. Det giver arbejdsgiver et hurtigt billede af, om du matcher stillingen.',
  },
  {
    accent: 'lime',
    title: 'CVR-nummer',
    body: 'Et CVR-nummer er virksomhedens unikke identifikationsnummer i Det Centrale Virksomhedsregister. Det bruges ved bl.a. fakturering og kontakt med myndigheder.',
  },
  {
    accent: 'teal',
    title: 'Deltid',
    body: 'Deltid betyder normalt under 30 timer om ugen. Deltidsansatte har som udgangspunkt ret til vilkår på niveau med sammenlignelige fuldtidsansatte.',
  },
  {
    accent: 'indigo',
    title: 'Detaljeorienteret',
    body: 'At være detaljeorienteret betyder at arbejde grundigt, kvalitetssikre og have fokus på præcision. Det er en efterspurgt kompetence i mange jobtyper.',
  },
  {
    accent: 'amber',
    title: 'Dynamisk',
    body: 'Dynamisk beskriver en fleksibel, omstillingsparat og handlekraftig arbejdsstil eller arbejdsplads. Forandring er typisk en naturlig del af hverdagen.',
  },
  {
    accent: 'rose',
    title: 'Efteruddannelses-rettigheder',
    body: 'Efteruddannelsesrettigheder afhænger af overenskomst og ansættelsesforhold. Mange ansatte har ret til selvvalgt uddannelse med løn i en given periode.',
  },
  {
    accent: 'emerald',
    title: 'Engageret',
    body: 'At være engageret betyder at vise ægte interesse og ansvar i arbejdet. Engagement er vigtigt i ansøgninger, samtaler og daglig opgaveløsning.',
  },
  {
    accent: 'cyan',
    title: 'Faglært',
    body: 'Faglært betyder, at du har en relevant uddannelse inden for et fagområde. Betegnelsen bruges ofte i håndværk, service, handel og industri.',
  },
  {
    accent: 'violet',
    title: 'Faglige kompetencer',
    body: 'Faglige kompetencer er konkrete evner opnået gennem uddannelse, arbejde eller praksis. De viser, hvad du kan levere i en specifik rolle.',
  },
  {
    accent: 'fuchsia',
    title: 'Feriedagpenge',
    body: 'Feriedagpenge kan udbetales via A-kasse, hvis du ikke har ferie med løn eller feriepenge. Der gælder særlige krav og frister for at få dem.',
  },
  {
    accent: 'orange',
    title: 'Ferieloven',
    body: 'Ferieloven fastsætter regler for optjening og afholdelse af ferie samt feriebetaling. Som lønmodtager har du som minimum ret til 25 feriedage om året.',
  },
  {
    accent: 'orange',
    title: 'Fleksjob',
    body: 'Fleksjob er en ansættelsesordning for personer med varigt nedsat arbejdsevne. Jobbet tilpasses den enkeltes skånebehov og kapacitet.',
  },
  {
    accent: 'sky',
    title: 'Forlængelse og optjening af dagpengeperiode',
    body: 'Dagpengeperioden kan i visse tilfælde forlænges eller genoptjenes gennem arbejde. Reglerne afhænger af løntimer, periode og tidligere dagpengeret.',
  },
  {
    accent: 'pink',
    title: 'Forstå din lønseddel',
    body: 'Lønsedlen viser bl.a. løn, pension, AM-bidrag, skat og eventuelle tillæg eller fradrag. At forstå felterne giver bedre overblik over din økonomi.',
  },
  {
    accent: 'lime',
    title: 'Freelance',
    body: 'Freelancearbejde er selvstændigt opgavebaseret arbejde uden traditionel ansættelse. Du styrer typisk selv vilkår, pris og samarbejdsaftaler.',
  },
  {
    accent: 'teal',
    title: 'Frivilligt arbejde',
    body: 'Frivilligt arbejde er ulønnet indsats af fri vilje til gavn for andre. Det kan give social værdi, netværk og erfaring.',
  },
  {
    accent: 'indigo',
    title: 'G-dage',
    body: 'G-dage er arbejdsgivers kompensation i de første ledighedsdage efter opsigelse eller hjemsendelse. Der gælder særlige betingelser og frister.',
  },
  {
    accent: 'amber',
    title: 'Gode samarbejdsevner',
    body: 'Gode samarbejdsevner handler om kommunikation, lytning, feedback og evnen til at arbejde konstruktivt med andre.',
  },
  {
    accent: 'rose',
    title: 'Grundløn',
    body: 'Grundløn er den faste løn før tillæg, overtid og bonus. Den fastsættes via overenskomst eller individuel lønforhandling.',
  },
  {
    accent: 'emerald',
    title: 'Headhunter',
    body: 'En headhunter rekrutterer kandidater til stillinger, ofte uden at kandidaterne aktivt har søgt jobbet. Processen foregår typisk diskret.',
  },
  {
    accent: 'cyan',
    title: 'Jobafklaringsforløb',
    body: 'Et jobafklaringsforløb gives til sygemeldte, som ikke længere kan få sygedagpenge. Målet er at støtte tilbagevenden til job eller uddannelse.',
  },
  {
    accent: 'violet',
    title: 'Jobagent',
    body: 'En jobagent sender automatisk besked om nye jobopslag, der matcher dine kriterier. Det gør jobsøgning hurtigere og mere målrettet.',
  },
  {
    accent: 'fuchsia',
    title: 'Jobannonce',
    body: 'En jobannonce beskriver stilling, krav og kontaktinfo. Den er ofte første møde mellem arbejdsgiver og jobsøger.',
  },
  {
    accent: 'orange',
    title: 'Jobbank',
    body: 'En jobbank er en digital platform med ledige stillinger og søgefiltre. Den hjælper jobsøgere med at finde relevante job hurtigere.',
  },
  {
    accent: 'sky',
    title: 'Jobcenter',
    body: 'Jobcenteret er din kommunale base som ledig og hjælper med plan, aktivering, opfølgning og vejledning i jobsøgning.',
  },
  {
    accent: 'pink',
    title: 'Jobsøgningsstrategi',
    body: 'En jobsøgningsstrategi er din plan for hvordan du arbejder struktureret og målrettet med at finde det rigtige job.',
  },
  {
    accent: 'lime',
    title: 'Kandidatgrad',
    body: 'En kandidatgrad er en videregående universitetsuddannelse på typisk 2 år efter en relevant bachelor.',
  },
  {
    accent: 'teal',
    title: 'Karens',
    body: 'Karens betyder perioder uden dagpengeudbetaling, selv når du ellers er berettiget. Reglerne afhænger af din konkrete dagpengesituation.',
  },
  {
    accent: 'indigo',
    title: 'Dagpengeregler',
    body: 'Dagpengereglerne beskriver krav til medlemskab, jobsøgning, rådighed, registrering på Jobnet og beskæftigelse for at kunne modtage dagpenge.',
  },
  {
    accent: 'indigo',
    title: 'Kreativ',
    body: 'At være kreativ handler om at skabe nye idéer og løsninger. Det er en central kompetence i innovation, udvikling og forandring.',
  },
  {
    accent: 'amber',
    title: 'Kurser for ledige',
    body: 'Ledige kan i visse tilfælde få bevilget jobrettede kurser, fx 6-ugers forløb, der styrker mulighederne for ansættelse.',
  },
  {
    accent: 'rose',
    title: 'Ledig som selvstændig',
    body: 'Selvstændige kan under bestemte regler få dagpenge, hvis virksomheden ophører eller drives som bibeskæftigelse med rådighed for arbejdsmarkedet.',
  },
  {
    accent: 'emerald',
    title: 'Lønmodtagerens Garantifond',
    body: 'Garantifonden kan dække løn, feriepenge og pension, hvis en arbejdsgiver går konkurs eller bliver insolvent.',
  },
  {
    accent: 'cyan',
    title: 'Lønsikring',
    body: 'Lønsikring er en ekstra forsikring, der kan supplere dagpenge ved ledighed og dække en større del af din tidligere løn.',
  },
  {
    accent: 'violet',
    title: 'Løntilskud',
    body: 'Løntilskud er en ordning, hvor det offentlige giver tilskud til løn i en periode for at hjælpe ledige tættere på ordinær ansættelse.',
  },
  {
    accent: 'fuchsia',
    title: 'Målrettet',
    body: 'Målrettethed er evnen til at arbejde fokuseret mod et konkret mål over tid. Det er en stærk egenskab i både jobsøgning og arbejde.',
  },
  {
    accent: 'orange',
    title: 'Metodefaglige kompetencer',
    body: 'Metodefaglige kompetencer kan bruges på tværs af brancher, fx struktur, salg, kommunikation eller projektstyring.',
  },
  {
    accent: 'sky',
    title: 'Motiveret ansøgning',
    body: 'En motiveret ansøgning forklarer hvorfor netop du passer til stillingen, og hvorfor jobbet giver mening for dig.',
  },
  {
    accent: 'pink',
    title: 'Networking',
    body: 'Networking er at opbygge og vedligeholde professionelle relationer, som kan skabe viden, muligheder og samarbejde over tid.',
  },
  {
    accent: 'lime',
    title: 'Nyledig',
    body: 'Som nyledig skal du hurtigt registrere dig på Jobnet, kontakte A-kasse/jobcenter og oprette CV for at sikre rettigheder og støtte.',
  },
  {
    accent: 'teal',
    title: 'Offshore arbejde',
    body: 'Offshore arbejde foregår væk fra land, fx på platforme eller havvind. Det kræver ofte særlige certifikater og helbredsgodkendelse.',
  },
  {
    accent: 'indigo',
    title: 'Opsigelse',
    body: 'Opsigelse er afslutning af ansættelse fra medarbejder eller arbejdsgiver. Regler, formkrav og varsler afhænger af kontrakt og lovgrundlag.',
  },
  {
    accent: 'amber',
    title: 'Opsigelsesvarsel',
    body: 'Opsigelsesvarsel er perioden fra opsigelse til fratrædelse. Længden afhænger af ansættelsesforhold, anciennitet og aftale.',
  },
  {
    accent: 'rose',
    title: 'Personlige kompetencer',
    body: 'Personlige kompetencer beskriver hvordan du arbejder og samarbejder, fx om du er struktureret, selvstændig, kreativ eller analytisk.',
  },
  {
    accent: 'emerald',
    title: 'Personlighedstest',
    body: 'Personlighedstests bruges ofte i rekruttering til at vurdere adfærd, præferencer og match til rolle og arbejdsmiljø.',
  },
  {
    accent: 'cyan',
    title: 'Rekruttering',
    body: 'Rekruttering er processen med at finde, vurdere og ansætte kandidater til en stilling. Den kan være intern, ekstern eller via bureau.',
  },
  {
    accent: 'violet',
    title: 'Skattekort',
    body: 'Skattekort (hovedkort, bikort, frikort) styrer hvordan din indkomst beskattes. Korrekt brug er vigtig for at undgå restskat.',
  },
  {
    accent: 'fuchsia',
    title: 'Søgnehelligdage',
    body: 'Søgnehelligdage er helligdage på hverdage. Regler for løn og arbejde afhænger af ansættelsesform og overenskomst.',
  },
  {
    accent: 'orange',
    title: 'Strategisk',
    body: 'At være strategisk betyder at kunne planlægge, prioritere og handle med blik for langsigtede mål og konsekvenser.',
  },
  {
    accent: 'sky',
    title: 'Struktureret',
    body: 'Struktureret arbejde betyder orden, systematik og klare processer. Det skaber forudsigelighed og højere kvalitet i opgaveløsning.',
  },
  {
    accent: 'pink',
    title: 'SU-klip',
    body: 'SU-klip er antallet af månedlige SU-udbetalinger, du kan modtage under videregående uddannelse. Ét klip svarer til én måneds SU.',
  },
  {
    accent: 'lime',
    title: 'Supplerende dagpenge',
    body: 'Ved deltidsarbejde kan du i visse tilfælde få supplerende dagpenge for resterende timer op til dit forsikringsniveau.',
  },
  {
    accent: 'teal',
    title: 'SU vs. studiejob',
    body: 'Når du har studiejob, skal du holde øje med fribeløbet for at undgå tilbagebetaling af SU. Beløbsgrænser afhænger af din situation.',
  },
  {
    accent: 'indigo',
    title: 'Tidsbegrænset stilling',
    body: 'En tidsbegrænset stilling har en kendt slutdato eller opgaveafgrænsning. Ansættelsen skal have en saglig begrundelse.',
  },
  {
    accent: 'amber',
    title: 'Timelønnet',
    body: 'Timelønnede aflønnes efter faktisk arbejdstid. Regler om ferie, pension og varsler afhænger af overenskomst og ansættelsesforhold.',
  },
  {
    accent: 'rose',
    title: 'Ufaglært',
    body: 'Ufaglært betyder at du ikke har en formel erhvervsuddannelse inden for faget. Betegnelsen bruges stadig i flere brancher.',
  },
  {
    accent: 'emerald',
    title: 'Ungarbejder',
    body: 'Ungarbejdere er under 18 år og omfattet af særlige regler for arbejdstid, opgavetyper og sikkerhed på arbejdspladsen.',
  },
  {
    accent: 'cyan',
    title: 'Uopfordret ansøgning',
    body: 'En uopfordret ansøgning sendes uden aktivt jobopslag. Den kan skabe muligheder ved at vise motivation og initiativ.',
  },
  {
    accent: 'violet',
    title: 'Videoansøgning',
    body: 'En videoansøgning er en kort præsentationsvideo som supplement til CV/ansøgning. Den giver arbejdsgiver et hurtigt personligt indtryk.',
  },
  {
    accent: 'fuchsia',
    title: 'Vikar',
    body: 'En vikar er midlertidigt ansat, enten direkte eller via bureau. Vikarer har som udgangspunkt ret til vilkår på niveau med fastansatte i tilsvarende roller.',
  },
  {
    accent: 'orange',
    title: 'Vikarbureau',
    body: 'Et vikarbureau matcher virksomheder og midlertidige medarbejdere. Bureauet håndterer ofte kontraktforhold og dele af administrationen.',
  },
  {
    accent: 'sky',
    title: 'Vikar regler i fh.t. dagpenge',
    body: 'Vikararbejde kan kombineres med dagpenge efter særlige regler. Fuldtid og deltid påvirker dagpenge forskelligt.',
  },
  {
    accent: 'pink',
    title: 'Virksomhedspraktik',
    body: 'Virksomhedspraktik er et afklarings- og opkvalificeringsforløb gennem jobcenteret, som kan styrke vejen til ordinært job.',
  },
];

interface AcademyCard {
  badge: string;
  color: string;
  duration: string;
  image: string;
  title: string;
  views: string;
  body: string;
}

const academyCards: AcademyCard[] = [
  {
    badge: 'Jobsamtalen',
    color: 'teal',
    duration: '05:42',
    image: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1000&q=80',
    title: 'Den perfekte elevatortale',
    views: '1.2k visninger',
    body: 'Lær hvordan du præsenterer dig selv professionelt og fængende på under et minut. Skab det absolut bedste førstehåndsindtryk til samtalen.',
  },
  {
    badge: 'CV & Ansøgning',
    color: 'indigo',
    duration: '08:15',
    image: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?auto=format&fit=crop&w=1000&q=80',
    title: 'Opbygning af det moderne CV',
    views: '3.4k visninger',
    body: 'Få styr på de elementer arbejdsgiverne reelt kigger efter. Gør dit CV overskueligt og målrettet fremtidens digitale arbejdsmarked.',
  },
  {
    badge: 'Lønforhandling',
    color: 'amber',
    duration: '12:30',
    image: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1000&q=80',
    title: 'Få den løn du fortjener',
    views: '2.8k visninger',
    body: 'Hvordan forbereder du dig bedst til lønforhandlingen? Lær strategier til at kende din markedsværdi og få de bedste argumenter klar.',
  },
  {
    badge: 'Netværk',
    color: 'rose',
    duration: '09:18',
    image: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1000&q=80',
    title: 'Brug LinkedIn effektivt',
    views: '4.1k visninger',
    body: 'Lær at opbygge en stærk profil, skabe indhold der bliver set, og række ud til relevante profiler i din branche på den rigtige måde.',
  },
];

const accentMap = {
  teal: {
    card: 'bg-teal-50/50 border-teal-100/50 text-teal-600',
    hover: 'group-hover:text-teal-600',
    hoverStrong: 'group-hover:text-teal-700',
  },
  indigo: {
    card: 'bg-indigo-50/50 border-indigo-100/50 text-indigo-600',
    hover: 'group-hover:text-indigo-600',
    hoverStrong: 'group-hover:text-indigo-700',
  },
  amber: {
    card: 'bg-amber-50/50 border-amber-100/50 text-amber-600',
    hover: 'group-hover:text-amber-600',
    hoverStrong: 'group-hover:text-amber-700',
  },
  rose: {
    card: 'bg-rose-50/50 border-rose-100/50 text-rose-600',
    hover: 'group-hover:text-rose-600',
    hoverStrong: 'group-hover:text-rose-700',
  },
  emerald: {
    card: 'bg-emerald-50/50 border-emerald-100/50 text-emerald-600',
    hover: 'group-hover:text-emerald-600',
    hoverStrong: 'group-hover:text-emerald-700',
  },
  cyan: {
    card: 'bg-cyan-50/50 border-cyan-100/50 text-cyan-600',
    hover: 'group-hover:text-cyan-600',
    hoverStrong: 'group-hover:text-cyan-700',
  },
  violet: {
    card: 'bg-violet-50/50 border-violet-100/50 text-violet-600',
    hover: 'group-hover:text-violet-600',
    hoverStrong: 'group-hover:text-violet-700',
  },
  fuchsia: {
    card: 'bg-fuchsia-50/50 border-fuchsia-100/50 text-fuchsia-600',
    hover: 'group-hover:text-fuchsia-600',
    hoverStrong: 'group-hover:text-fuchsia-700',
  },
  orange: {
    card: 'bg-orange-50/50 border-orange-100/50 text-orange-600',
    hover: 'group-hover:text-orange-600',
    hoverStrong: 'group-hover:text-orange-700',
  },
  sky: {
    card: 'bg-sky-50/50 border-sky-100/50 text-sky-600',
    hover: 'group-hover:text-sky-600',
    hoverStrong: 'group-hover:text-sky-700',
  },
  pink: {
    card: 'bg-pink-50/50 border-pink-100/50 text-pink-600',
    hover: 'group-hover:text-pink-600',
    hoverStrong: 'group-hover:text-pink-700',
  },
  lime: {
    card: 'bg-lime-50/50 border-lime-100/50 text-lime-600',
    hover: 'group-hover:text-lime-600',
    hoverStrong: 'group-hover:text-lime-700',
  },
} as const;

export function JobordbogenPage() {
  const path = useMemo(() => window.location.pathname, []);
  const [mode, setMode] = useState<ViewMode>(path === '/academy' ? 'academy' : 'dict');
  const [searchQuery, setSearchQuery] = useState('');

  const isDict = mode === 'dict';
  const normalizedSearch = searchQuery.trim().toLowerCase();
  const filteredDictCards = useMemo(() => {
    if (!normalizedSearch) {
      return dictCards;
    }

    return dictCards.filter((card) => card.title.toLowerCase().includes(normalizedSearch));
  }, [normalizedSearch]);

  return (
    <div className="job-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 activeTab="tips" activeTipsItem="jobordbogen" />

      <main className="flex-1 relative z-10 pt-16">
        <section className="relative pt-24 pb-12 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
          <div className="hidden md:flex absolute top-20 left-[10%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[-3deg] animate-float-slow z-20 items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-teal-400" />
            Jobsøgning
          </div>

          <div className="hidden md:flex absolute top-40 right-[10%] lg:right-[15%] px-5 py-2.5 rounded-full bg-white/60 backdrop-blur-xl border border-white/80 shadow-[0_8px_20px_rgba(0,0,0,0.04)] text-sm text-gray-800 font-medium rotate-[4deg] animate-float-medium z-20 items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-indigo-400" />
            A-kasse
          </div>

          <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/80 to-white/40 backdrop-blur-xl border border-white/80 text-gray-800 text-xs font-medium uppercase tracking-wider mb-8 shadow-sm relative z-30 transition-all">
            <IconifyIcon icon={isDict ? 'solar:notebook-bookmark-linear' : 'solar:videocamera-record-linear'} className={`text-base ${isDict ? 'text-teal-600' : 'text-indigo-600'}`} style={{ strokeWidth: 1.5 }} />
            {isDict ? 'Opslagsværk' : 'Videokurser'}
          </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 relative z-30 transition-all">
            {isDict ? 'Jobordbogen' : 'Arbejd Academy'}
          </h1>

          <p className="text-xl md:text-2xl text-gray-600 max-w-3xl font-normal leading-relaxed drop-shadow-sm relative z-30 transition-all min-h-[5rem]">
            {isDict
              ? 'Du er ikke alene – det er en jungle at finde rundt i jobsøgning. Vi har sammensat en handy ordbog med de mest almindelige begreber du vil støde på.'
              : 'Lær alt du behøver for at lande drømmejobhandlinger.'}
          </p>

          <div className="relative flex items-center p-1.5 mt-12 bg-white/50 backdrop-blur-2xl border border-gray-200/60 rounded-full w-max mx-auto shadow-inner z-30">
            <button
              type="button"
              className={`relative w-36 sm:w-44 py-2.5 text-sm font-medium rounded-full transition-colors duration-300 z-10 outline-none ${isDict ? 'text-gray-900' : 'text-gray-500 hover:text-gray-800'}`}
              onClick={() => setMode('dict')}
            >
              Jobordbogen
            </button>
            <button
              type="button"
              className={`relative w-36 sm:w-44 py-2.5 text-sm font-medium rounded-full transition-colors duration-300 z-10 outline-none ${!isDict ? 'text-gray-900' : 'text-gray-500 hover:text-gray-800'}`}
              onClick={() => setMode('academy')}
            >
              Academy
            </button>
            <div className={`absolute top-1.5 left-1.5 bottom-1.5 w-36 sm:w-44 bg-white rounded-full shadow-[0_2px_15px_rgba(0,0,0,0.06)] border border-gray-100 transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)] z-0 ${isDict ? 'translate-x-0' : 'translate-x-full'}`} />
          </div>

          {isDict && (
            <div className="w-full max-w-2xl mt-8 relative z-30">
              <div className="flex items-center gap-3 px-5 py-3 rounded-full bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 shadow-[0_8px_24px_rgba(0,0,0,0.04)]">
                <IconifyIcon icon="solar:magnifer-linear" className="text-xl text-teal-600 flex-shrink-0" style={{ strokeWidth: 1.5 }} />
                <input
                  type="search"
                  value={searchQuery}
                  onChange={(event) => setSearchQuery(event.target.value)}
                  placeholder="Søg i begreber (fx A-kasse)"
                  className="w-full bg-transparent text-base text-gray-800 placeholder:text-gray-500 outline-none"
                  aria-label="Søg i Jobordbogen"
                />
                {searchQuery && (
                  <button
                    type="button"
                    onClick={() => setSearchQuery('')}
                    className="text-gray-400 hover:text-gray-700 transition-colors outline-none"
                    aria-label="Ryd søgning"
                  >
                    <IconifyIcon icon="solar:close-circle-linear" className="text-xl" style={{ strokeWidth: 1.8 }} />
                  </button>
                )}
              </div>
            </div>
          )}
        </section>

        <div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-20 pb-24">
          <div className={`${isDict ? 'opacity-100' : 'opacity-0 hidden'} transition-opacity duration-500 ease-in-out`}>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredDictCards.map((card) => {
                const accent = accentMap[card.accent as keyof typeof accentMap];
                return (
                  <a key={card.title} href={`/jobordbogen/${slugifyJobordbogenTitle(card.title)}`} className="group flex flex-col p-8 bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-3xl shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300 outline-none">
                    <div className={`w-12 h-12 rounded-2xl border flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 ${accent.card}`}>
                      <IconifyIcon icon="solar:document-text-linear" className="text-2xl" style={{ strokeWidth: 1.5 }} />
                    </div>
                    <h3 className={`text-xl font-medium text-gray-900 tracking-tight mb-3 transition-colors ${accent.hover}`}>{card.title}</h3>
                    <p className="text-base text-gray-600 leading-relaxed font-normal mb-8 line-clamp-4 flex-1">{card.body}</p>
                    <div className={`mt-auto flex items-center gap-2 text-sm font-medium transition-colors ${accent.card.split(' ').at(-1)} ${accent.hoverStrong}`}>
                      Se definitionen
                      <IconifyIcon icon="solar:arrow-right-linear" className="text-lg group-hover:translate-x-1 transition-transform" style={{ strokeWidth: 1.5 }} />
                    </div>
                  </a>
                );
              })}
            </div>
            {filteredDictCards.length === 0 && (
              <div className="mt-8 p-8 rounded-3xl bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-xl border border-white/80 text-center text-gray-600">
                Ingen begreber matcher din søgning.
              </div>
            )}
          </div>

          <div className={`${!isDict ? 'opacity-100' : 'opacity-0 hidden'} transition-opacity duration-500 ease-in-out`}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {academyCards.map((card) => (
                <div key={card.title} className="group relative flex flex-col bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-[2.5rem] p-5 shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] transition-all duration-500">
                  <div className="relative w-full aspect-video rounded-3xl overflow-hidden bg-gray-900 mb-6 shadow-inner cursor-pointer">
                    <img src={card.image} alt={card.title} className="object-cover w-full h-full opacity-70 group-hover:opacity-90 group-hover:scale-105 transition-all duration-700 ease-out" />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className={`w-20 h-20 rounded-full bg-white/20 backdrop-blur-md border border-white/50 flex items-center justify-center text-white shadow-[0_8px_32px_rgba(0,0,0,0.2)] group-hover:scale-110 transition-all duration-300 ${card.color === 'teal' ? 'group-hover:bg-teal-500 group-hover:border-teal-400' : card.color === 'indigo' ? 'group-hover:bg-indigo-500 group-hover:border-indigo-400' : card.color === 'amber' ? 'group-hover:bg-amber-500 group-hover:border-amber-400' : 'group-hover:bg-rose-500 group-hover:border-rose-400'}`}>
                        <IconifyIcon icon="solar:play-bold" className="text-3xl ml-1 drop-shadow-md" />
                      </div>
                    </div>
                    <div className="absolute bottom-4 right-4 px-3 py-1 bg-gray-900/60 backdrop-blur-md rounded-lg text-white text-xs font-medium tracking-wide border border-white/20">
                      {card.duration}
                    </div>
                  </div>
                  <div className="px-3 pb-3 flex-1 flex flex-col">
                    <div className="flex items-center gap-3 mb-4">
                      <span className={`px-3 py-1 text-xs font-semibold rounded-full border ${card.color === 'teal' ? 'text-teal-700 bg-teal-100/80 border-teal-200/50' : card.color === 'indigo' ? 'text-indigo-700 bg-indigo-100/80 border-indigo-200/50' : card.color === 'amber' ? 'text-amber-700 bg-amber-100/80 border-amber-200/50' : 'text-rose-700 bg-rose-100/80 border-rose-200/50'}`}>{card.badge}</span>
                      <span className="flex items-center gap-1 text-sm text-gray-500 font-medium">
                        <IconifyIcon icon="solar:eye-linear" /> {card.views}
                      </span>
                    </div>
                    <h3 className={`text-2xl font-medium text-gray-900 mb-3 transition-colors cursor-pointer tracking-tight ${card.color === 'teal' ? 'group-hover:text-teal-600' : card.color === 'indigo' ? 'group-hover:text-indigo-600' : card.color === 'amber' ? 'group-hover:text-amber-600' : 'group-hover:text-rose-600'}`}>{card.title}</h3>
                    <p className="text-gray-600 font-normal leading-relaxed text-base flex-1">{card.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}
