import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  X, 
  ArrowRight, 
  Brain, 
  Shield, 
  Users, 
  Compass, 
  Lightbulb, 
  CheckCircle2,
  ChevronDown,
  Anchor,
  Target,
  FileText,
  Mail,
  Linkedin,
  Send,
  ArrowLeft
} from 'lucide-react';

// --- Sub-Components ---

// 1. Gradient Button Helper (Solid Fill & Glow)
const GradientBtn = ({ children, onClick, href, className = "", padding = "px-8 py-3", type = "button" }) => {
  const Component = href ? 'a' : 'button';
  return (
    <Component 
      href={href}
      type={type}
      onClick={onClick}
      className={`group relative inline-flex ${padding} overflow-hidden rounded-full ${className} focus:outline-none focus:ring-2 focus:ring-[#3EDBF0] transition-transform duration-300 hover:scale-105 shadow-[0_0_15px_rgba(123,63,228,0.3)] hover:shadow-[0_0_25px_rgba(123,63,228,0.6)] cursor-pointer`}
    >
      <span className="absolute inset-0 bg-gradient-to-r from-[#7B3FE4] via-[#E056B6] to-[#FFB347] opacity-90 group-hover:opacity-100 transition-opacity duration-300"></span>
      <span className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"></span>
      <span className="relative flex items-center justify-center gap-2 text-white font-medium tracking-wider uppercase text-sm w-full">
        {children}
      </span>
    </Component>
  );
};

// 2. About View Component (Dedicated Page)
const AboutView = ({ navigateToContact, navigateHome, gradientText }) => (
  <div className="pt-32 pb-24 min-h-screen animate-in fade-in zoom-in-95 duration-500">
    <div className="container mx-auto px-6 max-w-5xl">
      <button onClick={navigateHome} className="mb-8 flex items-center gap-2 text-[#C8C2B8] hover:text-white transition-colors group">
        <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" /> Terug naar Home
      </button>
      
      <div className="text-center mb-16">
         <h1 className="font-serif text-4xl md:text-6xl mb-6">Het verhaal achter <span style={gradientText}>humAnIc</span></h1>
         <div className="w-16 h-1 bg-[#E056B6] mx-auto rounded-full opacity-50"></div>
      </div>

      <div className="prose prose-invert prose-lg max-w-none">
          {/* Cinematic Layout */}
          <div className="flex flex-col md:flex-row gap-16 items-center mb-16">
             
             {/* CREATIVE PHOTO CONTAINER + NAME */}
             <div className="flex flex-col items-center gap-6 flex-shrink-0">
                 <div className="relative w-72 h-72 md:w-80 md:h-80 group">
                      {/* 1. Orbit Ring Animation */}
                      <div className="absolute inset-[-20px] rounded-full border border-white/10 border-dashed animate-[spin_12s_linear_infinite] opacity-60"></div>
                      
                      {/* 2. Glowing Backdrop */}
                      <div className="absolute inset-0 rounded-full bg-gradient-to-r from-[#7B3FE4] via-[#E056B6] to-[#FFB347] opacity-20 blur-2xl group-hover:opacity-40 transition-opacity duration-500"></div>
                      
                      {/* 3. Main Image Container */}
                      <div className="relative w-full h-full rounded-full overflow-hidden border-4 border-white/5 bg-[#2B0A3D] shadow-2xl">
                         <img 
                            src="Gemini_Generated_Image_e51pdse51pdse51p.png" 
                            alt="Jouw foto" 
                            className="w-full h-full object-cover filter grayscale contrast-125 scale-110 group-hover:scale-100 transition-transform duration-700"
                            onError={(e) => {
                               e.target.onerror = null; 
                               e.target.src = "https://via.placeholder.com/400x400/210635/F7F6F3?text=Jouw+Foto"; 
                            }}
                         />
                         {/* 4. Overlay Effects */}
                         <div className="absolute inset-0 bg-gradient-to-tr from-[#7B3FE4] via-[#E056B6] to-[#FFB347] opacity-40 mix-blend-overlay"></div>
                         <div className="absolute inset-0 bg-[#210635] opacity-10 mix-blend-multiply"></div>
                         
                         {/* 5. Inner Shadow */}
                         <div className="absolute inset-0 rounded-full shadow-[inset_0_0_40px_rgba(0,0,0,0.5)]"></div>
                      </div>
                 </div>
                 {/* Name under photo */}
                 <p style={gradientText} className="font-serif text-2xl md:text-3xl font-bold tracking-wide">
                    Ingrid Jonkers
                 </p>
             </div>

             <div className="flex-1">
                <p className="text-xl md:text-3xl text-[#F7F6F3] font-light leading-relaxed mb-8 font-serif">
                   "Ik verbind de strategische ambities van het management met de realiteit op de werkvloer."
                </p>
                <p className="text-[#C8C2B8] font-light leading-relaxed text-lg mb-6">
                   Leren en ontwikkelen vormen een rode draad in mijn loopbaan. Al jaren zie ik hoe organisaties veranderen, en wat er nodig is om mensen daarin echt mee te nemen. AI is daarin een van de meest ingrijpende ontwikkelingen van deze tijd.
                </p>
                <p className="text-[#C8C2B8] font-light leading-relaxed mb-6">
                   Mijn technische kennis stelt me in staat om het gesprek voorbij de buzzwords te brengen. Om hype van realiteit te onderscheiden. Want een AI-strategie opstellen is niet alleen een IT-vraagstuk.
                </p>
                <p className="text-[#C8C2B8] font-light leading-relaxed">
                   Het raakt cultuur, vaardigheden, samenwerking en verantwoordelijkheid. Dáár wordt bepaald of AI waarde toevoegt. Of slechts een voorbijgaande belofte blijft.
                </p>
             </div>
          </div>

          <div className="grid md:grid-cols-2 gap-12 text-[#C8C2B8] font-light leading-relaxed border-t border-white/5 pt-12">
             <div className="space-y-6">
                <p>
                   Ik help leiders en teams om voorbij de waan van de dag te kijken. Om te ontdekken waar AI daadwerkelijk bijdraagt aan hún doelen. Ik verbind strategische ambities met de realiteit van het dagelijks werk. Zodat innovatie niet blijft hangen in plannen, maar ook wordt begrepen en gedragen.
                </p>
             </div>
             <div className="space-y-6">
                <p>
                   Mijn aanpak is strategisch én praktisch. Maar vooral mensgericht, met een stevige inhoudelijke basis. Ik breng energie voor wat mogelijk is, gecombineerd met het realisme dat nodig is om duurzaam vooruit te komen.
                </p>
             </div>
          </div>

          <div className="mt-12 flex justify-center gap-6">
                <GradientBtn onClick={navigateToContact}>
                   Plan een kennismakingsgesprek
                </GradientBtn>
          </div>
       </div>
    </div>
  </div>
);

