// RecruitmentPanel — the join block. EVE SSO gated.
function RecruitmentPanel({ authed, pilotData, onAuth, onApply, applied, submitting }) {
  const [reason, setReason] = React.useState("tired of f1 monkey life. want to learn wormholes.");
  const pilot = pilotData?.name || '';
  const discordUrl = window.__BYCONFIG__?.discord_url || '';
  const InGameChip = window.InGameChip;

  return (
    <section className="section" id="join">
      <div className="section-label">// RECRUITMENT OPEN</div>
      <h2 className="section-title">JOIN THE KINGDOM</h2>
      <div className="recruit">
        <div className="recruit-pitch">
          <p>
            We run small-gang PvP out of lowsec. Newbros learn frigate brawls and d-scan discipline, experienced pilots fly nano and blops. Everyone's on comms, everyone undocks.
          </p>
          <p>
            Buyback program means you never have to haul to Jita. Free clones at the staging. No srp, no blue donut, no spreadsheet.
          </p>
          <ul className="recruit-bullets">
            <li><span className="check" /> Prior PvP not required. Willingness to die in frigates, is.</li>
            <li><span className="check" /> Discord + working mic. Mandatory.</li>
            <li><span className="check" /> Newbros start in exploration hunting fleets. You scan and hack; we hunt anyone who follows you. It sounds mean. It's the fastest way to learn EVE.</li>
            <li><span className="check" /> We'll teach scanning, d-scan, and how to not get polarized on a hole.</li>
            <li><span className="check" /> 15m+ SP gets a seat on BLOPS ops week one.</li>
          </ul>
        </div>

        <div className="recruit-sso">
          {!authed ? (
            <>
              <div className="sso-title">STEP 01 · AUTHENTICATE</div>
              <p className="sso-lede">Sign in with your EVE account to pre-fill your application. We only read public character data.</p>
              <button className="sso-button" onClick={onAuth}>
                <span className="sso-mark-lg">EVE</span>
                <span className="sso-text">LOG IN WITH EVE ONLINE</span>
                <span className="sso-arrow">›</span>
              </button>
              <div className="sso-alt">
                or <a href="mailto:pindragoon@bigyoshi.space">apply via mail →</a>
                {discordUrl && <> · <a href={discordUrl} target="_blank" rel="noopener noreferrer">jump into discord →</a></>}
              </div>
              <div className="sso-ingame">
                <div className="sso-ingame-lbl">— OR JOIN US IN-GAME —</div>
                <InGameChip name="Big Yoshi Public" />
                <div className="sso-ingame-hint">open chat → join channel → paste</div>
              </div>
            </>
          ) : applied ? (
            <div className="sso-confirm">
              <div className="confirm-mark">✓</div>
              <div className="confirm-title">APPLICATION FILED</div>
              <div className="confirm-body">
                Welcome to the pipe, <strong>{pilot}</strong>.<br/>
                Pindragoon will reach out in Discord within 24h. In the meantime — join the server and start reading doctrine.
              </div>
              {discordUrl ? (
                <a className="btn-discord btn-discord-lg" href={discordUrl} target="_blank" rel="noopener noreferrer">
                  <span className="btn-discord-mark">#</span>
                  <span>OPEN DISCORD</span>
                  <span className="arr">›</span>
                </a>
              ) : (
                <a className="btn-secondary" href="#">OPEN DISCORD ›</a>
              )}
            </div>
          ) : (
            <>
              <div className="sso-title">STEP 02 · FILE APPLICATION</div>
              <div className="authed-pilot">
                <div className="authed-row">
                  <span className="authed-lbl">PILOT</span>
                  <span className="authed-val">{pilot || '—'}</span>
                </div>
                <div className="authed-row">
                  <span className="authed-lbl">CORP</span>
                  <span className="authed-val">{pilotData?.corporation_name || '—'}</span>
                </div>
                <div className="authed-row">
                  <span className="authed-lbl">TICKER</span>
                  <span className="authed-val">{pilotData?.corporation_ticker ? `[${pilotData.corporation_ticker}]` : '—'}</span>
                </div>
                <div className="authed-row">
                  <span className="authed-lbl">ID</span>
                  <span className="authed-val">{pilotData?.character_id || '—'}</span>
                </div>
              </div>
              <label className="field-label">// TELL US WHY</label>
              <textarea
                className="field-textarea"
                rows="3"
                value={reason}
                onChange={(e) => setReason(e.target.value)}
              />
              <button className="sso-button filed" onClick={() => onApply(reason)} disabled={submitting}>
                <span className="sso-text">{submitting ? 'FILING…' : 'FILE APPLICATION'}</span>
                <span className="sso-arrow">›</span>
              </button>
            </>
          )}
        </div>
      </div>
    </section>
  );
}
window.RecruitmentPanel = RecruitmentPanel;