// GetContent — homepage hero: links de kop + zoekbalk + categorie-pills,
// rechts de zwevende iPhones + MacBook. Donkerblauw met monogram-textuur.
function Hero({ onNav }) {
  const [value, setValue] = React.useState('');
  const [engaged, setEngaged] = React.useState(false);

  const start = () => onNav('post');
  const onKey = (e) => { if (e.key === 'Enter') start(); };

  const pills = [
    { label: 'Paid social', cat: 'Paid social' },
    { label: 'Video', cat: 'Video' },
    { label: 'UGC video', cat: 'UGC video' },
    { label: 'Reels & shorts', cat: 'Reels & shorts' },
    { label: 'Fotografie', cat: 'Fotografie' },
    { label: 'Design', cat: 'Design' },
  ];

  return (
    <section className="gc-dark-pattern gc-hero" style={{
      position: 'relative', color: 'var(--text-on-dark)',
      marginTop: -76, overflow: 'hidden',
      paddingTop: 'clamp(6rem, 9vw, 9rem)', paddingBottom: 'clamp(2.5rem, 5vw, 4.5rem)',
      backgroundColor: 'var(--surface-dark)',
    }}>
      <div style={{
        position: 'relative', maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: '0 var(--gutter)',
      }}>
        <div className="gc-hero-copy" style={{ maxWidth: 1160, marginLeft: 'auto', marginRight: 'auto' }}>
          <span className="gc-eyebrow" style={{ marginBottom: 24 }}>Het content-platform van Nederland</span>

          <h1 className="gc-hero-h1" style={{
            fontSize: 'clamp(3.15rem, 6.4vw, 5.75rem)', fontWeight: 'var(--fw-regular)',
            letterSpacing: 'var(--ls-tight)', lineHeight: 1.04, color: 'var(--text-on-dark)',
            marginLeft: '-0.03em',
          }}>
            <span style={{ display: 'block', fontWeight: 'var(--fw-semibold)' }}>Plaats je opdracht.</span>
            {/* de twee delen breken alleen tussen elkaar (vóór de coral), nooit
                middenin een zin — op smal scherm valt "jij kiest." zo netjes op
                een eigen regel i.p.v. een rommelige breuk na "Creators" */}
            <span style={{ display: 'block' }}>
              <span style={{ whiteSpace: 'nowrap' }}>Creators reageren,</span>{' '}
              <strong style={{ whiteSpace: 'nowrap', fontWeight: 'var(--fw-semibold)', color: 'var(--accent)' }}>jij kiest.</strong>
            </span>
          </h1>

          <div className="gc-hero-bar-wrap" style={{ maxWidth: 1160, marginLeft: 'auto', marginRight: 'auto', marginTop: 'clamp(2.25rem, 4vw, 3rem)' }}>
            <BarField
              value={value}
              engaged={engaged}
              onChange={setValue}
              onKeyDown={onKey}
              onStart={start}
              onEngage={() => setEngaged(true)}
            />

            <div className="gc-hero-pills" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginTop: 20 }}>
              {pills.map((p, i) => (
                <button key={i} type="button" onClick={() => onNav('browse')}
                  className="gc-hero-pill"
                  style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
                    height: 52, padding: '0 20px', borderRadius: 'var(--radius-sm)',
                    background: 'rgba(245,243,239,0.06)', border: '1px solid rgba(245,243,239,0.28)',
                    color: 'var(--text-on-dark)', cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 'var(--fw-semibold)',
                    transition: 'background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(245,243,239,0.14)'; e.currentTarget.style.borderColor = 'rgba(245,243,239,0.5)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(245,243,239,0.06)'; e.currentTarget.style.borderColor = 'rgba(245,243,239,0.28)'; }}>
                  {p.label}
                  <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
                </button>
              ))}
            </div>

            <div style={{ marginTop: 22 }}>
              <a onClick={() => onNav('signup')} role="button" tabIndex={0} className="gc-hero-creatorlink"
                onKeyDown={(e) => { if (e.key === 'Enter') onNav('signup'); }}
                style={{ cursor: 'pointer', fontSize: 15, fontWeight: 'var(--fw-medium)', color: 'var(--text-on-dark-muted)', textDecorationLine: 'underline', textUnderlineOffset: 3, textDecorationColor: 'var(--border-on-dark)' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--text-on-dark)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-on-dark-muted)'; }}>
                Ben je creator? <strong style={{ fontWeight: 'var(--fw-bold)' }}>Meld je gratis aan</strong>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// De opdrachtbalk: warm-white pill met een rustige typanimatie die door echte
