/* eslint-disable */
// Middle sections: About Linda, Care for Women, Testimonials carousel

// ---- About Linda ----
const About = () =>
<section className="about" id="over">
    <div className="container">
      <Reveal className="about-media">
        <figure className="praktijk-frame">
          <img src="assets/praktijk.webp" alt="De praktijkruimte van Linda Adrichem in Heiloo"
            width="1047" height="941" loading="lazy" decoding="async" />
          <figcaption>De praktijk · Willibrordus Business Centrum, Heiloo</figcaption>
        </figure>
      </Reveal>
      <Reveal className="about-copy" delay={120}>
        <p className="eyebrow">Over Linda Adrichem</p>
        <h2>Van onderzoeker naar<br />hormoonspecialist</h2>

        <div className="signature-chip">
          <span className="signature-avatar">
            <img src="assets/linda.webp" alt="" width="825" height="952" loading="lazy" decoding="async" />
          </span>
          <span className="signature-text">
            <strong>Linda Adrichem MSc</strong>
            <small>Hormoonspecialist · Care for Women</small>
          </span>
        </div>

        <p>
          Linda woont met haar man en dochters in Heiloo. In 2026 startte ze hier haar
          praktijk. Als hormoonspecialist weet ze wat de impact van hormonale klachten
          is, en wat je eraan kunt doen.
        </p>
        <p>
          Linda is academisch opgeleid: sociologie (WO) en ergotherapie (HBO). Ze werkte
          jarenlang in het hoger onderwijs als docent en onderzoeker. Rond haar 46e merkte
          ze zelf wat de perimenopauze met je doet: trager schakelen, slechter slapen,
          minder energie. Als onderzoeker wilde ze weten hoe het zat. Ze zag hoeveel
          vrouwen tegen dezelfde dingen aanlopen, zonder goede hulp. Daarom volgde ze de
          opleiding tot hormoonspecialist bij Care for Women.
        </p>
        <p>Linda kijkt naar het hele plaatje. Bij lichamelijke klachten neemt ze ook leefstijl, stress en stemming mee. En bij mentale klachten wordt altijd de koppeling met de menstruatiecyclus gemaakt. Waar medische zorg nodig is, schakelt ze met je huisarts of een andere specialist. Uiteraard altijd in overleg.





      </p>

        <ul className="creds">
          <li><span className="check"><Icon.check style={{ width: 11, height: 11 }} /></span> Care for Women hormoonspecialist</li>
          <li><span className="check"><Icon.check style={{ width: 11, height: 11 }} /></span> Psychosociale basiskennis · PSBK (HBO)</li>
          <li><span className="check"><Icon.check style={{ width: 11, height: 11 }} /></span> Sociologie (WO)</li>
          <li><span className="check"><Icon.check style={{ width: 11, height: 11 }} /></span> Ergotherapie (HBO)</li>
        </ul>

        <div className="affiliations">
          <span className="affil-chip">Aangesloten bij</span>
          <span className="affil-chip">Care for Women</span>
          <span className="affil-chip">MBOG</span>
          <span className="affil-chip">RBCZ</span>
        </div>
      </Reveal>
    </div>
  </section>;


// ---- Care for Women section ----
const CareForWomen = () =>
<section className="cfw-section">
    <div className="container">
      <Reveal>
        <div className="cfw-section-logo">
          <CfWLogo width={320} color="#3E2942" />
        </div>
        <p className="eyebrow">Ondersteund door expertise</p>
        <h2>Onderdeel van<br />Care for Women</h2>
      </Reveal>
      <Reveal delay={120}>
        <p className="lead cfw-lead">
          Linda is aangesloten bij <strong>Care for Women</strong>, de grootste
          specialistische organisatie van Nederland op het gebied van vrouwen en hormonen.
        </p>
        <div className="cfw-stats">
          <div className="cfw-stat">
            <div className="big"><CountUp value="500.000+" /></div>
            <div className="lbl">vrouwen geholpen door een Care for Women-specialiste</div>
          </div>
          <div className="cfw-stat">
            <div className="big"><CountUp value="92%" /></div>
            <div className="lbl">beveelt de Care for Women-specialiste aan</div>
          </div>
          <div className="cfw-stat">
            <div className="big"><CountUp value="100+" /></div>
            <div className="lbl">vestigingen door heel Nederland</div>
          </div>
        </div>
        <p className="lead cfw-lead" style={{ marginTop: 28 }}>
          Aangesloten bij Care for Women betekent: opgeleid volgens dezelfde hoge
          standaard, met toegang tot de nieuwste kennis en richtlijnen.
        </p>
        <p className="cfw-link-line">
          Meer informatie:{' '}
          <a href="https://careforwomen.nl/" target="_blank" rel="noopener">
            careforwomen.nl →
          </a>
        </p>
      </Reveal>
    </div>
  </section>;


// ---- Testimonials carousel ----
const TESTIMONIALS = [
{
  quote: "Voor het eerst had iemand écht de tijd. Linda nam mijn klachten serieus en gaf me een plan waar ik wat aan heb. Geen vaag advies, maar duidelijke stappen.",
  attr: "Marieke · 52, Heiloo"
},
{
  quote: "Ik liep al een jaar met klachten waar ik niet uitkwam. Eén afspraak en ik wist wat er speelde. Rust, kennis en menselijke aandacht.",
  attr: "Annemiek · 49, Alkmaar"
},
{
  quote: "Geen taboes, geen haast. Ik kon alles bespreken zonder me ongemakkelijk te voelen. Dat had ik echt nodig.",
  attr: "Sanne · 47, Castricum"
}];


const Testimonials = () => {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((x) => (x + 1) % TESTIMONIALS.length), 6500);
    return () => clearInterval(t);
  }, [paused]);

  const go = (n) => setI((n + TESTIMONIALS.length) % TESTIMONIALS.length);

  return (
    <section className="testimonials"
    onMouseEnter={() => setPaused(true)}
    onMouseLeave={() => setPaused(false)}>
      <div className="container">
        <Reveal className="section-head">
          <p className="eyebrow">Wat vrouwen zeggen</p>
          <h2>Eindelijk gehoord</h2>
        </Reveal>

        <div className="testi-track">
          {TESTIMONIALS.map((t, idx) =>
          <div key={idx} className={`testi-slide ${idx === i ? 'is-active' : ''}`}
          aria-hidden={idx !== i}>
              <blockquote className="testi-quote">{t.quote}</blockquote>
              <div className="testi-attr">{t.attr}</div>
            </div>
          )}
        </div>

        <div className="testi-controls">
          <button className="testi-arrow" onClick={() => go(i - 1)} aria-label="Vorige">
            <Icon.arrowLeft />
          </button>
          <button className="testi-arrow" onClick={() => go(i + 1)} aria-label="Volgende">
            <Icon.arrowRight />
          </button>
          <div className="testi-dots">
            {TESTIMONIALS.map((_, idx) =>
            <button key={idx}
            className={`testi-dot ${idx === i ? 'is-active' : ''}`}
            onClick={() => setI(idx)}
            aria-label={`Naar verhaal ${idx + 1}`} />
            )}
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { About, CareForWomen, Testimonials });