// Step 1 — Your Profile
function Step1({ profile, setProfile, onNext }) {
  const { SALARY_BANDS } = window;
  const valid =
    profile.salaryBand &&
    profile.monthlySpend > 0 &&
    profile.program &&
    profile.horizon;

  const programs = [
    { id: 'Qantas', label: 'Qantas Points', sub: 'I want frequent flyer miles for Qantas / oneworld' },
    { id: 'Velocity', label: 'Velocity Points', sub: 'Virgin Australia — incl. cards whose points transfer to Velocity' },
    { id: 'Flexible', label: 'Flexible / most points', sub: 'Show all programs incl. bank points (Awards, Amplify, ANZ etc.)' },
  ];

  const horizons = [
    { id: 6, label: '6 months' },
    { id: 12, label: '12 months' },
    { id: 18, label: '18 months' },
    { id: 24, label: '24 months' },
  ];

  return (
    <div className="step-pane">
      <div className="hero-decor" />
      <div className="step-header">
        <div className="step-eyebrow">Step one</div>
        <h1>Let's get a sense <span className="accent">of you.</span></h1>
        <p className="lede">
          We use this to figure out which cards you'll qualify for, how
          fast you'll hit minimum spends, and where your points should go.
        </p>
      </div>

      <div className="field">
        <label className="field-label">What's your annual salary?</label>
        <div className="field-help">
          Banks use this for credit checks — we'll filter out anything you
          probably won't get approved for.
        </div>
        <select
          className="select"
          value={profile.salaryBand || ''}
          onChange={(e) => setProfile({ ...profile, salaryBand: e.target.value })}
        >
          <option value="" disabled>Pick a band</option>
          {SALARY_BANDS.map(b => (
            <option key={b.id} value={b.id}>{b.label}</option>
          ))}
        </select>
      </div>

      <div className="row2">
        <div className="field">
          <label className="field-label">Monthly spend (AUD)</label>
          <div className="field-help">
            Everything you'd run through a card — groceries, rent if possible, bills.
          </div>
          <div className="input-prefix">
            <span className="prefix">$</span>
            <input
              className="input"
              type="number"
              inputMode="numeric"
              placeholder="e.g. 3500"
              value={profile.monthlySpend || ''}
              onChange={(e) =>
                setProfile({
                  ...profile,
                  monthlySpend: e.target.value ? parseInt(e.target.value, 10) : 0,
                })
              }
            />
          </div>
        </div>

        <div className="field">
          <label className="field-label">Planning horizon</label>
          <div className="field-help">How far ahead are we plotting?</div>
          <select
            className="select"
            value={profile.horizon || ''}
            onChange={(e) =>
              setProfile({ ...profile, horizon: parseInt(e.target.value, 10) })
            }
          >
            <option value="" disabled>Pick a window</option>
            {horizons.map(h => (
              <option key={h.id} value={h.id}>{h.label}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="field">
        <label className="field-label">Maximum annual fee you'll pay <span style={{ fontWeight: 400, color: 'var(--ink-mute)', fontSize: '0.9rem' }}>(optional)</span></label>
        <div className="field-help">
          We'll hide any card whose first-year fee is above this. Leave blank for no limit.
        </div>
        <div className="input-prefix">
          <span className="prefix">$</span>
          <input
            className="input"
            type="number"
            inputMode="numeric"
            placeholder="No limit"
            value={profile.maxFee || ''}
            onChange={(e) =>
              setProfile({
                ...profile,
                maxFee: e.target.value ? parseInt(e.target.value, 10) : 0,
              })
            }
          />
        </div>
      </div>

      <div className="field">
        <label className="field-label">Where do you want your points to land?</label>
        <div className="field-help">
          Qantas and Velocity narrow the list to direct-earn cards. Flexible shows every card in the database, including bank-specific point programs.
        </div>
        <RadioCards
          value={profile.program}
          onChange={(v) => setProfile({ ...profile, program: v })}
          options={programs}
        />
      </div>

      <div className="btn-row">
        <div />
        <button
          className="btn btn-primary"
          disabled={!valid}
          onClick={onNext}
        >
          Continue → History
        </button>
      </div>
    </div>
  );
}

window.Step1 = Step1;