// GetContent — "Hoe het werkt": vier stappen, normaal soepel scrollen.
// Geen scroll-jacking of sticky pin. Glassmorphism-kaarten, lichte hover-lift.
function HowItWorks({ onNav }) {
  const steps = [
    { step: 1, icon: 'pencil-line', title: 'Plaats je opdracht', description: 'Beschrijf wat je nodig hebt, bepaal de prijs en zet je opdracht gratis live. Direct zichtbaar voor creators.' },
    { step: 2, icon: 'users', title: 'Kies je creator', description: 'Passende creators reageren. Vergelijk ze op stijl, portfolio en beoordelingen en kies wie het beste bij je opdracht past.' },
    { step: 3, icon: 'clapperboard', title: 'Ontvang je content', description: 'Je creator levert. De betaling staat veilig vast tot jij akkoord geeft.' },
    { step: 4, icon: 'trending-up', title: 'Maak impact', description: 'Publiceer, vergroot je bereik en kom terug voor je volgende opdracht.' },
  ];

  React.useEffect(() => {
    const id = requestAnimationFrame(() => { if (window.lucide) window.lucide.createIcons(); });
    return () => cancelAnimationFrame(id);
  }, []);

  return (
    <section id="how" style={{ position: 'relative', background: 'var(--surface-page)', padding: 'var(--section-pad-y) 0', overflow: 'hidden' }}>
      <GlowBlobs />
      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div className="gc-section-head" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
          <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 16 }}>Hoe GetContent werkt</span>
          <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 'var(--lh-display)' }}>Van opdracht tot content in vier stappen</h2>
        </div>
        <div className="gc-steps-grid gc-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {steps.map((s) => <StepCard key={s.step} {...s} onOpen={() => onNav && onNav('how', 'stap-' + s.step)} />)}
        </div>
      </div>
    </section>
  );
}

// Subtiele warm/coral gloed achter de kaarten zodat het glas leesbaar reflecteert.
function GlowBlobs() {
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '38%', left: '12%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(237,110,111,0.10), transparent 65%)' }} />
      <div style={{ position: 'absolute', top: '30%', right: '8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(18,24,38,0.06), transparent 68%)' }} />
    </div>
  );
}

function StepCard({ step, icon, title, description, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onClick={onOpen}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen && onOpen(); } }}
      role="button"
      tabIndex={0}
      aria-label={title}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        padding: 26,
        cursor: 'pointer',
        borderRadius: 'var(--radius-lg)',
        background: 'linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.6))',
        backdropFilter: 'blur(14px) saturate(1.25)',
        WebkitBackdropFilter: 'blur(14px) saturate(1.25)',
        border: '1px solid rgba(18,24,38,0.1)',
        boxShadow: hover
          ? '0 30px 60px -18px rgba(18,24,38,0.26), 0 2px 0 rgba(255,255,255,0.7) inset'
          : '0 12px 30px -18px rgba(18,24,38,0.18), 0 1px 0 rgba(255,255,255,0.6) inset',
        transform: hover ? 'translateY(-6px)' : 'none',
        transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
        overflow: 'hidden',
      }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 60, background: 'linear-gradient(180deg, rgba(255,255,255,0.55), transparent)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <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={icon}></i>
        </span>
        <span style={{ fontSize: 40, fontWeight: 'var(--fw-extra)', lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--gc-sand-300)' }}>
          {String(step).padStart(2, '0')}
        </span>
      </div>
      <h3 style={{ position: 'relative', fontSize: 19, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 10 }}>{title}</h3>
      <p style={{ position: 'relative', fontSize: 15, lineHeight: 'var(--lh-normal)', color: 'var(--text-body)' }}>{description}</p>
    </article>
  );
}

window.HowItWorks = HowItWorks;