/* global React */

function InvitationStrip() {
  return (
    <section className="invitation">
      <div className="container invitation-inner">
        <div className="invitation-side">
          <div>, een uitnodiging, </div>
        </div>
        <div className="invitation-quote">
          Er zit een oude wijsheid in je buik, je bekken, je adem.
          <br />
          Niet iets om te <em className="italic" style={{ color: 'var(--terra-deep)' }}>repareren</em>,
          maar iets om opnieuw te <em className="italic" style={{ color: 'var(--terra-deep)' }}>ontmoeten</em>.
        </div>
        <div className="invitation-side right">
          <div>Vesta Therapie<br />Est. 2026</div>
        </div>
      </div>
    </section>);

}

function About() {
  return (
    <section className="section" id="about">
      <div className="container about">
        <div className="about-portrait">
          <img src={window.assetUrl("assets/rama-web.jpg")} alt="Rama Sprengers" className="about-portrait-img" />
        </div>
        <div className="about-copy reveal">
          <div className="eyebrow">Rama Sprengers · fysiotherapeut · sinds 2013</div>
          <h2 style={{ marginTop: 14 }}>
            Thuiskomen in je lijf:<br />
            waar anatomie, innerlijk <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: "400" }}>vuur</em> en{' '}
            <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: "400" }}>zachtheid</em>{' '}
            samenkomen.
          </h2>

          <div style={{ marginTop: 36 }}>
            <p>Mijn naam is Rama, ik ben 36 jaar, moeder en al sinds 2013 werkzaam als fysiotherapeut. In de afgelopen jaren heb ik ontzettend veel lichamen voorbij zien komen en behandeld. Van complexe klachten en spierfascie-problematiek tot intensieve revalidatie. Maar gaandeweg ontdekte ik dat de diepste heling vaak voorbij de spieren en gewrichten ligt. Ik leerde om verder te kijken dan de klacht en de mens altijd als een onlosmakelijk geheel te zien.







            </p>

            <h3 style={{ marginTop: 36, marginBottom: 14, fontSize: 'clamp(22px,2.4vw,28px)' }}>
              Het vuur van <em style={{ fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: "400" }}>Vesta</em>
            </h3>
            <p>
              Bij Vesta Therapie combineer ik mijn stevige medische basis met de
              transformerende kracht van zachtheid. De naam van mijn praktijk is met een
              reden gekozen: Vesta is de godin van de haard en het innerlijke, heilige
              vuur. Net zoals deze godin werk ik als therapeut vanuit mijn eigen kern en
              mijn eigen innerlijke vuur. Ik geloof erin dat jouw ware vitaliteit pas
              weer kan gaan stromen wanneer we met liefdevolle aandacht en zachtheid
              naar je lichaam durven te luisteren.
            </p>

            <h3 style={{ marginTop: 36, marginBottom: 14, fontSize: 'clamp(22px,2.4vw,28px)' }}>
              De brug tussen <em style={{ fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: 300 }}>weten</em> en <em style={{ fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: 300 }}>voelen</em>
            </h3>
            <p>
              Ik help je om uit je hoofd en terug in je lijf te zakken. In mijn
              behandelingen vloeien fysiotherapeutische kennis en een integrale visie
              naadloos in elkaar over:
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 18px' }}>
              {[
              ["Het fysieke fundament", "Mijn behandelingen steunen op een gedegen, onderbouwde kennis van het menselijk lichaam, anatomie en pathologie."],
              ["Kijken achter de klacht", "We focussen niet enkel op het bestrijden van een symptoom, maar gaan samen op zoek naar de diepere laag. Wat vertelt jouw lichaam je werkelijk?"],
              ["De kracht van verzachting", "Door het kalmeren van je zenuwstelsel, zoals de nervus vagus, brengen we de balans terug. Je lichaam krijgt de veiligheid en de zachtheid die het nodig heeft om te kunnen herstellen."]].
              map(([k, v], i) =>
              <li key={i} style={{ padding: '12px 0', borderTop: i === 0 ? '1px solid var(--rule)' : 'none', borderBottom: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '14px 1fr', gap: 14 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.18em', color: 'var(--terra)', paddingTop: 6 }}>0{i + 1}</span>
                  <span>
                    <strong style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 19, color: 'var(--ink)', display: 'block', marginBottom: 4 }}>{k}</strong>
                    <span style={{ color: 'var(--ink-soft)' }}>{v}</span>
                  </span>
                </li>
              )}
            </ul>

            <h3 style={{ marginTop: 36, marginBottom: 14, fontSize: 'clamp(22px,2.4vw,28px)' }}>
              Jouw veilige <em style={{ fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: 300 }}>haven</em>
            </h3>
            <p>
              In een wereld die vaak vraagt om <em>harder</em> en <em>sneller</em>, bied
              ik met Vesta Therapie een plek voor vertraging. Het is mijn missie om je,
              vanuit mijn eigen innerlijke vuur, te begeleiden naar meer zachtheid voor
              jezelf. We kijken naar het volledige plaatje en naar jou als heel mens.
            </p>

            <p className="italic" style={{ color: 'var(--terra-deep)', fontFamily: 'var(--font-serif)', fontSize: '1.35em', lineHeight: 1.4, fontWeight: 300, marginTop: 28 }}>
              Het is tijd om weer écht te gaan bewonen wie je bent.
              <br />Welkom thuis bij jezelf.
            </p>
          </div>

          <div className="credentials">
            <span className="credential">Fysiotherapeut sinds 2013</span>
            <span className="credential">CMD-THERAPIE</span>
            <span className="credential">Spierfascie</span>
            <span className="credential">ALGEMENE FYSIOTHERAPIE</span>
            <span className="credential">Longfysiotherapeut</span>
            <span className="credential">Burn-out</span>
            <span className="credential">Nervus vagus</span>
            <span className="credential">Fuego del Útero</span>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { InvitationStrip, About });