// GetContent — pagina "Hoe het werkt". Uitgebreide uitleg per stap, plus een
// korte FAQ en CTA. Volledig responsive (rijen stapelen op mobiel).
function HowItWorksPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;

  const steps = [
    {
      step: 1, icon: 'pencil-line', cat: 'Plaatsen',
      title: 'Plaats je opdracht',
      body: 'Beschrijf in een paar regels wat je nodig hebt: het type content, je stijl, je deadline en de prijs die je ervoor wilt betalen. Creators zien je opdracht en reageren. Plaatsen is gratis; je betaalt pas wanneer je een creator kiest.',
      points: ['Kies een categorie: video, fotografie, reels, design…', 'Bepaal zelf de prijs', 'Live binnen enkele minuten'],
    },
    {
      step: 2, icon: 'users', cat: 'Kiezen',
      title: 'Kies je creator',
      body: 'Passende creators reageren op je opdracht. Vergelijk hun portfolio en beoordelingen, stel vragen via de chat en kies de creator die het beste bij je opdracht past.',
      points: ["Bekijk portfolio's en reviews", 'Vergelijk stijl en beoordelingen', 'Chat met creators voordat je kiest'],
    },
    {
      step: 3, icon: 'clapperboard', cat: 'Ontvangen',
      title: 'Ontvang je content',
      body: 'Je creator gaat aan de slag en levert de content op. De betaling staat veilig vast via Stripe en wordt pas vrijgegeven wanneer jij akkoord geeft op het resultaat. Niet tevreden? Vraag een revisie aan.',
      points: ['Veilige betaling via Stripe', 'Revisies tot je tevreden bent', 'Betaling pas vrij na jouw akkoord'],
    },
    {
      step: 4, icon: 'trending-up', cat: 'Groeien',
      title: 'Maak impact',
      body: 'Publiceer je nieuwe content en vergroot je bereik. Bevalt de samenwerking? Werk opnieuw met dezelfde creator of plaats je volgende opdracht in één klik.',
      points: ['Download in hoge kwaliteit', 'Werk opnieuw met je favorieten', 'Plaats je volgende opdracht in één klik'],
    },
  ];

  const faqs = [
    { q: 'Wat kost het om een opdracht te plaatsen?', a: 'Niets. Je opdracht plaatsen is volledig gratis; je betaalt pas wanneer je een creator kiest en de opdracht definitief maakt.' },
    { q: 'Wie bepaalt de prijs?', a: 'Jij. Je bepaalt zelf de prijs bij het plaatsen van je opdracht. Creators zien die prijs en kiezen of ze reageren, dus je komt nooit voor verrassingen te staan.' },
    { q: 'Hoe werkt de betaling?', a: 'De betaling loopt veilig via Stripe. Het bedrag staat vast zodra je een creator kiest en wordt pas vrijgegeven wanneer jij akkoord geeft op de geleverde content.' },
    { q: 'Wat als ik niet tevreden ben?', a: 'Je kunt revisies aanvragen tot de content klopt. Omdat de betaling pas na jouw akkoord wordt vrijgegeven, zit je nooit vast aan een resultaat waar je niet blij mee bent.' },
  ];

  return (
    <main style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <PageHero
        eyebrow="Hoe het werkt"
        title="Van opdracht tot content in vier stappen"
        lead="Direct en transparant. Zo gaat het van jouw opdracht naar content die klaar is om te delen."
        onNav={onNav}
      />

      {/* stappen — genummerde tijdlijn, geen kaarten */}
      <div className="gc-stagger" style={{ maxWidth: 760, margin: '0 auto', padding: 'var(--section-pad-y-sm) var(--gutter)' }}>
        {steps.map((s, i) => {
          const last = i === steps.length - 1;
          return (
            <div key={s.step} id={'stap-' + s.step} style={{ display: 'flex', gap: 'clamp(1.25rem, 3.5vw, 2.25rem)', scrollMarginTop: 90 }}>
              {/* nummer + verbindingslijn */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 'none' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 54, height: 54, flex: 'none', borderRadius: '50%', background: 'var(--gc-ink-800)', color: 'var(--text-on-dark)', fontSize: 19, fontWeight: 'var(--fw-extra)', letterSpacing: '-0.02em' }}>
                  {String(s.step).padStart(2, '0')}
                </span>
                {!last ? <span style={{ flex: 1, width: 2, background: 'var(--border-strong)', marginTop: 8 }} /> : null}
              </div>
              {/* inhoud */}
              <div style={{ paddingBottom: last ? 0 : 'clamp(2.25rem, 5vw, 3.5rem)', paddingTop: 4 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, flex: 'none', borderRadius: 'var(--radius-sm)', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
                    <i data-lucide={s.icon} style={{ width: 18, height: 18 }}></i>
                  </span>
                  <span style={{ fontSize: 12.5, fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{s.cat}</span>
                </div>
                <h2 style={{ fontSize: 'clamp(1.6rem, 3.4vw, 2.25rem)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-snug)', marginBottom: 12 }}>{s.title}</h2>
                <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 1.6, marginBottom: 20 }}>{s.body}</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {s.points.map((p, k) => (
                    <li key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 22, height: 22, flex: 'none', marginTop: 1, borderRadius: 'var(--radius-pill)', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
                        <i data-lucide="check" style={{ width: 13, height: 13 }}></i>
                      </span>
                      <span style={{ fontSize: 15.5, color: 'var(--text-strong)', fontWeight: 'var(--fw-medium)' }}>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>

      {/* FAQ */}
      <section id="faq" style={{ background: 'var(--surface-sunken)', padding: 'var(--section-pad-y-sm) 0', scrollMarginTop: 90 }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 12 }}>Veelgestelde vragen</span>
            <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em' }}>Goed om te weten</h2>
          </div>
          <div className="gc-stagger" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.map((f, i) => <FaqItem key={i} {...f} defaultOpen={i === 0} />)}
          </div>
        </div>
      </section>

      {window.CTASection ? <window.CTASection onNav={onNav} /> : null}
    </main>
  );
}

function FaqItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
      <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        padding: '18px 20px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
        fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)',
      }}>
        {q}
        <span style={{ flex: 'none', display: 'inline-flex', color: 'var(--accent)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}>
          <i data-lucide="chevron-down" style={{ width: 20, height: 20 }}></i>
        </span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, opacity: open ? 1 : 0, overflow: 'hidden', transition: 'max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out)' }}>
        <p style={{ padding: '0 20px 20px', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.6 }}>{a}</p>
      </div>
    </div>
  );
}

window.HowItWorksPage = HowItWorksPage;