// opdracht-voorbeelden loopt. De animatie stopt zodra je klikt/typt in de balk.
function BarField({ value, engaged, onChange, onKeyDown, onStart, onEngage }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const [focus, setFocus] = React.useState(false);
  const [typed, setTyped] = React.useState('');
  const [mobile, setMobile] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 600px)');
    const apply = () => setMobile(mq.matches);
    apply();
    mq.addEventListener('change', apply);
    return () => mq.removeEventListener('change', apply);
  }, []);

  const phrases = React.useMemo(() => [
    'Fotograaf voor mijn bruiloft',
    'Paid social ads',
    'Aftermovie voor mijn event',
    "Productfoto's voor mijn webshop",
    'TikTok creator voor mijn campagne',
    'Sfeerbeelden van mijn bedrijf',
  ], []);

  React.useEffect(() => {
    if (engaged) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setTyped(phrases[0]); return; }
    let pi = 0, ci = 0, deleting = false, timer;
    const TYPE = 55, ERASE = 25, HOLD = 1500, GAP = 300;
    const tick = () => {
      const word = phrases[pi];
      if (!deleting) {
        ci++;
        setTyped(word.slice(0, ci));
        if (ci >= word.length) { deleting = true; timer = setTimeout(tick, HOLD); return; }
        timer = setTimeout(tick, TYPE);
      } else {
        ci--;
        setTyped(word.slice(0, ci));
        if (ci <= 0) { deleting = false; pi = (pi + 1) % phrases.length; timer = setTimeout(tick, GAP); return; }
        timer = setTimeout(tick, ERASE);
      }
    };
    timer = setTimeout(tick, 600);
    return () => clearTimeout(timer);
  }, [engaged, phrases]);

  const showPlaceholderColor = engaged ? !value : !typed;

  return (
    <div
      onMouseDown={() => onEngage && onEngage()}
      onClick={() => { onEngage && onEngage(); if (inputRef.current) inputRef.current.focus(); }}
      style={{
        display: 'flex', alignItems: 'center', gap: mobile ? 8 : 10,
        padding: mobile ? 8 : 10, paddingLeft: mobile ? 16 : 22,
        background: 'var(--surface-card)',
        borderRadius: 16,
        boxShadow: focus
          ? 'inset 0 3px 10px rgba(18,24,38,0.24), 0 0 0 3px var(--accent), 0 16px 36px -14px rgba(18,24,38,0.3)'
          : 'inset 0 3px 10px rgba(18,24,38,0.24), 0 16px 36px -14px rgba(18,24,38,0.3)',
        transition: 'box-shadow var(--dur-base) var(--ease-out)',
        cursor: 'text', minHeight: mobile ? 60 : 72,
      }}
    >
      <span aria-hidden style={{ display: 'inline-flex', flex: 'none', color: 'var(--accent)' }}>
        <svg width={mobile ? 20 : 22} height={mobile ? 20 : 22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>
      </span>
      <div style={{ position: 'relative', flex: 1, minWidth: 0, textAlign: 'left', height: mobile ? 26 : 32, display: 'flex', alignItems: 'center', overflow: 'hidden', paddingRight: mobile ? 0 : 12 }}>
        <input
          ref={inputRef}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={onKeyDown}
          onFocus={() => { setFocus(true); onEngage && onEngage(); }}
          onBlur={() => setFocus(false)}
          aria-label="Welke content zoek je?"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            border: 'none', outline: 'none', background: 'transparent',
            color: 'transparent', caretColor: 'transparent',
            fontFamily: 'var(--font-sans)', fontSize: mobile ? '1rem' : 'clamp(1.0625rem, 1.2vw, 1.25rem)',
            fontWeight: 'var(--fw-semibold)', zIndex: 2,
          }}
        />
        <div aria-hidden style={{
          display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', overflow: 'hidden', maxWidth: '100%',
          pointerEvents: 'none',
          fontFamily: 'var(--font-sans)', fontSize: mobile ? '1rem' : 'clamp(1.0625rem, 1.2vw, 1.25rem)', fontWeight: 'var(--fw-semibold)',
        }}>
          {/* de vaste placeholder alleen tonen als de gebruiker de balk zelf
              gebruikt; tijdens de typanimatie flitste hij te kort voorbij */}
          <span style={{ color: showPlaceholderColor ? 'var(--text-faint)' : 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis' }}>{engaged ? (value || 'Beschrijf je opdracht…') : typed}</span>
          <span className="gc-caret" style={{ flex: 'none', width: 2, height: '1.3em', background: 'var(--accent)', marginLeft: 3, borderRadius: 1 }} />
        </div>
      </div>
      <Button variant="primary" size={mobile ? 'sm' : 'lg'} className="gc-cta-glow" onClick={(e) => { e.stopPropagation(); onStart(); }} style={{ flex: 'none', borderRadius: 12 }}>Start gratis</Button>
    </div>
  );
}

window.Hero = Hero;