// GetContent — "Voor creators": premium aanmeldpagina (geen creator-overzicht).
// Gericht op fotografen, videomakers, editors, UGC- en social content makers.
function CreatorsPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;

  const disciplines = [
    { icon: 'camera', title: 'Fotografen', desc: 'Product, lifestyle, events en campagnes.' },
    { icon: 'video', title: 'Videomakers', desc: 'Commercials, aftermovies en merkvideo’s.' },
    { icon: 'scissors', title: 'Editors', desc: 'Montage, kleurcorrectie en motion.' },
    { icon: 'smartphone', title: 'UGC creators', desc: 'Authentieke content die converteert.' },
    { icon: 'clapperboard', title: 'Social content', desc: 'Reels, shorts en TikToks die scrollen stoppen.' },
    { icon: 'megaphone', title: 'Paid social', desc: 'Ads en visuals die converteren.' },
  ];

  const benefits = [
    { icon: 'inbox', title: 'Opdrachten die bij je passen', desc: 'Reageer op opdrachten die passen bij jouw vakgebied, stijl en regio. Zonder zelf continu op zoek te hoeven naar nieuwe klanten.' },
    { icon: 'wallet', title: 'Eerlijk betaald', desc: 'Geen verborgen hoge marges. Vooraf is duidelijk waar je aan toe bent.' },
    { icon: 'shield-check', title: 'Zeker van je geld', desc: 'Betalingen lopen veilig via Stripe. De vergoeding staat vast voordat je begint, dus je hoeft nooit achter je geld aan.' },
    { icon: 'sparkles', title: 'Gratis profiel', desc: 'Bouw je portfolio, laat zien wat je kunt en word gevonden door opdrachtgevers in heel Nederland.' },
  ];

  const steps = [
    { n: 1, title: 'Maak je profiel', desc: 'Voeg je werk, vakgebied en specialisaties toe. In een paar minuten klaar.' },
    { n: 2, title: 'Reageer op opdrachten', desc: 'Vind opdrachten die bij je passen en laat weten dat je ze wilt doen.' },
    { n: 3, title: 'Word gekozen & lever', desc: 'Maak de content, lever op en word veilig uitbetaald.' },
  ];

  return (
    <main style={{ background: 'var(--surface-page)' }}>
      <PageHero
        eyebrow="Voor creators"
        title={<>Doe waar je goed in bent.<br />Wij brengen de opdrachten.</>}
        lead="Sluit je gratis aan bij het content-platform van Nederland en reageer op opdrachten die passen bij jouw vakgebied, stijl en regio."
        primary={{ label: 'Meld je gratis aan als creator', to: 'signup' }}
        onNav={onNav}
      />

      {/* disciplines */}
      <section style={{ background: 'var(--surface-page)', padding: 'var(--section-pad-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 48px' }}>
            <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>Voor wie</span>
            <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em' }}>Gemaakt voor makers</h2>
          </div>
          <div className="gc-disc-grid gc-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {disciplines.map((d, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 20, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
                  <i data-lucide={d.icon}></i>
                </span>
                <h3 style={{ fontSize: 16.5, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{d.title}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{d.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* voordelen */}
      <section style={{ background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', padding: 'var(--section-pad-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 48px' }}>
            <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>Waarom GetContent</span>
            <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em' }}>Meer maken, minder regelen</h2>
          </div>
          <div className="gc-cards-2 gc-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
            {benefits.map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 16, padding: 24, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, flex: 'none', borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
                  <i data-lucide={b.icon}></i>
                </span>
                <div>
                  <h3 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 6 }}>{b.title}</h3>
                  <p style={{ fontSize: 15, color: 'var(--text-body)', lineHeight: 1.6 }}>{b.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* zo werkt het */}
      <section style={{ background: 'var(--surface-page)', padding: 'var(--section-pad-y) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 48px' }}>
            <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>In 3 stappen</span>
            <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em' }}>Zo begin je</h2>
          </div>
          <div className="gc-cards-3 gc-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {steps.map((s) => (
              <div key={s.n} style={{ padding: 26, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: '50%', background: 'var(--gc-ink-800)', color: 'var(--text-on-dark)', fontSize: 18, fontWeight: 'var(--fw-extra)', marginBottom: 16 }}>{s.n}</span>
                <h3 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: 'var(--text-body)', lineHeight: 1.6 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--surface-page)', padding: '0 0 var(--section-pad-y)' }}>
        <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: 560, margin: '0 auto' }}>
                Klaar voor je volgende opdracht?
              </h2>
              <p className="gc-justify" style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-on-dark-muted)', maxWidth: 480, margin: '16px auto 30px' }}>
                Aanmelden is gratis en kost een paar minuten. Bouw je profiel en ontvang opdrachten die bij je passen.
              </p>
              <Button variant="primary" size="lg" onClick={() => onNav('signup')} iconRight={<i data-lucide="arrow-right"></i>}>Meld je gratis aan als creator</Button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.CreatorsPage = CreatorsPage;