// 3. Results View Component (Dedicated Page)
const ResultsView = ({ navigateToContact, navigateHome, gradientText }) => (
  <div className="pt-32 pb-24 min-h-screen animate-in fade-in zoom-in-95 duration-500">
    <div className="container mx-auto px-6 max-w-5xl">
      <button onClick={navigateHome} className="mb-8 flex items-center gap-2 text-[#C8C2B8] hover:text-white transition-colors group">
        <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" /> Terug naar Home
      </button>

      <div className="text-center mb-16">
         <h1 className="font-serif text-4xl md:text-6xl mb-6">Resultaat & Impact: <span style={gradientText}>De diepte in</span></h1>
         <div className="w-16 h-1 bg-[#E056B6] mx-auto rounded-full opacity-50"></div>
      </div>

      <div className="prose prose-invert prose-lg max-w-none text-[#C8C2B8] font-light">
         <p className="text-xl text-[#F7F6F3] mb-12 text-center max-w-3xl mx-auto">
            Veel organisaties worstelen met de belofte van AI. Er worden tools aangeschaft en pilots gestart, maar de echte doorbraak blijft uit. De oorzaak? De focus ligt op techniek, terwijl de verandering plaatsvindt bij de mensen die ermee werken.
         </p>

         <div className="grid md:grid-cols-2 gap-12 mb-12">
            <div className="bg-[#2B0A3D]/50 p-8 rounded-2xl border border-white/5">
               <h4 className="text-white font-serif text-xl mb-4 flex items-center gap-3"><Target size={24} className="text-[#E056B6]"/> AI-strategie & Besluitvorming</h4>
               <p className="mb-6">
                  Wanneer je de mens centraal stelt, verandert de dynamiek. Innovatie wordt niet iets dat 'moet', maar iets dat helpt. Je krijgt scherp waar AI echt bijdraagt aan het DNA van jouw organisatie. Ad-hoc beslissingen maken plaats voor een gedragen AI-strategie.
               </p>
            </div>

            <div className="bg-[#2B0A3D]/50 p-8 rounded-2xl border border-white/5">
               <h4 className="text-white font-serif text-xl mb-4 flex items-center gap-3"><Users size={24} className="text-[#FF7A5A]"/> AI-geletterdheid & adoptie</h4>
               <p>
                  Weerstand komt vaak voort uit onbegrip. Door de AI-geletterdheid te vergroten, snappen medewerkers het 'waarom'. Ze zien hoe AI hun werk verrijkt en waar de grenzen liggen. Adoptie wordt een logisch gevolg van onderop, in plaats van een opdracht van bovenaf. Bovendien voldoe je zo aan de EU AI Act die AI-training sinds 2025 verplicht stelt.
               </p>
            </div>

            <div className="bg-[#2B0A3D]/50 p-8 rounded-2xl border border-white/5">
               <h4 className="text-white font-serif text-xl mb-4 flex items-center gap-3"><Anchor size={24} className="text-[#3EDBF0]"/> Overzicht & Zelfredzaamheid</h4>
               <p className="mb-6">
                  Het gevoel van controleverlies verdwijnt. Leiders durven te sturen omdat ze de materie begrijpen. Teams durven te doen omdat ze de ruimte voelen. Je wordt als organisatie zelfredzaam en minder afhankelijk van externe hulp voor elke stap.
               </p>
            </div>

            <div className="bg-[#2B0A3D]/50 p-8 rounded-2xl border border-white/5">
               <h4 className="text-white font-serif text-xl mb-4 flex items-center gap-3"><FileText size={24} className="text-[#8F4CFF]"/> AI-beleid & Governance</h4>
               <p>
                  Een duidelijk AI-beleid geeft juist vrijheid. Mensen weten wat veilig is, en daarbinnen ontstaat ruimte voor innovatie. Risico's worden beheersbaar. Niet door alles dicht te timmeren, maar door werkbare afspraken die passen bij jouw sector en voldoen aan wet- en regelgeving.
               </p>
            </div>
         </div>

         <div className="bg-[#2B0A3D] p-10 rounded-2xl border border-white/5 text-center mt-12">
            <p className="text-2xl text-white font-serif mb-6">
               Ben je klaar om AI voor je te laten werken, in plaats van andersom?
            </p>
            <p className="mb-8 max-w-2xl mx-auto">
               Laten we kijken wat een doordachte AI-strategie concreet voor jouw organisatie kan betekenen.
            </p>
            <div className="flex justify-center">
               <GradientBtn onClick={navigateToContact}>
                  Plan een kennismakingsgesprek
               </GradientBtn>
            </div>
         </div>
      </div>
    </div>
  </div>
);

