const { useState, useEffect, useRef } = React;
const { CATEGORIES, LANGS, FAQS, CLIENTS, NIEUWS } = window.SITE_DATA;

function formatDate(dateStr) {
  return new Date(dateStr).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
}

// =================== ROUTER ===================
function useRoute() {
  const [route, setRoute] = useState(() => window.location.hash.replace('#/', '') || 'home');
  useEffect(() => {
    const onChange = () => {
      const r = window.location.hash.replace('#/', '') || 'home';
      setRoute(r);
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return route;
}

// =================== HEADER ===================
function Header({ route }) {
  const [open, setOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, []);
  useEffect(() => { setOpen(false); setMobileOpen(false); }, [route]);
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const isActive = (r) => route === r || (r === 'diensten' && route.startsWith('diensten')) || (r === 'nieuws' && route.startsWith('nieuws'));

  return (
    <>
      <header className="site-header">
        <div className="wrap row">
          <a href="#/" className="header-logo-link"><img src="Logo.png" alt="ProfSmart" className="header-logo-img"/></a>
          <nav className="nav">
            <a href="#/" className={isActive('home') ? 'active' : ''}>Home</a>
            <div className="megamenu-wrap" ref={ref}>
              <span className={`navlink ${open ? 'open' : ''} ${isActive('diensten') ? 'active' : ''}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 0 }}>
                <a href="#/diensten" style={{ color: 'inherit', textDecoration: 'none' }}>Wat wij doen</a>
                <button style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0 0 0 4px', color: 'inherit', display: 'inline-flex', alignItems: 'center' }} onClick={(e) => { e.stopPropagation(); setOpen(!open); }}>
                  <Icon.Chev/>
                </button>
              </span>
              {open && (
                <div className="megamenu" onClick={(e) => e.stopPropagation()}>
                  {CATEGORIES.map(cat => (
                    <div className="col" key={cat.id}>
                      <h4><a href={`#/diensten/${cat.id}`} onClick={() => setOpen(false)} style={{ color: 'inherit', textDecoration: 'none' }}>{cat.title}</a></h4>
                      {cat.sub.map(s => (
                        <a key={s.slug} href={`#/diensten/${cat.id}/${s.slug}`} onClick={() => setOpen(false)}>{s.nav || s.title}</a>
                      ))}
                    </div>
                  ))}
                </div>
              )}
            </div>
            <a href="#/over" className={isActive('over') ? 'active' : ''}>Over ons</a>
            <a href="#/nieuws" className={isActive('nieuws') ? 'active' : ''}>Nieuws</a>
            <a href="#/vacatures" className={isActive('vacatures') ? 'active' : ''}>Vacatures</a>
            <a href="#/contact" className={isActive('contact') ? 'active' : ''}>Contact</a>
          </nav>
          <a href="#/contact" className="cta header-cta">Plan kennismaking <Icon.Arrow/></a>
          <button className="mob-toggle" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            {mobileOpen
              ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
            }
          </button>
        </div>
      </header>
      {mobileOpen && (
        <div className="mobile-nav">
          <div className="mobile-nav-inner">
            <div className="mobile-nav-top">
              <a href="#/" onClick={() => setMobileOpen(false)}><img src="Logo.png" alt="ProfSmart" className="header-logo-img"/></a>
              <button className="mob-close" onClick={() => setMobileOpen(false)}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
            </div>
            <nav className="mobile-nav-links">
              <a href="#/" onClick={() => setMobileOpen(false)} className={isActive('home') ? 'active' : ''}>Home</a>
              <div>
                <button className={`mob-diensten-btn ${servicesOpen ? 'open' : ''}`} onClick={() => setServicesOpen(!servicesOpen)}>
                  Wat wij doen
                  <span className="chev"><Icon.Chev/></span>
                </button>
                {servicesOpen && (
                  <div className="mob-diensten-sub">
                    <a href="#/diensten" onClick={() => setMobileOpen(false)}>Overzicht alle diensten</a>
                    {CATEGORIES.map(cat => (
                      <a key={cat.id} href={`#/diensten/${cat.id}`} onClick={() => setMobileOpen(false)}>{cat.title}</a>
                    ))}
                  </div>
                )}
              </div>
              <a href="#/over" onClick={() => setMobileOpen(false)} className={isActive('over') ? 'active' : ''}>Over ons</a>
              <a href="#/nieuws" onClick={() => setMobileOpen(false)} className={isActive('nieuws') ? 'active' : ''}>Nieuws</a>
              <a href="#/vacatures" onClick={() => setMobileOpen(false)} className={isActive('vacatures') ? 'active' : ''}>Vacatures</a>
              <a href="#/contact" onClick={() => setMobileOpen(false)} className={isActive('contact') ? 'active' : ''}>Contact</a>
            </nav>
            <div className="mobile-nav-footer">
              <a href="#/contact" className="cta lg" onClick={() => setMobileOpen(false)} style={{ width: '100%', justifyContent: 'center' }}>Plan kennismaking <Icon.Arrow/></a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// =================== HERO ===================
function Hero() {
  return (
    <section className="hero" id="top">
      <video autoPlay muted loop playsInline className="hero-bg-video">
        <source src="intro.mp4" type="video/mp4"/>
      </video>
      <div className="hero-bg-overlay"/>
      <div className="wrap hero-content">
        <div className="eyebrow"><span className="dot"></span> Analyse, Advies en Actie</div>
        <h1 className="hero-title">
          Strategische en uitvoerende ondersteuning voor zorgorganisaties die <span className="accent">zorgeloos verder willen</span>.
        </h1>
        <p className="hero-sub">
          Zorgorganisaties staan voor vraagstukken die geen enkel vakgebied alleen kan oplossen. Strategie, governance, kwaliteit, regelgeving - de uitdagingen zijn divers, de druk is constant. ProfSmart neemt die last van uw organisatie over, op hoog niveau en breed inzetbaar. Wij kennen de zorgwereld van binnenuit, van bestuurstafel tot werkvloer.
        </p>
        <div className="hero-ctas">
          <a href="#/contact" className="cta lg">Plan vrijblijvend gesprek <Icon.Arrow/></a>
          <a href="#/diensten" className="cta lg ghost">Bekijk onze diensten</a>
        </div>
        <div className="hero-stats">
          <div className="stat">
            <div className="stat-circle">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
              </svg>
            </div>
            <div className="stat-num">10+</div>
            <div className="stat-lbl">Jaar zorgervaring</div>
          </div>
          <div className="stat">
            <div className="stat-circle">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><polyline points="9 12 11 14 15 10"/>
              </svg>
            </div>
            <div className="stat-num">100%</div>
            <div className="stat-lbl">Slagings­percentage</div>
          </div>
          <div className="stat">
            <div className="stat-circle">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
              </svg>
            </div>
            <div className="stat-num">10</div>
            <div className="stat-lbl">Talen voor onderzoek</div>
          </div>
          <div className="stat">
            <div className="stat-circle">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
              </svg>
            </div>
            <div className="stat-num">&lt;1d</div>
            <div className="stat-lbl">Reactietijd</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== TRUST ===================
function Trust() {
  const items = ['ISO 9001', 'HKZ', 'IGJ', 'GGD', 'Wmo', 'Wlz', 'Jeugdwet', 'Wkkgz'];
  return (
    <div className="trust">
      <div className="wrap trust-row">
        <div className="trust-label">Specialisten in:</div>
        <div className="trust-badges">
          {items.map(i => <div className="tb" key={i}>{i}</div>)}
        </div>
      </div>
    </div>
  );
}

// =================== DIENSTEN TEASER (homepage) ===================
function DienstenTeaser() {
  return (
    <section id="diensten">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Wat wij doen</div>
          <h2>Vier pijlers, één <span className="accent">betrouwbare partner</span></h2>
          <p className="section-sub">Of u nu certificering nodig heeft, een zorgcontract wilt afsluiten, uw team wilt versterken of een inspectietraject doorloopt - ProfSmart begeleidt u met praktische ervaring en heldere taal.</p>
        </div>
        <div className="dienst-grid">
          {CATEGORIES.map(cat => {
            const I = Icon[cat.icon];
            return (
              <a className="dienst" href={`#/diensten/${cat.id}`} key={cat.id}>
                <div className="dienst-img">
                  {cat.img ? <img src={cat.img} alt="" /> : <I size={28}/>}
                </div>
                <div className="dienst-content">
                  <div className="num">{cat.num} / 04</div>
                  <h3>{cat.title}</h3>
                  <p>{cat.short}</p>
                  <ul>
                    {cat.highlights.slice(0, 2).map(h => <li key={h}><Icon.Check size={16}/> {h}</li>)}
                  </ul>
                  <span className="more">Lees meer <Icon.Arrow size={14}/></span>
                </div>
              </a>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#/diensten" className="cta lg">Bekijk alle diensten <Icon.Arrow/></a>
        </div>
      </div>
    </section>
  );
}

// =================== AANPAK ===================
function Aanpak() {
  const stages = [
    { n: '01', t: 'Kennismaking', d: 'Vrijblijvend gesprek waarin we uw organisatie en ambities leren kennen.' },
    { n: '02', t: 'Nulmeting', d: 'Heldere foto van waar u staat. Eerlijk, zonder franjes.' },
    { n: '03', t: 'Plan op maat', d: 'Concreet plan, afgestemd op uw tempo en capaciteit.' },
    { n: '04', t: 'Uitvoering', d: 'Begeleiding bij implementatie - beleid, processen, team.' },
    { n: '05', t: 'Borging & nazorg', d: 'Ook na certificering of indiening blijven wij beschikbaar.' },
  ];
  return (
    <section id="aanpak" className="alt">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Onze aanpak</div>
          <h2>Een vaste werkwijze. <span className="accent">Altijd op maat.</span></h2>
          <p className="section-sub">Ieder traject volgt dezelfde vijf stappen - maar de invulling is altijd afgestemd op uw organisatie, uw team en uw uitdaging.</p>
        </div>
        <div className="stages-grid">
          {stages.map((s, i) => (
            <div key={s.n} className="stage-card">
              <div className="stage-num" style={{ background: i === 0 ? 'var(--navy)' : 'var(--tint)', color: i === 0 ? '#fff' : 'var(--blue)' }}>{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== DEEP SECTION ===================
function SubCard({ s, catId, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`subcard ${open ? 'open' : ''}`}>
      <div className="head" onClick={() => setOpen(!open)}>
        <div className="ix"><Icon.Check size={18}/></div>
        <div style={{ flex: 1 }}>
          <div className="title">{s.title}</div>
          <div className="desc">{s.teaser}</div>
        </div>
        <div className="pl"><Icon.Plus/></div>
      </div>
      <div className="body">
        <p>{s.intro}</p>
        {s.unique && (
          <div style={{ background: 'var(--tint)', borderRadius: 12, padding: '14px 18px', display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 18 }}>
            <div style={{ color: 'var(--blue)', flexShrink: 0, marginTop: 2 }}><Icon.Sparkle size={20}/></div>
            <div style={{ fontSize: 14, color: 'var(--navy)', fontWeight: 500, lineHeight: 1.5 }}>{s.unique}</div>
          </div>
        )}
        {s.meerwaarde && (<><h5>Meerwaarde</h5><ul>{s.meerwaarde.map((m, i) => <li key={i}><Icon.Check size={14}/>{typeof m === 'string' ? m : m.t}</li>)}</ul></>)}
        {s.topics && (<><h5>Onderwerpen waar we mee helpen</h5><ul>{s.topics.map(m => <li key={m}><Icon.Check size={14}/>{m}</li>)}</ul></>)}
        {s.steps && (
          <>
            <h5>Stappenplan</h5>
            <div className="steps">
              {s.steps.map((st, i) => (
                <div className="step" key={i}>
                  <div className="stitle"><span className="n">Stap {i + 1}</span>{st.t}</div>
                  <p>{st.d}</p>
                </div>
              ))}
            </div>
          </>
        )}
        <a href={`#/diensten/${catId}/${s.slug}`} className="cta ghost" style={{ marginTop: 12 }}>Meer lezen <Icon.Arrow size={14}/></a>
      </div>
    </div>
  );
}

function DeepSection({ cat, alt }) {
  const I = Icon[cat.icon];
  return (
    <section id={cat.id} className={alt ? 'alt' : ''}>
      <div className="wrap deep">
        <div className="left">
          <div className="section-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--navy)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><I size={16}/></span>
            {cat.num} - {cat.title}
          </div>
          <h2 style={{ marginTop: 18 }}>{cat.title}</h2>
          <p>{cat.intro}</p>
          <a href="#/contact" className="cta ghost">Stel uw vraag <Icon.Arrow size={14}/></a>
          <div className="meta">
            {cat.highlights.map(h => (
              <div className="mi" key={h}><Icon.CheckCircle size={18}/><span>{h}</span></div>
            ))}
          </div>
        </div>
        <div className="subcards">
          {cat.sub.map((s, i) => <SubCard key={s.title} s={s} catId={cat.id} defaultOpen={i === 0}/>)}
        </div>
      </div>
    </section>
  );
}

// =================== TALEN ===================
function TalenBanner() {
  return (
    <section style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="wrap">
        <div className="langs">
          <div className="langs-inner" style={{ gridTemplateColumns: '1fr' }}>
            <div>
              <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>Uniek aanbod</div>
              <h2 style={{ marginTop: 14 }}>Cliënttevredenheidsonderzoek in 10 talen.</h2>
              <p>Standaard vragenlijsten geven standaard antwoorden. ProfSmart voert diepgaande cliënttevredenheidsonderzoeken uit die zijn afgestemd op uw organisatie én uw cliëntpopulatie. We helpen u de juiste vragen te stellen en vertalen de uitkomsten direct naar concrete verbeteringen in uw zorgkwaliteit.</p>
              <div className="langs-tags">
                {LANGS.map(l => <div className="langs-tag" key={l.name}>{l.name}</div>)}
              </div>
            </div>
          </div>
        </div>
        <div className="langs-werkwijze">
          <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,0.85)', marginBottom: 20 }}>Van intake tot nazorg — in 5 stappen</div>
          <div className="langs-steps">
            {[
              { num: '01', t: 'Intake & analyse', d: 'Kennismaking met uw organisatie, zorgdoelstellingen en cliëntpopulatie. We brengen in kaart welke talen en methoden het meest passend zijn.' },
              { num: '02', t: 'Vragenlijst op maat', d: 'We ontwikkelen een vragenlijst die aansluit bij uw zorgprofiel en vertalen deze professioneel naar alle relevante talen.' },
              { num: '03', t: 'Uitvoering onderzoek', d: 'Cliënten worden benaderd via de meest toegankelijke methode — schriftelijk, digitaal of mondeling in hun eigen taal.' },
              { num: '04', t: 'Analyse & rapportage', d: 'Alle resultaten worden geanalyseerd en samengevat in een helder rapport met scores per doelgroep en verbeterpunten.' },
              { num: '05', t: 'Nazorg & implementatie', d: 'We bespreken de uitkomsten met uw team en helpen u de aanbevelingen direct te vertalen naar verbeteringen in de zorgpraktijk.' },
            ].map((s, i) => (
              <div key={i} className="langs-step">
                <div className="langs-step-num">{s.num}</div>
                <div>
                  <div className="langs-step-title">{s.t}</div>
                  <div className="langs-step-desc">{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== WHY US ===================
function WhyUs() {
  const reasons = [
    { ic: 'Award', t: 'Jarenlange zorgervaring', d: 'Wij kennen de Nederlandse zorgsector van binnen en buiten - werkvloer én bestuurskamer.' },
    { ic: 'Compass', t: 'Praktisch en behapbaar', d: 'Geen dikke beleidsnota\'s. Concrete tools en werkvormen die uw team de volgende dag kan toepassen.' },
    { ic: 'Users', t: 'Persoonlijk en betrokken', d: 'Eén vast aanspreekpunt, eerlijk advies en korte lijnen. Van eerste gesprek tot ver na de certificering.' },
  ];
  return (
    <section className="alt">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Waarom ProfSmart</div>
          <h2>Drie redenen om <span className="accent">samen op te trekken.</span></h2>
        </div>
        <div className="why-grid">
          {reasons.map(r => {
            const I = Icon[r.ic];
            return (
              <div className="why-card" key={r.t}>
                <div className="ic"><I size={22}/></div>
                <h4>{r.t}</h4>
                <p>{r.d}</p>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#/over" className="cta lg ghost">Lees meer over ons <Icon.Arrow/></a>
        </div>
      </div>
    </section>
  );
}

// =================== TESTIMONIAL ===================
function Quote() {
  return (
    <section className="quote-section">
      <div className="wrap quote">
        <div>
          <div className="section-eyebrow">Klantverhaal</div>
          <h2>"Wij durfden de audit in <span className="accent">met vertrouwen</span>."</h2>
          <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.6 }}>
            Van de eerste nulmeting tot de officiële certificering - de begeleiding van ProfSmart maakte het verschil. Niet door druk, maar door rust en duidelijkheid.
          </p>
        </div>
        <div className="quote-card">
          <div className="qm">"</div>
          <blockquote>
            ProfSmart kent de zorg, kent de inspectie en weet hoe je een team meekrijgt. Onze HKZ-certificering is zonder gedoe gehaald, en het systeem leeft écht binnen onze organisatie.
          </blockquote>
          <div className="who">
            <div className="av">MK</div>
            <div>
              <div className="n">Marieke Kools</div>
              <div className="r">Directeur - Zorgaanbieder Wmo & Wlz</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== FAQ ===================
function FaqItem({ q, a, defaultOpen }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`} onClick={() => setOpen(!open)}>
      <div className="qrow">
        <div className="q">{q}</div>
        <div className="pl"><Icon.Plus/></div>
      </div>
      <div className="a">{a}</div>
    </div>
  );
}
function Faq() {
  return (
    <section className="alt">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Veelgestelde vragen</div>
          <h2>Goed om <span className="accent">te weten</span>.</h2>
        </div>
        <div className="faq">
          {FAQS.map((f, i) => <FaqItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0}/>)}
        </div>
      </div>
    </section>
  );
}

// =================== CONTACT BLOCK ===================
function Contact() {
  return (
    <section id="contact" style={{ paddingTop: 56 }}>
      <div className="wrap">
        <div className="cta-section">
          <div className="wrap-inner">
            <div>
              <div className="section-eyebrow" style={{ color: 'var(--blue-soft)' }}>Klaar om te starten?</div>
              <h2>Plan een vrijblijvend <span style={{ color: 'var(--blue-soft)', fontStyle: 'italic' }}>kennismakingsgesprek.</span></h2>
              <p>Wilt u meer weten over onze diensten, of bent u benieuwd wat ProfSmart voor uw organisatie kan betekenen? Wij beantwoorden uw vragen graag - en denken vrijblijvend met u mee.</p>
              <div className="ctas">
                <a href="#" className="cta lg">Plan kennismaking <Icon.Arrow/></a>
                <a href="tel:+31641662679" className="cta lg ghost">Direct bellen <Icon.Phone/></a>
              </div>
            </div>
            <div className="cta-meta">
              <div className="row"><div className="ic"><Icon.Phone/></div><div><div className="l">Telefoon</div><div className="v"><a href="tel:+31641662679" style={{color:'inherit',textDecoration:'none'}}>+31 6 41662679</a></div></div></div>
              <div className="row"><div className="ic"><Icon.Mail/></div><div><div className="l">E-mail</div><div className="v"><a href="mailto:info@profsmart.nl" style={{color:'inherit',textDecoration:'none'}}>info@profsmart.nl</a></div></div></div>
              <div className="row"><div className="ic"><Icon.Clock/></div><div><div className="l">Reactietijd</div><div className="v">Binnen één werkdag</div></div></div>
              <div className="row"><div className="ic"><Icon.Pin/></div><div><div className="l">Werkgebied</div><div className="v">Heel Nederland</div></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== FOOTER ===================
function Footer() {
  return (
    <footer className="site">
      <div className="wrap top">
        <div>
          <div className="brand">
            <Logo size={36}/>
            <div className="brand-name"><span className="prof" style={{ color: '#fff' }}>Prof</span><span className="smart">Smart</span></div>
          </div>
          <p className="blurb">Specialist in kwaliteit, certificering en zorginkoop. Praktische, persoonlijke begeleiding voor zorgorganisaties in heel Nederland.</p>
        </div>
        {CATEGORIES.map(cat => (
          <div key={cat.id}>
            <h5><a href={`#/diensten/${cat.id}`} style={{ color: 'inherit' }}>{cat.title}</a></h5>
            <ul>
              {cat.sub.map(s => <li key={s.slug}><a href={`#/diensten/${cat.id}/${s.slug}`}>{s.nav || s.title}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="wrap footer-mid">
        <div><h5>Bedrijf</h5><ul><li><a href="#/over">Over ons</a></li><li><a href="#/nieuws">Nieuws</a></li><li><a href="#/vacatures">Vacatures</a></li><li><a href="#/referenties">Referenties</a></li><li><a href="#/faq">Veelgestelde vragen</a></li><li><a href="#/contact">Contact</a></li></ul></div>
        <div><h5>Contact</h5><ul><li><a href="mailto:info@profsmart.nl" style={{color:'inherit'}}>info@profsmart.nl</a></li><li><a href="tel:+31641662679" style={{color:'inherit'}}>+31 6 41662679</a></li><li>Heel Nederland</li></ul></div>
        <div><h5>Reactietijd</h5><ul><li>Binnen één werkdag</li></ul></div>
      </div>
      <div className="wrap bottom">
        <div>© 2026 ProfSmart. Alle rechten voorbehouden.</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="#">Privacyverklaring</a>
          <a href="#">Algemene voorwaarden</a>
          <a href="#">KvK 12345678</a>
        </div>
      </div>
      <div className="wrap" style={{ borderTop: '1px solid rgba(255,255,255,0.06)', padding: '14px 32px', textAlign: 'center', fontSize: 12, color: 'rgba(255,255,255,0.3)' }}>
        Website gemaakt door <a href="https://studioOrjo.nl" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }} onMouseOver={e => e.target.style.color='rgba(255,255,255,0.85)'} onMouseOut={e => e.target.style.color='rgba(255,255,255,0.5)'}>Studio ORJO</a>
      </div>
    </footer>
  );
}

// =================== PAGES ===================
function PageHero({ eyebrow, title, sub }) {
  return (
    <section className="page-hero">
      <div className="wrap">
        <div className="section-eyebrow">{eyebrow}</div>
        <h1>{title}</h1>
        {sub && <p>{sub}</p>}
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <ClientsCarousel/>
      <Hero/>
      <Trust/>
      <DienstenTeaser/>
      <Aanpak/>
      <Quote/>
      <WhyUs/>
      <Contact/>
    </>
  );
}

function DienstenPage() {
  // scroll to deep-link section if present
  useEffect(() => {
    const hash = window.location.hash;
    const m = hash.match(/#\/diensten#(\w+)/);
    if (m) {
      setTimeout(() => {
        const el = document.getElementById(m[1]);
        if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
      }, 50);
    }
  }, []);
  return (
    <>
      <PageHero
        eyebrow="Wat wij doen"
        title={<>Vier pijlers - één <span className="accent">betrouwbare partner</span>.</>}
        sub="Een compleet overzicht van onze diensten, met per onderwerp een uitklapbaar stappenplan. Klik op een sub-pagina voor de volledige aanpak."
      />
      <div className="diensten-toc">
        <div className="wrap">
          <div className="toc-grid">
            {CATEGORIES.map(cat => {
              const I = Icon[cat.icon];
              return (
                <a className="toc-card" href={`#${cat.id}`} key={cat.id} onClick={(e) => { e.preventDefault(); document.getElementById(cat.id).scrollIntoView({ block: 'start', behavior: 'smooth' }); }}>
                  <div className="toc-icon"><I size={22}/></div>
                  <div>
                    <div className="toc-num">{cat.num}</div>
                    <div className="toc-title">{cat.title}</div>
                    <div className="toc-count">{cat.sub.length} sub-pagina's</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
      <DeepSection cat={CATEGORIES[0]}/>
      <DeepSection cat={CATEGORIES[1]} alt/>
      <TalenBanner/>
      <DeepSection cat={CATEGORIES[2]}/>
      <DeepSection cat={CATEGORIES[3]} alt/>
      <div className="diensten-foto-banner">
        <div className="diensten-foto-overlay">
          <div className="wrap">
            <div className="diensten-banner-eyebrow">Onze aanpak</div>
            <h2 style={{ color: '#fff', margin: '12px 0 0' }}>Samen werken aan <span style={{ color: '#7eb3ff' }}>structurele kwaliteit</span>.</h2>
          </div>
        </div>
      </div>
      <Faq/>
      <Contact/>
    </>
  );
}

function OverPage() {
  const fundamenten = [
    { t: 'Analyse', d: 'We beginnen altijd met een grondige analyse - van de organisatie én van het vraagstuk dat er ligt. We brengen in kaart wat er speelt, waar kansen liggen en wat beter kan. Zo weten we precies waar we het verschil kunnen maken.' },
    { t: 'Advies', d: 'Op basis van onze analyse geven we helder, eerlijk en praktisch advies. Geen standaardoplossingen, maar aanbevelingen die echt passen bij uw organisatie en uw mensen.' },
    { t: 'Actie', d: 'Advies zonder uitvoering heeft geen waarde. Daarom zetten we samen met u concrete acties uit. We begeleiden het proces van begin tot eind en zorgen dat het ook echt gebeurt en geborgd is.' },
  ];
  return (
    <>
      <PageHero
        eyebrow="Over ons"
        title={<>Minder zorgen over de organisatie. <span className="accent">Meer ruimte voor goede zorg.</span></>}
        sub="Met jarenlange ervaring in de zorgsector ondersteunen wij zorgorganisaties bij het realiseren van duurzame resultaten - van kwaliteit en veiligheid tot strategie, processen en organisatieontwikkeling. Wij gaan verder dan advies: wij werken zij aan zij met uw organisatie aan concrete verbeteringen die beklijven. Geen standaardoplossingen, maar aanpak op maat voor de uitdagingen van vandaag én morgen."
      />
      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          <div className="over-grid">
            <div className="over-text">
              <p>Als gespecialiseerd zorgadviesbureau richten wij ons op kwaliteitsmanagement, beleidsontwikkeling, certificering en het begeleiden van verbetertrajecten - waaronder IGJ- en GGD-trajecten. Daarnaast ondersteunen wij organisaties bij aanbestedingen en contracteringen, zodat zij goed voorbereid en succesvol kunnen deelnemen aan inkoop- en contractprocessen.</p>
              <p>Ook voeren wij tevredenheidsonderzoeken uit, waarmee we waardevolle inzichten bieden in de ervaringen van cliënten, medewerkers en samenwerkingspartners. Zo helpen we organisaties om gericht te verbeteren en keuzes te maken die echt impact hebben.</p>
              <p>Door onze jarenlange ervaring hebben wij zowel grote als kleine zorginstellingen mogen begeleiden. Deze brede praktijkervaring zorgt ervoor dat wij snel de kern van een vraagstuk begrijpen en passende oplossingen kunnen bieden. Geen organisatie is hetzelfde, en daarom werken wij altijd met maatwerk dat aansluit bij de dagelijkse praktijk.</p>
              <p>Onze kracht ligt in een combinatie van deskundigheid, betrokkenheid en een praktische aanpak. Wij denken mee op strategisch niveau, maar zorgen er ook voor dat verbeteringen daadwerkelijk worden uitgevoerd en geborgd binnen teams en organisaties.</p>
              <p style={{ fontWeight: 500, color: 'var(--navy)', fontSize: 18 }}>Wij geloven dat kwaliteit in de zorg een continu proces is van ontwikkelen, verbeteren en samenwerken. Daarbij staat één uitgangspunt altijd centraal: <em style={{ color: 'var(--blue)' }}>Minder zorgen over de organisatie. Meer ruimte voor goede zorg.</em></p>
            </div>
            <div className="over-side">
              <div className="over-stat">
                <div className="over-stat-num">10+</div>
                <div className="over-stat-lbl">Jaar ervaring in de zorg</div>
              </div>
              <div className="over-stat">
                <div className="over-stat-num">50+</div>
                <div className="over-stat-lbl">Begeleide zorgorganisaties</div>
              </div>
              <div className="over-stat">
                <div className="over-stat-num">10</div>
                <div className="over-stat-lbl">Talen voor cliëntonderzoek</div>
              </div>
              <div className="over-stat">
                <div className="over-stat-num">&lt;1d</div>
                <div className="over-stat-lbl">Reactietijd op uw vraag</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="alt">
        <div className="wrap">
          <div className="section-head">
            <div className="section-eyebrow">Onze werkwijze</div>
            <h2>De drie A's, <span className="accent">in alles wat we doen</span>.</h2>
            <p className="section-sub">Elke zorgorganisatie verdient een sterke partner. ProfSmart werkt altijd vanuit de <strong>drie A's</strong>: Analyse, Advies en Actie. Samen vormen zij de basis van alles wat we doen.</p>
          </div>
          <div className="why-grid">
            {fundamenten.map((f, i) => (
              <div className="why-card" key={f.t}>
                <div className="ic" style={{ background: i === 1 ? 'var(--blue)' : 'var(--navy)' }}>A</div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Contact/>
    </>
  );
}

function VacaturesPage() {
  const [open, setOpen] = useState(0);
  const vacatures = [
    {
      titel: 'Junior Kwaliteit- en Beleidsadviseur',
      uren: '16 uur per week',
      type: 'Parttime',
      locatie: 'Hybride · Nederland',
      niveau: 'HBO',
      pitch: 'Net afgestudeerd of enige ervaring? Bouw mee aan de kwaliteit van Nederlandse zorgorganisaties.',
      intro: 'Ben jij net afgestudeerd of heb je al enige werkervaring en wil je bijdragen aan het verbeteren van kwaliteit en beleid binnen de zorg? Heb je affiniteit met bedrijfsprocessen én met de dynamiek van verschillende zorgomgevingen? Dan zijn wij op zoek naar jou!',
      doen: 'Als Junior Kwaliteit- en Beleidsadviseur werk je aan het bewaken en verbeteren van processen, zowel intern als bij diverse zorgorganisaties. Je krijgt al snel eigen verantwoordelijkheden en doet brede ervaring op binnen verschillende zorgdomeinen - zoals jeugdzorg, verpleeghuizen, wijkzorg en woonvoorzieningen voor jongeren en mensen met een beperking.',
      taken: [
        'Zelfstandig opstellen van verbeterplannen',
        'Analyseren van werkprocessen en aandragen van verbetervoorstellen',
        'Onderhouden en actualiseren van kwaliteitshandboeken',
        'Ondersteunen van klanten bij externe audits',
        'Meewerken aan audits en kwaliteitscontroles',
        'Signaleren van knelpunten en bijdragen aan oplossingen',
        'Opstellen en bijhouden van documentatie en rapportages',
      ],
      profiel: [
        'Een afgeronde HBO-opleiding',
        'Net afgestudeerd of enige relevante werkervaring',
        'Affiniteit met bedrijfsprocessen, kwaliteit en beleid',
        'Interesse in of ervaring met verschillende zorgdomeinen',
        'Gestructureerd werken met oog voor detail',
        'Analytisch, leergierig en proactief',
        'Zelfstandig én in teamverband kunnen werken',
      ],
      bieden: [
        'Een parttime functie van 16 uur per week',
        'Hybride werken',
        'Afwisselend werk binnen verschillende zorgorganisaties',
        'Sterke ontwikkelmogelijkheden binnen de zorgsector',
        'Begeleiding en coaching tot volwaardig adviseur',
        'Marktconforme arbeidsvoorwaarden',
      ],
    },
    {
      titel: 'Senior Beleids- en Kwaliteitsadviseur',
      uren: '16 uur per week',
      type: 'Parttime',
      locatie: 'Landelijk · Hybride',
      niveau: 'HBO',
      pitch: 'Minimaal 5 jaar zorgervaring? Wees het strategische gezicht van ProfSmart richting bestuurders in heel Nederland.',
      intro: 'Als Senior Beleids- en Kwaliteitsadviseur ben je het strategische gezicht van ProfSmart richting onze klanten in de zorg. Je adviseert bestuurders en managers over beleid, kwaliteit en toezicht - en je weet hoe je een organisatie klaarstoomt voor een IGJ-inspectie, door een HKZ-traject loodst of begeleidt bij een rechtmatigheidsonderzoek. In 16 uur per week lever jij scherp, doelgericht advies. Je werkt zelfstandig, reist door het land en bouwt duurzame relaties op met de zorgorganisaties die wij begeleiden.',
      doen: 'Je pakt complexe beleids- en kwaliteitsvraagstukken op bij uiteenlopende zorgorganisaties - van verpleeghuizen en thuiszorg tot ggz-instellingen en jeugdzorg. Jij bent de adviseur die bestuurders scherp houdt en organisaties daadwerkelijk verder brengt.',
      taken: [
        'Strategisch adviseren van bestuurders en managers binnen zorgorganisaties',
        'Begeleiden van HKZ- en ISO-certificeringstrajecten',
        'Adviseren en voorbereiden bij IGJ-toezichttrajecten en verbeterplannen',
        'Ondersteunen bij GGD-trajecten en toezichtmomenten',
        'Uitvoeren en begeleiden van rechtmatigheidsonderzoeken',
        'Vertalen van zorgregelgeving naar werkbare beleidsdocumenten en procedures',
        'Opstellen van adviesnota\'s, beleidsstukken en managementrapportages',
        'Intern bijdragen aan de kwaliteitsborging van ProfSmart zelf',
      ],
      profiel: [
        'HBO werk- en denkniveau, bij voorkeur bedrijfskunde of vergelijkbaar',
        'Minimaal 5 jaar ervaring als adviseur in de zorgsector',
        'Bewezen ervaring met HKZ, ISO, GGD-trajecten, IGJ-toezicht of rechtmatigheidsonderzoek',
        'Sterk strategisch denkvermogen en het lef om bestuurders scherp te adviseren',
        'Uitstekende communicatieve vaardigheden in het Nederlands, mondeling en schriftelijk',
        'Zelfstandig, reisbereid en thuis in de complexiteit van het zorglandschap',
      ],
      bieden: [
        'Marktconform salaris op basis van ervaring en 16 uur',
        'Landelijk werken met volledige reiskostenvergoeding',
        'Flexibele werktijden en hybride werken mogelijk',
        'Hecht team met korte lijnen en veel eigen regie',
        'Afwisselend werk bij uiteenlopende zorgorganisaties door heel Nederland',
        'Ruimte voor opleiding en vakinhoudelijke ontwikkeling',
      ],
    },
  ];
  return (
    <>
      <PageHero
        eyebrow="Werken bij ProfSmart"
        title={<>Bouw mee aan <span className="accent">kwaliteitszorg</span> in heel Nederland.</>}
        sub="Bij ProfSmart werk je aan échte verbeteringen binnen een grote variatie aan zorgorganisaties. Korte lijnen, persoonlijke ontwikkeling en ruimte om je eigen koers te bepalen."
      />
      <section style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="vacs-head">
            <div>
              <h2 style={{ fontSize: 32 }}>Open vacatures</h2>
              <p style={{ color: 'var(--muted)', fontSize: 16, margin: '8px 0 0' }}>{vacatures.length} openstaande positie{vacatures.length === 1 ? '' : 's'}</p>
            </div>
            <a href="#/contact" className="cta ghost">Open sollicitatie <Icon.Arrow size={14}/></a>
          </div>
          <div className="vac-list">
            {vacatures.map((v, i) => (
              <div key={v.titel} className={`vac-card ${open === i ? 'open' : ''}`}>
                <div className="vac-head" onClick={() => setOpen(open === i ? -1 : i)}>
                  <div className="vac-ic"><Icon.Sparkle size={22}/></div>
                  <div className="vac-info">
                    <div className="vac-title">{v.titel}</div>
                    <div className="vac-meta">
                      <span><Icon.Clock size={13}/> {v.uren}</span>
                      <span><Icon.Pin size={13}/> {v.locatie}</span>
                      <span className="badge">{v.type}</span>
                      <span className="badge alt">{v.niveau}</span>
                    </div>
                    <div className="vac-pitch">{v.pitch}</div>
                  </div>
                  <div className="vac-toggle"><Icon.Plus/></div>
                </div>
                <div className="vac-body">
                  <div className="vac-section">
                    <p>{v.intro}</p>
                  </div>
                  <div className="vac-section">
                    <h5>Wat ga je doen?</h5>
                    <p>{v.doen}</p>
                    <ul>
                      {v.taken.map(t => <li key={t}><Icon.Check size={14}/>{t}</li>)}
                    </ul>
                  </div>
                  <div className="vac-twocol">
                    <div className="vac-section">
                      <h5>Wie ben jij?</h5>
                      <ul>
                        {v.profiel.map(t => <li key={t}><Icon.Check size={14}/>{t}</li>)}
                      </ul>
                    </div>
                    <div className="vac-section">
                      <h5>Wat bieden wij?</h5>
                      <ul>
                        {v.bieden.map(t => <li key={t}><Icon.Check size={14}/>{t}</li>)}
                      </ul>
                    </div>
                  </div>
                  <div style={{ padding: '28px', background: 'var(--bg-warm)', borderRadius: 14, marginTop: 8 }}>
                    <div className="vac-apply-t" style={{ marginBottom: 20 }}>Solliciteer direct</div>
                    <SollicitatieForm vacatureTitel={v.titel}/>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="alt">
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 48 }}>
            <div className="section-eyebrow">Geen passende vacature?</div>
            <h2>Stuur ons een <span className="accent">open sollicitatie</span>.</h2>
            <p className="section-sub">Wij groeien gestaag en kijken altijd uit naar betrokken professionals die de zorg een stap verder willen helpen.</p>
          </div>
          <div style={{ maxWidth: 680, margin: '0 auto' }}>
            <SollicitatieForm vacatureTitel="Open sollicitatie"/>
          </div>
        </div>
      </section>
    </>
  );
}

// =================== CONTACT FORM ===================
function ContactForm() {
  const [form, setForm] = useState({ naam: '', organisatie: '', email: '', telefoon: '', onderwerp: '', bericht: '' });
  const [status, setStatus] = useState('idle');
  const [errorMsg, setErrorMsg] = useState('');
  const update = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setStatus('loading'); setErrorMsg('');
    const data = new FormData();
    data.append('type', 'contact');
    data.append('website', ''); // honeypot
    Object.entries(form).forEach(([k, v]) => data.append(k, v));
    try {
      const res = await fetch('submit.php', { method: 'POST', body: data });
      const json = await res.json();
      if (json.success) setStatus('success');
      else { setStatus('error'); setErrorMsg(json.error || 'Er is iets misgegaan.'); }
    } catch { setStatus('error'); setErrorMsg('Kan geen verbinding maken. Probeer het later opnieuw.'); }
  };

  if (status === 'success') return (
    <div className="form-success">
      <Icon.CheckCircle size={48}/>
      <h3>Bericht verzonden!</h3>
      <p>Wij nemen binnen één werkdag contact met u op.</p>
    </div>
  );
  return (
    <form className="ps-form" onSubmit={submit} noValidate>
      <input type="text" name="website" style={{ display: 'none' }} tabIndex="-1" autoComplete="off"/>
      <div className="form-row">
        <div className="form-group"><label>Naam *</label><input type="text" name="naam" value={form.naam} onChange={update} required placeholder="Uw naam"/></div>
        <div className="form-group"><label>Organisatie</label><input type="text" name="organisatie" value={form.organisatie} onChange={update} placeholder="Naam van uw organisatie"/></div>
      </div>
      <div className="form-row">
        <div className="form-group"><label>E-mailadres *</label><input type="email" name="email" value={form.email} onChange={update} required placeholder="uw@email.nl"/></div>
        <div className="form-group"><label>Telefoonnummer</label><input type="tel" name="telefoon" value={form.telefoon} onChange={update} placeholder="+31 6 ..."/></div>
      </div>
      <div className="form-group">
        <label>Onderwerp</label>
        <select name="onderwerp" value={form.onderwerp} onChange={update}>
          <option value="">Selecteer een onderwerp</option>
          <option>Kwaliteit &amp; Certificering</option>
          <option>Contractering</option>
          <option>Zorgmanagement</option>
          <option>Kwaliteitstrajecten</option>
          <option>Algemene vraag</option>
        </select>
      </div>
      <div className="form-group"><label>Bericht *</label><textarea name="bericht" value={form.bericht} onChange={update} required placeholder="Hoe kunnen wij u helpen?"/></div>
      {status === 'error' && <div className="form-error">{errorMsg}</div>}
      <div><button type="submit" className="cta lg" disabled={status === 'loading'}>{status === 'loading' ? 'Verzenden...' : <span style={{display:'flex',alignItems:'center',gap:8}}>Verstuur bericht <Icon.Arrow size={16}/></span>}</button></div>
    </form>
  );
}

// =================== SOLLICITATIE FORM ===================
function SollicitatieForm({ vacatureTitel }) {
  const [form, setForm] = useState({ naam: '', email: '', telefoon: '', linkedin: '', motivatie: '' });
  const [cv, setCv] = useState(null);
  const [akkoord, setAkkoord] = useState(false);
  const [status, setStatus] = useState('idle');
  const [errorMsg, setErrorMsg] = useState('');
  const update = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (!akkoord) { setErrorMsg('Geef akkoord voor verwerking persoonsgegevens.'); setStatus('error'); return; }
    setStatus('loading'); setErrorMsg('');
    const data = new FormData();
    data.append('type', 'sollicitatie');
    data.append('website', ''); // honeypot
    data.append('vacature', vacatureTitel || '');
    Object.entries(form).forEach(([k, v]) => data.append(k, v));
    data.append('akkoord', '1');
    if (cv) data.append('cv', cv);
    try {
      const res = await fetch('submit.php', { method: 'POST', body: data });
      const json = await res.json();
      if (json.success) setStatus('success');
      else { setStatus('error'); setErrorMsg(json.error || 'Er is iets misgegaan.'); }
    } catch { setStatus('error'); setErrorMsg('Kan geen verbinding maken. Probeer het later opnieuw.'); }
  };

  if (status === 'success') return (
    <div className="form-success">
      <Icon.CheckCircle size={48}/>
      <h3>Sollicitatie ontvangen!</h3>
      <p>Bedankt voor je interesse. We nemen zo snel mogelijk contact met je op.</p>
    </div>
  );
  return (
    <form className="ps-form" onSubmit={submit} noValidate>
      <input type="text" name="website" style={{ display: 'none' }} tabIndex="-1" autoComplete="off"/>
      <div className="form-row">
        <div className="form-group"><label>Naam *</label><input type="text" name="naam" value={form.naam} onChange={update} required placeholder="Je naam"/></div>
        <div className="form-group"><label>E-mailadres *</label><input type="email" name="email" value={form.email} onChange={update} required placeholder="je@email.nl"/></div>
      </div>
      <div className="form-row">
        <div className="form-group"><label>Telefoonnummer</label><input type="tel" name="telefoon" value={form.telefoon} onChange={update} placeholder="+31 6 ..."/></div>
        <div className="form-group"><label>LinkedIn profiel</label><input type="url" name="linkedin" value={form.linkedin} onChange={update} placeholder="linkedin.com/in/jouwprofiel"/></div>
      </div>
      <div className="form-group"><label>Motivatie *</label><textarea name="motivatie" value={form.motivatie} onChange={update} required placeholder="Waarom wil je bij ProfSmart werken?" style={{ minHeight: 160 }}/></div>
      <div className="form-group">
        <label>CV bijvoegen <span style={{ fontWeight: 400, color: 'var(--muted)' }}>(PDF, DOC of DOCX, max 5 MB)</span></label>
        <label className="form-file-label">
          <Icon.Doc size={18}/>
          <span>{cv ? cv.name : 'Klik om een bestand te kiezen'}</span>
          {cv && <span className="form-file-name">Geselecteerd</span>}
          <input type="file" accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" onChange={(e) => setCv(e.target.files[0] || null)}/>
        </label>
      </div>
      <label className="form-checkbox">
        <input type="checkbox" checked={akkoord} onChange={(e) => setAkkoord(e.target.checked)}/>
        Ik ga akkoord met de verwerking van mijn persoonsgegevens voor deze sollicitatieprocedure.
      </label>
      {status === 'error' && <div className="form-error">{errorMsg}</div>}
      <div><button type="submit" className="cta lg" disabled={status === 'loading'}>{status === 'loading' ? 'Verzenden...' : <span style={{display:'flex',alignItems:'center',gap:8}}>Sollicitatie versturen <Icon.Arrow size={16}/></span>}</button></div>
    </form>
  );
}

function ContactPage() {
  return (
    <>
      <PageHero
        eyebrow="Contact"
        title={<>Plan een <span className="accent">vrijblijvend gesprek</span>.</>}
        sub="Wij beantwoorden uw vragen graag en denken vrijblijvend met u mee. Reactie binnen één werkdag."
      />
      <section>
        <div className="wrap">
          <div className="contact-grid">
            <div>
              <h2 style={{ fontSize: 'clamp(22px,3vw,32px)', marginBottom: 8 }}>Stuur ons een bericht</h2>
              <p style={{ color: 'var(--muted)', fontSize: 15, marginBottom: 32 }}>Vul het formulier in en wij nemen binnen één werkdag contact met u op.</p>
              <ContactForm/>
            </div>
            <div className="contact-info-card">
              <h4>Liever direct contact?</h4>
              <div className="ci-row"><div className="ci-icon"><Icon.Phone size={16}/></div><div><div className="ci-label">Telefoon</div><div className="ci-value"><a href="tel:+31641662679" style={{color:'inherit'}}>+31 6 41662679</a></div></div></div>
              <div className="ci-row"><div className="ci-icon"><Icon.Mail size={16}/></div><div><div className="ci-label">E-mail</div><div className="ci-value"><a href="mailto:info@profsmart.nl" style={{color:'inherit'}}>info@profsmart.nl</a></div></div></div>
              <div className="ci-row"><div className="ci-icon"><Icon.Clock size={16}/></div><div><div className="ci-label">Reactietijd</div><div className="ci-value">Binnen één werkdag</div></div></div>
              <div className="ci-row"><div className="ci-icon"><Icon.Pin size={16}/></div><div><div className="ci-label">Werkgebied</div><div className="ci-value">Heel Nederland</div></div></div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// =================== DIENST DETAIL PAGE ===================
function SubDetailSection({ s, alt }) {
  return (
    <section className={alt ? 'alt' : ''}>
      <div className="wrap">
        {s.eyebrow && <div className="section-eyebrow" style={{ marginBottom: 10 }}>{s.eyebrow}</div>}
        <h2 style={{ fontSize: 'clamp(26px, 3.5vw, 42px)', marginBottom: s.nav && s.title !== s.nav ? 8 : 20 }}>{s.nav || s.title}</h2>
        {s.nav && s.title !== s.nav && <p style={{ fontSize: 18, fontWeight: 600, color: 'var(--navy)', marginBottom: 20, lineHeight: 1.3 }}>{s.title}</p>}
        <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.65, maxWidth: 740, marginBottom: 36 }}>{s.intro}</p>
        {s.unique && (
          <div style={{ background: 'var(--tint)', borderRadius: 12, padding: '16px 22px', display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 32, maxWidth: 640 }}>
            <div style={{ color: 'var(--blue)', flexShrink: 0, marginTop: 2 }}><Icon.Sparkle size={22}/></div>
            <div style={{ fontSize: 15, color: 'var(--navy)', fontWeight: 500, lineHeight: 1.55 }}>{s.unique}</div>
          </div>
        )}
        {s.steps && (
          <div style={{ marginBottom: 36 }}>
            <h4 style={{ fontSize: 15, fontWeight: 700, color: 'var(--navy)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 20 }}>Hoe wij werken</h4>
            <div className="stages-grid">
              {s.steps.map((st, i) => (
                <div key={i} className="stage-card">
                  {st.num
                    ? <div className="stage-num-label">{st.num}</div>
                    : <div className="stage-num" style={{ background: i === 0 ? 'var(--navy)' : 'var(--tint)', color: i === 0 ? '#fff' : 'var(--blue)' }}>0{i + 1}</div>
                  }
                  <h4>{st.t}</h4>
                  <p style={{ fontStyle: 'italic' }}>{st.d}</p>
                </div>
              ))}
            </div>
          </div>
        )}
        {s.meerwaarde && (
          <div style={{ marginBottom: 36 }}>
            <h4 style={{ fontSize: 15, fontWeight: 700, color: 'var(--navy)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>Wat u van ons kunt verwachten</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              {s.meerwaarde.map((m, i) => (
                typeof m === 'string'
                  ? <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink)', padding: '12px 18px', borderBottom: '1px solid var(--line)' }}>
                      <span style={{ color: 'var(--blue)', flexShrink: 0, marginTop: 2 }}><Icon.Check size={16}/></span>
                      {m}
                    </li>
                  : <li key={i} style={{ padding: '14px 18px', borderBottom: i < s.meerwaarde.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--navy)', marginBottom: 3 }}>{m.t}</div>
                      <div style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.5 }}>{m.d}</div>
                    </li>
              ))}
            </ul>
          </div>
        )}
        {s.topics && (
          <div style={{ marginBottom: 36 }}>
            <h4 style={{ fontSize: 15, fontWeight: 700, color: 'var(--navy)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>Onderwerpen</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {s.topics.map(m => (
                <li key={m} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink)' }}>
                  <span style={{ color: 'var(--blue)', flexShrink: 0, marginTop: 2 }}><Icon.Check size={16}/></span>
                  {m}
                </li>
              ))}
            </ul>
          </div>
        )}
        {s.zoWerkt && (
          <div style={{ marginTop: 48 }}>
            <h3 style={{ fontSize: 'clamp(20px, 2.5vw, 28px)', fontWeight: 700, color: 'var(--navy)', marginBottom: 12 }}>{s.zoWerkt.heading || 'Zo werkt ProfSmart'}</h3>
            <p style={{ fontSize: 16, color: 'var(--muted)', marginBottom: 28, maxWidth: 620 }}>{s.zoWerkt.intro}</p>
            <div className="zo-werkt-grid">
              {s.zoWerkt.steps.map((st, i) => (
                <div key={i} className="zo-werkt-step">
                  <div className="zo-werkt-num">{st.num}</div>
                  <h4>{st.t}</h4>
                  <p>{st.d}</p>
                </div>
              ))}
            </div>
            {s.zoWerkt.quote && (
              <blockquote className="zo-werkt-quote">
                <p>"{s.zoWerkt.quote.text}"</p>
                <cite>— {s.zoWerkt.quote.author}</cite>
              </blockquote>
            )}
          </div>
        )}
        {s.cta && (
          <div style={{ background: 'var(--tint)', border: '1px solid rgba(31,107,255,0.15)', borderRadius: 14, padding: '20px 26px', marginTop: 36, maxWidth: 580 }}>
            <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--navy)', marginBottom: 6 }}>{s.cta.t}</div>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>
              {s.cta.d} <a href="#/contact" style={{ color: 'var(--blue)', fontWeight: 600 }}>Neem contact op</a>
            </p>
          </div>
        )}
      </div>
    </section>
  );
}

function DienstDetailPage({ cat, subIndex }) {
  const I = Icon[cat.icon];
  useEffect(() => {
    if (subIndex !== null && subIndex !== undefined && !isNaN(subIndex)) {
      setTimeout(() => {
        const el = document.getElementById(`sub-${subIndex}`);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 80);
    }
  }, [subIndex]);
  return (
    <>
      <section className="page-hero">
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <a href="#/diensten" style={{ color: 'var(--blue)', fontSize: 14, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              ← Alle diensten
            </a>
          </div>
          <div className="section-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--navy)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <I size={15}/>
            </span>
            {cat.num} - Wat wij doen
          </div>
          <h1 style={{ marginTop: 14 }}>{cat.title}</h1>
          <p style={{ maxWidth: 680, marginTop: 16 }}>{cat.intro}</p>
          <div style={{ display: 'flex', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#/contact" className="cta lg">Plan vrijblijvend gesprek <Icon.Arrow/></a>
            <a href="#/diensten" className="cta lg ghost">Alle diensten</a>
          </div>
        </div>
      </section>
      <div style={{ background: 'var(--tint)', borderTop: '1px solid rgba(0,0,0,0.06)', borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
        <div className="wrap" style={{ padding: '18px 32px', display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          {cat.sub.map((s, i) => (
            <a key={s.slug} href={`#sub-${i}`} onClick={(e) => { e.preventDefault(); document.getElementById(`sub-${i}`).scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
              style={{ fontSize: 14, fontWeight: 500, color: 'var(--blue)', textDecoration: 'none' }}>
              {s.nav || s.title}
            </a>
          ))}
        </div>
      </div>
      {cat.sub.map((s, i) => (
        <div key={s.title} id={`sub-${i}`}>
          <SubDetailSection s={s} alt={i % 2 !== 0} />
        </div>
      ))}
      {cat.id === 'kwaliteit' && <TalenBanner/>}
      <Contact/>
    </>
  );
}

// =================== CLIENTS CAROUSEL ===================
function ClientsCarousel() {
  const doubled = [...CLIENTS, ...CLIENTS];
  return (
    <section className="clients-section">
      <div className="clients-track-outer">
        <div className="clients-track">
          {doubled.map((c, i) => (
            <a key={i} href={c.url} target="_blank" rel="noopener noreferrer" className="client-logo" aria-label={c.name}>
              <img src={c.logo} alt={c.name}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== REFERENTIES PAGE ===================
function ReferentiesPage() {
  return (
    <>
      <PageHero
        eyebrow="Referenties"
        title="Organisaties die ons vertrouwen"
        sub="ProfSmart begeleidt zorgorganisaties door heel Nederland. Hieronder een overzicht van organisaties waarvoor wij hebben mogen werken."
      />
      <section className="section-pad">
        <div className="wrap">
          <div className="ref-grid">
            {CLIENTS.map((c, i) => (
              <a key={i} href={c.url} target="_blank" rel="noopener noreferrer" className="ref-card" aria-label={c.name}>
                <img src={c.logo} alt={c.name}/>
                <span>{c.name}</span>
              </a>
            ))}
          </div>
          <div className="faq-cta" style={{ marginTop: 64 }}>
            <p>Wilt u ook samenwerken met ProfSmart?</p>
            <a href="#/contact" className="cta cta-primary">Neem contact op</a>
          </div>
        </div>
      </section>
    </>
  );
}

// =================== FAQ PAGE ===================
function FaqPage() {
  const [open, setOpen] = useState(null);
  return (
    <>
      <PageHero
        eyebrow="Veelgestelde vragen"
        title="Alles wat u wilt weten"
        sub="Staat uw vraag er niet bij? Neem gerust contact met ons op - wij reageren binnen één werkdag."
      />
      <section className="section-pad">
        <div className="wrap" style={{ maxWidth: 800 }}>
          <div className="faq-list">
            {FAQS.map((item, i) => (
              <div key={i} className={`faq-item${open === i ? ' faq-open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                  <span>{item.q}</span>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="faq-chevron">
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </button>
                {open === i && (
                  <div className="faq-a">{item.a}</div>
                )}
              </div>
            ))}
          </div>
          <div className="faq-cta">
            <p>Heeft u een andere vraag?</p>
            <a href="#/contact" className="cta cta-primary">Neem contact op</a>
          </div>
        </div>
      </section>
    </>
  );
}

// =================== NIEUWS PAGES ===================
function useNieuws() {
  const [data, setData] = useState(NIEUWS);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('news-api.php?action=list')
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(d => { if (d.success) setData(d.posts); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);
  return { data, loading };
}

function NieuwsPage() {
  const { data: nieuws, loading } = useNieuws();
  return (
    <>
      <PageHero
        eyebrow="Nieuws"
        title={<>Laatste nieuws van <span className="accent">ProfSmart</span>.</>}
        sub="Updates, inzichten en ontwikkelingen op het gebied van zorgkwaliteit en certificering."
      />
      <section className="section-pad">
        <div className="wrap">
          {loading ? (
            <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--muted)' }}>Laden...</div>
          ) : nieuws.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--muted)', fontSize: 16 }}>
              Momenteel zijn er geen nieuwsberichten.
            </div>
          ) : (
            <div className="news-grid">
              {nieuws.map(post => (
                <a key={post.slug} href={`#/nieuws/${post.slug}`} className="news-card">
                  <div className="news-card-top">
                    <span className="news-cat-badge">{post.category}</span>
                    <span className="news-card-date">{formatDate(post.date)}</span>
                  </div>
                  <h3>{post.title}</h3>
                  <p>{post.excerpt}</p>
                  <span className="news-read-more">Lees verder <Icon.Arrow size={14}/></span>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>
    </>
  );
}

function NieuwsDetailPage({ slug }) {
  const { data: nieuws, loading } = useNieuws();
  const post = nieuws.find(p => p.slug === slug);

  function renderBlock(block, i) {
    if (block.type === 'h2') return <h2 key={i} className="news-body-h2">{block.text}</h2>;
    if (block.type === 'p') return <p key={i} className="news-body-p">{block.text}</p>;
    if (block.type === 'ul') return (
      <ul key={i} className="news-body-ul">
        {block.items.map((item, j) => <li key={j}><Icon.Check size={14}/>{item}</li>)}
      </ul>
    );
    return null;
  }

  if (loading) return (
    <section className="page-hero">
      <div className="wrap" style={{ paddingBottom: 60, color: 'var(--muted)' }}>Laden...</div>
    </section>
  );

  if (!post) return <NieuwsPage/>;

  return (
    <>
      <section className="page-hero">
        <div className="wrap">
          <a href="#/nieuws" className="news-back">← Terug naar nieuws</a>
          <div className="news-detail-meta">
            <span className="news-cat-badge">{post.category}</span>
            <span className="news-card-date">{formatDate(post.date)}</span>
          </div>
          <h1 style={{ marginTop: 16 }}>{post.title}</h1>
          <p style={{ maxWidth: 680, marginTop: 16, color: 'var(--muted)', fontSize: 17 }}>{post.excerpt}</p>
        </div>
      </section>
      <section>
        <div className="wrap news-article">
          {post.body.map((block, i) => renderBlock(block, i))}
        </div>
      </section>
      <Contact/>
    </>
  );
}

// =================== APP ===================
function App() {
  const route = useRoute();
  let page;
  if (route === 'home' || route === '') page = <HomePage/>;
  else if (route === 'diensten') page = <DienstenPage/>;
  else if (route.startsWith('diensten/')) {
    const parts = route.split('/');
    const catId = parts[1];
    const subSlug = parts[2] || null;
    const cat = CATEGORIES.find(c => c.id === catId);
    const subIndex = subSlug ? cat?.sub.findIndex(s => s.slug === subSlug) : null;
    page = cat ? <DienstDetailPage cat={cat} subIndex={subIndex >= 0 ? subIndex : null}/> : <DienstenPage/>;
  }
  else if (route === 'over') page = <OverPage/>;
  else if (route === 'vacatures') page = <VacaturesPage/>;
  else if (route === 'contact') page = <ContactPage/>;
  else if (route === 'faq') page = <FaqPage/>;
  else if (route === 'referenties') page = <ReferentiesPage/>;
  else if (route === 'nieuws') page = <NieuwsPage/>;
  else if (route.startsWith('nieuws/')) page = <NieuwsDetailPage slug={route.replace('nieuws/', '')}/>;
  else page = <HomePage/>;
  return (
    <>
      <Header route={route}/>
      <main key={route}>{page}</main>
      <Footer/>
      <a
        href="https://wa.link/cxou9l"
        target="_blank"
        rel="noopener noreferrer"
        className="wa-fab"
        aria-label="Chat via WhatsApp"
      >
        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      </a>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
