// Apply — 4-step inline flow + success state
const { useState: useApplyState } = React;

function Apply() {
  const [step, setStep] = useApplyState(0);
  const [picks, setPicks] = useApplyState(['AI videa']);
  const [data, setData] = useApplyState('');
  const [brief, setBrief] = useApplyState('');
  const [web, setWeb] = useApplyState('');
  const [social, setSocial] = useApplyState('');
  const [email, setEmail] = useApplyState('');
  const [done, setDone] = useApplyState(false);

  const togglePick = (p) => {
    setPicks(picks.includes(p) ? picks.filter(x => x !== p) : [...picks, p]);
  };

  const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const next = () => setStep(s => Math.min(s + 1, 3));
  const prev = () => setStep(s => Math.max(s - 1, 0));
  const submit = () => { if (isEmail) setDone(true); };

  const stepNames = ['Co tě zajímá', 'Stručně co potřebuješ', 'Tvoje stopy', 'Email'];

  if (done) {
    return (
      <section data-screen-label="07 Apply success" style={{
        maxWidth: '720px', margin: '0 auto',
        padding: '65px 32px',
        textAlign: 'center',
      }}>
        <Eyebrow accent>Žádost odeslána</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.025em',
          color: 'var(--text-primary)', margin: '24px 0',
          lineHeight: 1.05,
        }}>Děkujeme.</h2>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: '20px',
          color: 'var(--text-secondary)', margin: '0 0 32px',
          lineHeight: 1.5,
        }}>Ozveme se ti do 48 h, jestli si tě bereme.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' }}>
          <a href="mailto:agentura@galandr.com" style={{ fontFamily: 'var(--font-body)', fontSize: '15px', color: 'var(--text-secondary)', textDecoration: 'none' }}>agentura@galandr.com</a>
          <a href="tel:+420776292036" style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-tertiary)', textDecoration: 'none', letterSpacing: '0.05em' }}>+420 776 292 036</a>
        </div>
      </section>
    );
  }

  return (
    <section data-screen-label="07 Apply" style={{
      maxWidth: '720px', margin: '0 auto',
      padding: '65px 32px',
    }}>
      <NumberedHeader
        num="07"
        title="Požádej o místo."
        sub="5 klientů měsíčně. Vybíráme si. Nejde o formulář, jde o brief."
      />

      {/* progress */}
      <div style={{ display: 'flex', gap: '6px', marginBottom: '40px' }}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{
            flex: 1, height: '2px',
            background: i <= step ? 'var(--accent)' : 'rgba(255,255,255,0.14)',
            transition: 'background 400ms cubic-bezier(0.65, 0, 0.35, 1)',
          }} />
        ))}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: '32px',
      }}>
        <Eyebrow>{(step + 1).toString().padStart(2,'0')} / 04 — {stepNames[step]}</Eyebrow>
      </div>

      {/* steps */}
      {step === 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
          {/* Service type chips */}
          <div>
            <Eyebrow>Co tě zajímá</Eyebrow>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '14px' }}>
              {['AI videa', 'Statické bannery', 'Motion bannery', 'AI avataři', 'Nevím, chci poradit'].map(p => {
                const active = picks.includes(p);
                return (
                  <button key={p} onClick={() => togglePick(p)} style={{
                    fontFamily: 'var(--font-body)', fontSize: '14px',
                    padding: '10px 18px', borderRadius: '999px',
                    border: '1px solid ' + (active ? 'var(--accent)' : 'var(--border-strong)'),
                    background: active ? 'var(--accent)' : 'transparent',
                    color: active ? '#fff' : 'var(--text-primary)',
                    cursor: 'pointer',
                    transition: 'all 300ms cubic-bezier(0.65, 0, 0.35, 1)',
                  }}>{p}</button>
                );
              })}
            </div>
          </div>

          {/* Data access — qualification signal */}
          <div>
            <Eyebrow>Reklamní účty / data</Eyebrow>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: '13px',
              color: 'var(--text-tertiary)', lineHeight: 1.5,
              margin: '6px 0 14px', maxWidth: '52ch',
            }}>Audit dat je součást našeho procesu. Není podmínka, ale výrazně zlepšuje výstup.</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
              {[
                { v: 'share', l: 'Můžu sdílet účty (Meta / Google / TikTok)' },
                { v: 'marketer', l: 'Mám in-house marketéra, sedneme si' },
                { v: 'agency', l: 'Externí agentura — domluvíme to spolu' },
                { v: 'none', l: 'Nemám zatím nic' },
              ].map(o => {
                const active = data === o.v;
                return (
                  <button key={o.v} onClick={() => setData(o.v)} style={{
                    fontFamily: 'var(--font-body)', fontSize: '13px',
                    padding: '9px 16px', borderRadius: '999px',
                    border: '1px solid ' + (active ? 'var(--accent)' : 'var(--border-strong)'),
                    background: active ? 'rgba(247,19,63,0.15)' : 'transparent',
                    color: active ? 'var(--accent-hover)' : 'var(--text-primary)',
                    cursor: 'pointer',
                    transition: 'all 300ms cubic-bezier(0.65, 0, 0.35, 1)',
                  }}>{o.l}</button>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="underline-input" style={{ position: 'relative' }}>
          <textarea
            value={brief}
            onChange={e => setBrief(e.target.value)}
            placeholder="Co je produkt, jaký rozsah, deadline."
            autoFocus
            style={{
              width: '100%', minHeight: '160px',
              background: 'transparent', border: 'none',
              borderBottom: '1px solid var(--border-strong)',
              padding: '12px 0', resize: 'none',
              fontFamily: 'var(--font-body)', fontSize: '17px',
              color: 'var(--text-primary)', outline: 'none',
            }}
          />
        </div>
      )}

      {step === 2 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
          {[
            { v: web, set: setWeb, label: 'Web / e-shop', ph: 'https://' },
            { v: social, set: setSocial, label: 'Instagram / LinkedIn (volitelně)', ph: '@' },
          ].map((f, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              <Eyebrow>{f.label}</Eyebrow>
              <div className="underline-input" style={{ position: 'relative' }}>
                <input
                  value={f.v}
                  onChange={e => f.set(e.target.value)}
                  placeholder={f.ph}
                  autoFocus={i === 0}
                  style={{
                    width: '100%',
                    background: 'transparent', border: 'none',
                    borderBottom: '1px solid var(--border-strong)',
                    padding: '10px 0',
                    fontFamily: 'var(--font-body)', fontSize: '17px',
                    color: 'var(--text-primary)', outline: 'none',
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      )}

      {step === 3 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
          <Eyebrow>Email</Eyebrow>
          <div className="underline-input" style={{ position: 'relative' }}>
            <input
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="ty@firma.cz"
              autoFocus
              onKeyDown={e => { if (e.key === 'Enter' && isEmail) submit(); }}
              style={{
                width: '100%',
                background: 'transparent', border: 'none',
                borderBottom: '1px solid var(--border-strong)',
                padding: '10px 0',
                fontFamily: 'var(--font-body)', fontSize: '20px',
                color: 'var(--text-primary)', outline: 'none',
              }}
            />
          </div>
        </div>
      )}

      {/* nav */}
      <div style={{
        marginTop: '48px', display: 'flex',
        justifyContent: 'space-between', alignItems: 'center',
      }}>
        <button onClick={prev} disabled={step === 0} style={{
          fontFamily: 'var(--font-mono)', fontSize: '12px',
          background: 'transparent', border: 'none',
          color: step === 0 ? 'var(--text-disabled)' : 'var(--text-secondary)',
          cursor: step === 0 ? 'default' : 'pointer',
          textTransform: 'uppercase', letterSpacing: '0.12em',
          padding: '10px 0',
        }}>← Zpět</button>
        {step < 3 ? (
          <CTA onClick={next}>Dál</CTA>
        ) : (
          <CTA onClick={submit}>Odeslat žádost</CTA>
        )}
      </div>
    </section>
  );
}

window.Apply = Apply;