// GetContent — twee kanten, één platform. Glas-kaarten met heldere uitleg voor
// opdrachtgevers en creators. Donkere sectie.
function TwoPaths({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const auth = window.useStore().auth;

  const check = (txt) => (
    <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14.5, color: 'var(--text-on-dark-muted)', marginBottom: 11 }}>
      <span style={{ width: 18, height: 18, flex: 'none', marginTop: 2, borderRadius: '50%', background: 'rgba(237,110,111,0.2)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <i data-lucide="check" style={{ width: 12, height: 12 }}></i>
      </span>
      <span>{txt}</span>
    </li>
  );

  const cardBase = {
    borderRadius: 'var(--radius-lg)', padding: '44px 38px', position: 'relative', overflow: 'hidden',
    backdropFilter: 'blur(var(--blur-glass))', WebkitBackdropFilter: 'blur(var(--blur-glass))',
    display: 'flex', flexDirection: 'column',
  };

  return (
    <section className="gc-dark-pattern" style={{ background: 'var(--surface-dark)', padding: 'var(--section-pad-y) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>Twee kanten, één platform</span>
          <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 'var(--lh-display)', color: 'var(--text-on-dark)' }}>Voor wie is GetContent?</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24 }} className="gc-paths-grid">
          {/* Opdrachtgevers — primair */}
          <div style={{ ...cardBase, background: 'var(--glass-on-dark)', border: '1px solid var(--glass-on-dark-border)' }}>
            <span style={{ alignSelf: 'flex-start', display: 'inline-block', fontSize: 12, fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', padding: '6px 14px', borderRadius: 'var(--radius-pill)', marginBottom: 22, background: 'rgba(237,110,111,0.18)', color: 'var(--accent)' }}>Opdrachtgevers</span>
            <h3 style={{ color: 'var(--text-on-dark)', fontSize: 'clamp(1.5rem, 3vw, 2rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.01em', marginBottom: 14 }}>Content binnen jouw budget</h3>
            <p style={{ color: 'var(--text-on-dark-muted)', fontSize: 15.5, lineHeight: 1.65, marginBottom: 26, maxWidth: 420 }}>
              Van particulier en starter tot gevestigd merk. Plaats je opdracht voor de prijs die bij jouw budget past, en geïnteresseerde creators reageren.
            </p>
            <ul style={{ listStyle: 'none', margin: '0 0 30px', padding: 0, flex: 1 }}>
              {check('Jij bepaalt zelf wat je voor de opdracht betaalt')}
              {check('Vergelijk creators op stijl, portfolio en beoordelingen')}
              {check('Gratis je opdracht plaatsen')}
            </ul>
            {/* Niet ingelogd → eerst naar het inlog-/aanmeldscherm; ingelogd → direct opdracht plaatsen */}
            <div><Button variant="primary" onClick={() => onNav(auth ? 'post' : 'login')} iconRight={<i data-lucide="arrow-right"></i>}>Plaats een opdracht</Button></div>
          </div>

          {/* Creators — secundair */}
          <div style={{ ...cardBase, background: 'var(--glass-on-dark)', border: '1px solid var(--glass-on-dark-border)' }}>
            <span style={{ alignSelf: 'flex-start', display: 'inline-block', fontSize: 12, fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', padding: '6px 14px', borderRadius: 'var(--radius-pill)', marginBottom: 22, background: 'rgba(245,243,239,0.08)', color: 'var(--text-on-dark-muted)' }}>Creators</span>
            <h3 style={{ color: 'var(--text-on-dark)', fontSize: 'clamp(1.5rem, 3vw, 2rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.01em', marginBottom: 14 }}>Opdrachten zonder koude acquisitie</h3>
            <p style={{ color: 'var(--text-on-dark-muted)', fontSize: 15.5, lineHeight: 1.65, marginBottom: 26, maxWidth: 420 }}>
              Verdien geld met waar je goed in bent. Alle beschikbare opdrachten staan op één plek. Jij kiest zelf op welke je reageert en bouwt ondertussen je portfolio uit.
            </p>
            <ul style={{ listStyle: 'none', margin: '0 0 30px', padding: 0, flex: 1 }}>
              {check('Geen koude acquisitie, de opdrachten staan er al')}
              {check('Jij kiest zelf op welke opdrachten je reageert')}
              {check('Veilig en op tijd uitbetaald')}
            </ul>
            <div><Button variant="inverse" onClick={() => onNav('signup')}>Word creator</Button></div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.TwoPaths = TwoPaths;