// GetContent — homepage content-secties: voordelen, CTA.

function ValueProps() {
  const props = [
    { icon: 'wallet', title: 'Jij bepaalt de prijs', body: 'Bepaal vooraf de prijs van je opdracht. Creators reageren daarop, niet andersom.' },
    { icon: 'shield-check', title: 'Veilig betalen', body: 'Betalingen lopen veilig via Stripe en worden pas vrijgegeven als jij akkoord geeft.' },
    { icon: 'sparkles', title: 'Transparant geregeld', body: 'Geen verborgen kosten. Vooraf weet je precies waar je aan toe bent.' },
  ];
  return (
    <section style={{ background: 'var(--surface-sunken)', padding: 'var(--section-pad-y) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }} className="gc-cards-3 gc-stagger">
        {props.map((p, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
              <i data-lucide={p.icon} style={{ width: 24, height: 24 }}></i>
            </span>
            <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)' }}>{p.title}</h3>
            <p style={{ fontSize: 16, color: 'var(--text-body)', lineHeight: 1.6 }}>{p.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTASection({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  // vol-donkere afsluiter: loopt naadloos door vanuit de live-showcase
  // (en vloeit daarna in de donkere footer) — geen kader, geen breuk
  return (
    <section className="gc-dark-pattern" style={{ background: 'var(--surface-dark)', color: 'var(--text-on-dark)', padding: 'clamp(3rem, 9vh, 5.5rem) 0 var(--section-pad-y)', textAlign: 'center', marginTop: -2 }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 'var(--lh-display)', color: 'var(--text-on-dark)', maxWidth: 620, margin: '0 auto' }}>
          Klaar om je content te krijgen?
        </h2>
        <p className="gc-justify" style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-on-dark-muted)', maxWidth: 520, margin: '18px auto 32px' }}>
          Plaats je eerste opdracht in een paar minuten. Plaatsen is gratis; je betaalt pas als de klus geklaard is.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" className="gc-cta-glow" onClick={() => onNav('post')} iconRight={<i data-lucide="arrow-right"></i>}>Plaats een opdracht</Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ValueProps, CTASection });