// GetContent — pagina "Over ons". Kort en krachtig: hero, het verhaal,
// het team, missie en CTA. Volledig responsive. Geen coral in de hero.
function AboutPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;

  return (
    <main style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <PageHero
        eyebrow="Over ons"
        title="Het begin"
        lead="Content laten maken hoeft geen dure, uitgebreide productie te zijn. Daarom draaien we het om: jij plaatst wat je nodig hebt en bepaalt vooraf de prijs, creators kiezen zelf of ze reageren."
        onNav={onNav}
      />

      {/* het verhaal */}
      <section style={{ background: 'var(--surface-page)' }}>
        <div style={{ maxWidth: 680, margin: '0 auto', padding: 'var(--section-pad-y-sm) var(--gutter)' }}>
          <span className="gc-eyebrow" style={{ marginBottom: 20 }}>Het verhaal</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', fontSize: 'clamp(1.0625rem, 1.5vw, 1.1875rem)', color: 'var(--text-body)', lineHeight: 1.7 }}>
            <p style={{ fontSize: 'clamp(1.25rem, 2.4vw, 1.5rem)', fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)', lineHeight: 1.5, letterSpacing: '-0.01em' }}>
              Het begon met een simpele vraag tussen twee vrienden: waarom is het eigenlijk zo moeilijk om een goede creator te vinden?
            </p>
            <p>
              Steyn liep daar steeds vaker tegenaan. Vanuit de evenementen- en muziekwereld had hij regelmatig content nodig: aftermovies, foto's, social content. Maar zodra hij op zoek ging, kwam hij vaak uit bij bureaus of partijen die simpelweg te duur waren voor het budget dat hij had.
            </p>
            <p>
              Hij dacht: er moeten toch genoeg losse creators zijn die dit kunnen maken? Makers die goed zijn, flexibel zijn en niet vastzitten aan een bureau. Alleen: waar vind je die?
            </p>
            <p>
              Robin kende precies de andere kant van dat probleem. Vanuit zijn werk als content creator in fashion, e-commerce en events zat hij midden in die wereld. Hij wist hoeveel creators er rondlopen met goede skills, goede apparatuur en tijd om opdrachten aan te pakken. Makers die graag meer klussen willen doen, maar vaak niet weten wie er op dat moment content nodig heeft.
            </p>
            <p>
              Het probleem was dus niet dat er geen vraag was. En ook niet dat er geen makers waren. Ze konden elkaar gewoon niet makkelijk vinden.
            </p>
            <p>
              Toen Steyn en Robin hun ervaringen naast elkaar legden, werd het ineens duidelijk. Aan de ene kant zijn er opdrachtgevers die content nodig hebben, maar niet altijd het budget hebben voor een bureau. Aan de andere kant zijn er creators die klaarstaan om werk te maken, maar geen centrale plek hebben waar relevante opdrachten binnenkomen.
            </p>
            <p style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>
              Daartussen zat precies de kans.
            </p>
            <p>
              Dat werd GetContent: een platform waar opdrachtgevers eenvoudig plaatsen wat ze nodig hebben, zelf de prijs bepalen en creators naar hén toe komen. Direct, laagdrempelig en vooraf duidelijk geprijsd.
            </p>
            <p>
              Voor opdrachtgevers die goede content willen, zonder dat het meteen een dure productie hoeft te zijn. En voor creators die hun skills willen inzetten voor echte opdrachten.
            </p>
          </div>
        </div>
      </section>

      {/* missie — korte zin */}
      <section style={{ background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', padding: 'var(--section-pad-y-sm) var(--gutter)', textAlign: 'center' }}>
          <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 16 }}>Onze missie</span>
          <p style={{ fontSize: 'clamp(1.5rem, 3.4vw, 2.4rem)', fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)', lineHeight: 1.4, letterSpacing: '-0.015em', textWrap: 'balance' }}>
            Content toegankelijk maken voor iedereen: <span style={{ color: 'var(--accent)' }}>ongeacht de grootte</span> van de opdracht of het budget.
          </p>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--surface-page)', padding: '0 0 var(--section-pad-y-sm)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div className="gc-dark-pattern" style={{
            position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-xl)',
            background: 'var(--surface-dark)', color: 'var(--text-on-dark)',
            padding: 'clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem)', textAlign: 'center',
          }}>
            <div aria-hidden style={{ position: 'absolute', bottom: -140, left: '50%', transform: 'translateX(-50%)', width: 520, height: 360, background: 'transparent', pointerEvents: 'none' }} />
            <div style={{ position: 'relative' }}>
              <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', color: 'var(--text-on-dark)', maxWidth: 580, margin: '0 auto' }}>
                Doe mee met GetContent
              </h2>
              <p className="gc-justify" style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-on-dark-muted)', maxWidth: 480, margin: '16px auto 30px' }}>
                Of je nu content zoekt of zelf maakt, je bent een paar klikken verwijderd van de match.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <Button variant="primary" size="lg" onClick={() => onNav('post')} iconRight={<i data-lucide="arrow-right"></i>}>Plaats een opdracht</Button>
                <Button variant="inverse" size="lg" onClick={() => onNav('signup')}>Meld je aan als creator</Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.AboutPage = AboutPage;