// 4. Home View Component (The Landing Page)
const HomeView = ({ navigateToContact, navigateToAbout, navigateToResults, gradientText, gradientBorder }) => (
  <>
    {/* Hero Section */}
    <section className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#7B3FE4] opacity-10 blur-[120px] rounded-full pointer-events-none"></div>

      <div className="container mx-auto px-6 relative z-10 text-center max-w-4xl">
        <h1 className="font-serif text-5xl md:text-7xl leading-[1.1] mb-6 font-medium">
          AI begint bij technologie.<br />
          <span className="italic block mt-2">De mens is de <span style={gradientText}>succesfactor</span>.</span>
        </h1>
        
        <p className="text-xl md:text-2xl text-[#F7F6F3] mb-4 font-light max-w-3xl mx-auto leading-relaxed">
          Veel organisaties experimenteren met AI. Weinige maken het tot een fundament. Het verschil? Een doordachte AI-strategie én aandacht voor de mensen die ermee werken.
        </p>

        <p className="text-lg text-[#C8C2B8] mb-12 font-light tracking-wide italic">
          Van AI-strategie naar AI-geletterdheid. Richting voor management, houvast voor de praktijk.
        </p>

        <div className="flex flex-col md:flex-row gap-6 justify-center items-center">
          <GradientBtn onClick={navigateToContact} padding="px-8 py-4">
             Plan een kennismakingsgesprek <ArrowRight size={16} />
          </GradientBtn>
        </div>
      </div>
      
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-30">
        <ChevronDown size={24} />
      </div>
    </section>

    {/* Visie Section */}
    <section id="ai-strategie-visie" className="py-24 md:py-32 relative">
      <div className="container mx-auto px-6 grid md:grid-cols-2 gap-16 md:gap-24 items-center">
        <div>
          <h2 className="font-serif text-3xl md:text-4xl mb-8 leading-tight">
            Echte <span style={gradientText}>waarde</span> ontstaat pas wanneer AI meer wordt dan een experiment.
          </h2>
          <div className="space-y-6 text-[#C8C2B8] text-lg leading-relaxed font-light">
            <p>
              AI biedt organisaties enorme kansen. Slimmer werken, betere beslissingen, nieuwe manieren van samenwerken; het is allemaal mogelijk.
            </p>
            <p>
              Maar zonder een heldere AI-strategie en medewerkers die AI begrijpen, blijft het vluchtig. Daar help ik bij.
            </p>
            <p className="border-l-2 border-[#E056B6] pl-6 italic text-[#F7F6F3]">
              Ik begeleid organisaties om AI doordacht, mensgericht en verantwoord in te zetten.
            </p>
          </div>
        </div>
        
        <div className="relative">
          <div className="aspect-square rounded-full border border-white/5 relative p-12 flex items-center justify-center">
            <div className="absolute inset-0 bg-gradient-to-br from-[#2B0A3D] to-transparent rounded-full opacity-50"></div>
            <div className="grid grid-cols-2 gap-4 relative z-10 w-full">
              <div className="bg-[#3A0F4A] p-6 rounded-2xl border border-white/5 backdrop-blur-sm transform translate-y-4">
                <Brain className="w-8 h-8 text-[#8F4CFF] mb-4" />
                <h3 className="text-white font-serif mb-2">Begrip</h3>
                <p className="text-sm text-[#C8C2B8]">AI-geletterdheid als basis. Weten wat AI wel en niet kan.</p>
              </div>
              <div className="bg-[#3A0F4A] p-6 rounded-2xl border border-white/5 backdrop-blur-sm">
                <Compass className="w-8 h-8 text-[#E056B6] mb-4" />
                <h3 className="text-white font-serif mb-2">Richting</h3>
                <p className="text-sm text-[#C8C2B8]">AI-strategie boven hype. Keuzes die passen bij jouw organisatie.</p>
              </div>
              <div className="bg-[#3A0F4A] p-6 rounded-2xl border border-white/5 backdrop-blur-sm transform translate-y-4">
                <Shield className="w-8 h-8 text-[#FF7A5A] mb-4" />
                <h3 className="text-white font-serif mb-2">Governance</h3>
                <p className="text-sm text-[#C8C2B8]">AI-beleid en grip op risico's. Verantwoord AI-gebruik als standaard.</p>
              </div>
              <div className="bg-[#3A0F4A] p-6 rounded-2xl border border-white/5 backdrop-blur-sm">
                <Users className="w-8 h-8 text-[#FFB347] mb-4" />
                <h3 className="text-white font-serif mb-2">Mens</h3>
                <p className="text-sm text-[#C8C2B8]">De cruciale factor. Adoptie begint bij begrip.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* About Me Section (Short Version) */}
    <section id="ai-expert-profiel" className="py-24 bg-[#2B0A3D] relative overflow-hidden">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
       
       <div className="container mx-auto px-6 max-w-5xl">
          <div className="text-center mb-16">
             <h2 className="font-serif text-3xl md:text-5xl mb-6">Over mij</h2>
             <div className="w-16 h-1 bg-[#E056B6] mx-auto rounded-full opacity-50"></div>
          </div>

          <div className="flex flex-col md:flex-row items-center gap-10">
              
              {/* Compact Profile Photo */}
              <div className="relative w-40 h-40 flex-shrink-0">
                  <div className="absolute inset-0 rounded-full bg-gradient-to-r from-[#7B3FE4] to-[#FFB347] opacity-60 blur-sm animate-pulse"></div>
                  <div className="relative w-full h-full rounded-full overflow-hidden border-2 border-white/20">
                      <img 
                          src="Gemini_Generated_Image_e51pdse51pdse51p.png" 
                          alt="Jouw foto" 
                          className="w-full h-full object-cover filter grayscale contrast-125"
                          onError={(e) => { e.target.onerror = null; e.target.src = "https://via.placeholder.com/160x160/210635/F7F6F3?text=Foto"; }}
                      />
                      <div className="absolute inset-0 bg-gradient-to-tr from-[#7B3FE4] via-[#E056B6] to-[#FFB347] opacity-30 mix-blend-overlay"></div>
                  </div>
              </div>

              <div className="text-center md:text-left">
                  <p className="text-xl md:text-2xl text-[#F7F6F3] font-light leading-relaxed mb-6">
                      Mensen en organisaties laten groeien, dat is waar ik energie van krijg. Toen AI opkwam, zag ik geen bedreiging, maar een kans om dat op een nieuwe manier te doen.
                  </p>
                  <p className="text-lg text-[#C8C2B8] font-light leading-relaxed mb-8 max-w-2xl">
                      Ik begrijp AI-systemen van binnenuit én kijk strategisch naar wat ze betekenen voor mensen en teams. Zo vertaal ik complexe technologie naar menselijke waarde en breng ik rust waar onzekerheid heerst.
                  </p>
                  <div className="flex justify-center md:justify-start">
                      <button 
                          onClick={navigateToAbout}
                          className="group flex items-center gap-2 text-[#3EDBF0] border-b border-[#3EDBF0]/30 pb-1 hover:border-[#3EDBF0] transition-all uppercase tracking-widest text-sm focus:outline-none focus:ring-2 focus:ring-[#3EDBF0] rounded"
                      >
                          Lees mijn verhaal <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
                      </button>
                  </div>
              </div>
          </div>
       </div>
    </section>

    {/* Governance Section */}
    <section id="ai-governance-uitdagingen" className="py-24 bg-[#3A0F4A]">
      <div className="container mx-auto px-6">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <h2 className="font-serif text-3xl md:text-5xl mb-6">Waar het vaak <span style={gradientText}>schuurt</span> bij AI-implementatie</h2>
          <p className="text-[#C8C2B8] text-lg font-light">
            De uitdaging zit zelden in de technologie zelf. Maar in keuzes, adoptie en samenhang.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
          <div className="space-y-8">
            <h3 className="text-xl font-serif text-[#FF7A5A] mb-6">Het patroon van onrust</h3>
            <ul className="space-y-4 text-[#C8C2B8]">
              {["Bestuurlijke druk om 'iets met AI' te doen, zonder duidelijke AI-strategie.", "Medewerkers die op eigen houtje experimenteren, vaak zonder AI-beleid of kaders.", "HR en L&D die de impact voelen, maar het overzicht missen.", "Pilots die enthousiast starten en na drie maanden stil liggen.", "Discussies over verantwoord AI-gebruik die verzanden omdat niemand het totaalplaatje heeft."].map((item, i) => (
                  <li key={i} className="flex items-start gap-4">
                    <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-[#FF7A5A] flex-shrink-0"></span>
                    <span>{item}</span>
                  </li>
              ))}
            </ul>
          </div>

          <div className="relative pl-8 md:border-l border-white/10 space-y-8">
            <h3 className="text-xl font-serif text-[#3EDBF0] mb-6">De versnellers</h3>
            <div className="space-y-6">
              <div className="group">
                <h4 className="text-lg text-white mb-2 flex items-center gap-3">
                  <Shield size={20} className="text-[#8F4CFF]" /> AI-governance
                </h4>
                <p className="text-sm text-[#C8C2B8] leading-relaxed">
                  Duidelijkheid over wat kan en mag. Een AI-beleid dat grip geeft op compliance én ruimte biedt om veilig op te schalen. Dat geeft vertrouwen.
                </p>
              </div>
              <div className="group">
                <h4 className="text-lg text-white mb-2 flex items-center gap-3">
                  <Lightbulb size={20} className="text-[#E056B6]" /> AI-geletterdheid
                </h4>
                <p className="text-sm text-[#C8C2B8] leading-relaxed">
                  Medewerkers die begrijpen wat AI doet, verliezen hun weerstand. Eigenaarschap ontstaat op de werkvloer. Bovendien verplicht de EU AI Act vanaf 2025 dat organisaties investeren in AI-vaardigheden van medewerkers.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Approach Section */}
    <section id="ai-roadmap-aanpak" className="py-24 md:py-32">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16">
          <div className="max-w-2xl">
            <h2 className="font-serif text-3xl md:text-5xl mb-6">Een AI-strategie met <br/>structuur én <span style={gradientText}>ruimte</span></h2>
            <p className="text-[#C8C2B8] text-lg">Ik werk met een helder traject, van verkenning tot AI-roadmap, altijd afgestemd op de context van jouw organisatie.</p>
          </div>
        </div>

        <div className="grid md:grid-cols-4 gap-6">
          {[
            { number: "01", title: "Inzicht & Verkenning", desc: "Begrijpen waar de organisatie staat qua AI-geletterdheid en waar de kansen liggen.", color: "#8F4CFF" },
            { number: "02", title: "Richting & Keuzes", desc: "Samen een AI-strategie bepalen. Waar voegt AI waarde toe en waar (nog) niet?", color: "#E056B6" },
            { number: "03", title: "Adoptie & Verankering", desc: "AI-vaardigheden ontwikkelen, draagvlak creëren, een werkbaar AI-beleid opstellen.", color: "#FF7A5A" },
            { number: "04", title: "AI-roadmap & Eigenaarschap", desc: "Concrete stappen, duidelijke verantwoordelijkheden en ruimte om te leren.", color: "#FFB347" }
          ].map((step, idx) => (
            <div key={idx} className="group p-8 rounded-none border-l border-white/10 hover:border-[#E056B6] hover:bg-[#2B0A3D] transition-all duration-500">
              <div className="text-4xl font-serif mb-6 transition-colors duration-500" style={{ color: step.color }}>{step.number}</div>
              <h3 className="text-xl font-serif text-white mb-4">{step.title}</h3>
              <p className="text-[#C8C2B8] text-sm leading-relaxed">{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Results Section (Short Version) */}
    <section id="ai-business-impact" className="py-24 bg-[#3A0F4A] relative overflow-hidden">
       <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-[#210635] to-transparent pointer-events-none"></div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="grid md:grid-cols-2 gap-16 items-start">
          <div>
            <h2 className="font-serif text-3xl md:text-5xl mb-8">Wat werken met <span style={gradientText}>humAnIc</span> concreet oplevert</h2>
            <p className="text-[#C8C2B8] text-lg mb-8 font-light">
              Niet door méér te doen. Maar door het juiste te doen, op het juiste moment.
            </p>
            
            <button 
              onClick={navigateToResults}
              className="inline-flex items-center text-[#FFB347] border-b border-[#FFB347] pb-1 hover:text-white hover:border-white transition-colors focus:outline-none focus:ring-2 focus:ring-[#FFB347] rounded"
            >
              Lees verder over de impact <ArrowRight size={16} className="ml-2" />
            </button>
          </div>

          <div className="space-y-4">
            {[
              "AI-strategie met focus: Een heldere koers die aansluit bij organisatiedoelen, geen losse experimenten meer.",
              "AI-geletterdheid in de praktijk: Medewerkers die AI begrijpen, hun scepsis verliezen en verantwoordelijkheid nemen.",
              "Besluitvorming: Keuzes gebaseerd op inzicht en een doordachte AI-strategie, niet op de hype van de dag.",
              "Grip op risico's: Een duidelijk AI-beleid waarbinnen verantwoord AI-gebruik en innovatie hand in hand gaan.",
              "Zelfredzaamheid: De organisatie krijgt controle over de eigen AI-transitie."
            ].map((item, i) => {
              const parts = item.split(":");
              return (
                <div key={i} className="flex items-start p-4 bg-[#210635]/50 border border-white/5 rounded-lg hover:border-[#FF7A5A]/30 transition-colors">
                  <CheckCircle2 size={20} className="text-[#FF7A5A] mr-4 flex-shrink-0 mt-1" />
                  <span className="text-[#F7F6F3]">
                    <strong className="font-bold text-white">{parts[0]}:</strong>{parts.slice(1).join(":")}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>

    {/* Target Audience */}
    <section className="py-24 border-b border-white/5">
      <div className="container mx-auto px-6">
        <h2 className="font-serif text-3xl mb-12 text-center">Voor wie is dit geschikt?</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
           <div className="p-6 rounded-2xl bg-[#2B0A3D]/50 border border-white/5 hover:border-[#8F4CFF]/50 transition-colors">
              <h4 className="text-[#8F4CFF] font-serif text-lg mb-3">HR- & L&D Professionals</h4>
              <p className="text-sm text-[#C8C2B8]">Die merken dat vragen over AI-strategie en AI-geletterdheid steeds vaker op hun bord belanden.</p>
           </div>
           <div className="p-6 rounded-2xl bg-[#2B0A3D]/50 border border-white/5 hover:border-[#E056B6]/50 transition-colors">
              <h4 className="text-[#E056B6] font-serif text-lg mb-3">Verandermanagers</h4>
              <p className="text-sm text-[#C8C2B8]">Die zoeken naar grip op een technologie die sneller beweegt dan de organisatie kan volgen.</p>
           </div>
           <div className="p-6 rounded-2xl bg-[#2B0A3D]/50 border border-white/5 hover:border-[#FF7A5A]/50 transition-colors">
              <h4 className="text-[#FF7A5A] font-serif text-lg mb-3">MT's & Directies</h4>
              <p className="text-sm text-[#C8C2B8]">Die een AI-strategie willen ontwikkelen maar de materie nog moeten doorgronden.</p>
           </div>
           <div className="p-6 rounded-2xl bg-[#2B0A3D]/50 border border-white/5 hover:border-[#3EDBF0]/50 transition-colors">
              <h4 className="text-[#3EDBF0] font-serif text-lg mb-3">Bewuste Groeiers</h4>
              <p className="text-sm text-[#C8C2B8]">Organisaties die AI zien als middel, niet als doel. Met aandacht voor verantwoord AI-gebruik.</p>
           </div>
        </div>
      </div>
    </section>

    {/* Contact / CTA Section */}
    <section className="py-32 relative">
      <div className="container mx-auto px-6 text-center max-w-3xl">
        <div className="mb-8 inline-block p-1 rounded-full" style={gradientBorder}>
          <div className="bg-[#210635] rounded-full px-4 py-1">
            <span className="text-xs uppercase tracking-widest text-white">Kennismaken?</span>
          </div>
        </div>
        <h2 className="font-serif text-4xl md:text-5xl mb-8 leading-tight">
          Benieuwd wat een <span style={gradientText}>AI-strategie</span> kan betekenen voor jouw organisatie?
        </h2>
        <p className="text-[#C8C2B8] text-xl mb-12 font-light">
          En wil je dit aanpakken met aandacht voor AI-geletterdheid, visie en verantwoordelijkheid? Dan maak ik graag kennis.
        </p>
        <div className="flex justify-center">
          <GradientBtn onClick={navigateToContact} padding="px-10 py-5">
             Plan een kennismakingsgesprek
          </GradientBtn>
        </div>
      </div>
    </section>
  </>
);

// 5. Contact View Component (Dedicated Page)
const ContactView = ({ gradientText, gradientBorder }) => (
  <div className="pt-32 pb-24 min-h-screen animate-in fade-in zoom-in-95 duration-500">
    <div className="container mx-auto px-6 max-w-6xl">
      <div className="grid lg:grid-cols-2 gap-16 items-start">
        
        {/* Left: Info */}
        <div>
          <div className="mb-8 inline-block px-3 py-1 rounded-full border border-[#3EDBF0]/30 text-[#3EDBF0] text-xs tracking-widest uppercase">
            Contact
          </div>
          <h1 className="font-serif text-4xl md:text-6xl mb-6 leading-tight">
            Klaar voor de <span style={gradientText}>volgende stap?</span>
          </h1>
          <p className="text-[#C8C2B8] text-lg mb-12 leading-relaxed">
            Of je nu aan het begin staat van je AI-strategie of vastloopt bij de implementatie, ik denk graag mee. Over hoe AI een versterker wordt, niet een vervanger.
          </p>

          <div className="space-y-8 mb-12">
            <div className="flex items-start gap-4 group">
              <div className="p-3 rounded-full bg-[#2B0A3D] border border-white/10 group-hover:border-[#E056B6] transition-colors">
                <Mail size={20} className="text-[#E056B6]" />
              </div>
              <div>
                <h4 className="text-white font-medium mb-1">Email</h4>
                <a href="mailto:contact@humanic-ai.com" className="text-[#C8C2B8] hover:text-white transition-colors">contact@humanic-ai.com</a>
              </div>
            </div>
            <div className="flex items-start gap-4 group">
              <div className="p-3 rounded-full bg-[#2B0A3D] border border-white/10 group-hover:border-[#3EDBF0] transition-colors">
                <Linkedin size={20} className="text-[#3EDBF0]" />
              </div>
              <div>
                <h4 className="text-white font-medium mb-1">LinkedIn</h4>
                <a href="#" className="text-[#C8C2B8] hover:text-white transition-colors">Connect met humAnIc</a>
              </div>
            </div>
          </div>

          {/* FAQ Mini Section */}
          <div className="border-t border-white/10 pt-8">
            <h4 className="text-white font-serif text-xl mb-6">Wat kun je verwachten?</h4>
            <div className="space-y-4">
              <div className="flex gap-3">
                <CheckCircle2 size={18} className="text-[#FFB347] flex-shrink-0 mt-1" />
                <p className="text-sm text-[#C8C2B8]">Een open gesprek over jouw uitdagingen rondom AI-strategie of AI-implementatie.</p>
              </div>
              <div className="flex gap-3">
                <CheckCircle2 size={18} className="text-[#FFB347] flex-shrink-0 mt-1" />
                <p className="text-sm text-[#C8C2B8]">Reactie binnen 2 werkdagen.</p>
              </div>
              <div className="flex gap-3">
                <CheckCircle2 size={18} className="text-[#FFB347] flex-shrink-0 mt-1" />
                <p className="text-sm text-[#C8C2B8]">Na ons gesprek heb je altijd iets om mee verder te gaan – een inzicht, een richting of een concrete volgende stap.</p>
              </div>
            </div>
          </div>
        </div>

        {/* Right: Form */}
        <div className="bg-[#2B0A3D]/50 backdrop-blur-sm border border-white/5 p-8 md:p-10 rounded-3xl relative overflow-hidden">
          {/* Decorative gradients */}
          <div className="absolute top-0 right-0 w-64 h-64 bg-[#7B3FE4] opacity-10 blur-[80px] rounded-full pointer-events-none"></div>
          
          <h3 className="text-2xl font-serif text-white mb-6 relative z-10">Stuur een bericht</h3>
          
          <form className="space-y-6 relative z-10" onSubmit={(e) => e.preventDefault()}>
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <label className="block text-xs uppercase tracking-widest text-[#C8C2B8] mb-2">Naam</label>
                <input type="text" className="w-full bg-[#210635] border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#E056B6] transition-colors" placeholder="Jouw naam" />
              </div>
              <div>
                <label className="block text-xs uppercase tracking-widest text-[#C8C2B8] mb-2">Organisatie</label>
                <input type="text" className="w-full bg-[#210635] border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#E056B6] transition-colors" placeholder="Bedrijfsnaam" />
              </div>
            </div>

            <div>
              <label className="block text-xs uppercase tracking-widest text-[#C8C2B8] mb-2">Email</label>
              <input type="email" className="w-full bg-[#210635] border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#E056B6] transition-colors" placeholder="jouw@email.nl" />
            </div>

            <div>
              <label className="block text-xs uppercase tracking-widest text-[#C8C2B8] mb-2">Onderwerp</label>
              <div className="relative">
                <select className="w-full bg-[#210635] border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#E056B6] transition-colors appearance-none cursor-pointer">
                  <option>Ik wil een AI-strategie ontwikkelen</option>
                  <option>Ik zoek een spreker over AI & Mens</option>
                  <option>Ik wil sparren over AI-beleid</option>
                  <option>Anders...</option>
                </select>
                <ChevronDown className="absolute right-3 top-3.5 text-[#C8C2B8] pointer-events-none" size={16} />
              </div>
            </div>

            <div>
              <label className="block text-xs uppercase tracking-widest text-[#C8C2B8] mb-2">Bericht</label>
              <textarea rows="4" className="w-full bg-[#210635] border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#E056B6] transition-colors" placeholder="Vertel kort waar je naar op zoek bent..."></textarea>
            </div>

            <button className="w-full bg-white text-[#210635] font-medium py-4 rounded-lg hover:bg-[#3EDBF0] transition-colors flex items-center justify-center gap-2 group">
              Plan een kennismakingsgesprek <Send size={16} className="group-hover:translate-x-1 transition-transform" />
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>
);

// 6. Main Website Component
const Website = () => {
  const [activeView, setActiveView] = useState('home'); // 'home', 'contact', 'about', 'results'
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Navigation Logic
  const handleNavClick = (id) => {
    setActiveView('home');
    setIsMobileMenuOpen(false);
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      } else {
        window.scrollTo(0, 0);
      }
    }, 100);
  };

  const handleContactClick = () => {
    setActiveView('contact');
    setIsMobileMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const handleAboutClick = () => {
    setActiveView('about');
    setIsMobileMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const handleResultsClick = () => {
    setActiveView('results');
    setIsMobileMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const navigateHome = () => {
    setActiveView('home');
    window.scrollTo(0, 0);
  };

  // Styles
  const colors = {
    bg: '#210635',
    textMain: '#F7F6F3',
  };

  const gradientText = {
    background: 'linear-gradient(90deg, #7B3FE4, #8F4CFF, #E056B6, #FF7A5A, #FFB347)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
  };

  const gradientBorder = {
    background: 'linear-gradient(90deg, #7B3FE4, #8F4CFF, #E056B6, #FF7A5A, #FFB347)',
  };

  return (
    <div className="min-h-screen font-sans selection:bg-[#E056B6] selection:text-white" style={{ backgroundColor: colors.bg, color: colors.textMain }}>
      
      {/* Navigation */}
      <nav 
        className={`fixed w-full z-50 transition-all duration-500 ${isScrolled || activeView !== 'home' ? 'py-4 bg-[#210635]/95 backdrop-blur-md shadow-lg' : 'py-8 bg-transparent'}`}
      >
        <div className="container mx-auto px-6 flex justify-between items-center">
          <div 
            className="text-2xl font-serif font-bold tracking-tight cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#3EDBF0] rounded px-2" 
            onClick={() => handleNavClick('')}
            tabIndex="0"
          >
            <span style={gradientText}>humAnIc</span>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-12 text-[#C8C2B8]">
            <button onClick={() => handleNavClick('ai-strategie-visie')} className="hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase focus:outline-none">Visie</button>
            <button onClick={() => handleNavClick('ai-expert-profiel')} className="hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase focus:outline-none">Over Mij</button>
            <button onClick={() => handleNavClick('ai-roadmap-aanpak')} className="hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase focus:outline-none">Aanpak</button>
            <button onClick={() => handleNavClick('ai-business-impact')} className="hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase focus:outline-none">Resultaat</button>
            
            <GradientBtn onClick={handleContactClick} padding="px-6 py-2">
              Kennismaken
            </GradientBtn>
          </div>

          {/* Mobile Toggle */}
          <button 
            className="md:hidden text-white p-2"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-[#2B0A3D] border-t border-white/10 p-6 flex flex-col space-y-6 shadow-2xl h-screen">
            <button onClick={() => handleNavClick('ai-strategie-visie')} className="text-lg text-[#C8C2B8] text-left py-2">Visie</button>
            <button onClick={() => handleNavClick('ai-expert-profiel')} className="text-lg text-[#C8C2B8] text-left py-2">Over Mij</button>
            <button onClick={() => handleNavClick('ai-roadmap-aanpak')} className="text-lg text-[#C8C2B8] text-left py-2">Aanpak</button>
            <button onClick={() => handleNavClick('ai-business-impact')} className="text-lg text-[#C8C2B8] text-left py-2">Resultaat</button>
            <button onClick={handleContactClick} className="text-lg text-[#3EDBF0] text-left py-2">Kennismaken</button>
          </div>
        )}
      </nav>

      {/* Main Content Switch */}
      <main>
        {activeView === 'home' && (
          <HomeView 
            navigateToContact={handleContactClick}
            navigateToAbout={handleAboutClick}
            navigateToResults={handleResultsClick}
            gradientText={gradientText}
            gradientBorder={gradientBorder}
          />
        )}
        {activeView === 'contact' && (
          <ContactView 
            gradientText={gradientText}
            gradientBorder={gradientBorder}
          />
        )}
        {activeView === 'about' && (
          <AboutView 
            navigateToContact={handleContactClick}
            navigateHome={navigateHome}
            gradientText={gradientText}
          />
        )}
        {activeView === 'results' && (
          <ResultsView 
            navigateToContact={handleContactClick}
            navigateHome={navigateHome}
            gradientText={gradientText}
          />
        )}
      </main>

      {/* Footer */}
      <footer className="py-12 bg-[#1E1E1E] text-sm text-[#C8C2B8] border-t border-white/5">
        <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="font-serif text-lg text-white">humAnIc</div>
          
          <div className="flex gap-8">
            <a href="#" className="hover:text-white transition-colors">LinkedIn</a>
            <button onClick={handleContactClick} className="hover:text-white transition-colors">Contact</button>
            <a href="#" className="hover:text-white transition-colors">Privacy</a>
          </div>

          <div className="text-xs opacity-50">
            &copy; {new Date().getFullYear()} humAnIc. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Website;