// Step 1 — region + gender selection and photo intake. Reuses the existing
// UploadZone (kept in left-panel.jsx and exported on window).

const REGIONS = ["Asia", "United States", "Turkey"];
const GENDERS = ["Female", "Male"];

const IntakeStep = ({ ctx }) => {
  const { state, set } = ctx;
  return (
    <div className="intake">
      <div className="intake-col">
        <div className="section-label"><span><span className="num">01</span>Region</span></div>
        <div className="preset-chips">
          {REGIONS.map((r) => (
            <button key={r} className={`chip ${state.region === r ? "active" : ""}`}
              onClick={() => set({ region: r })}>{r}</button>
          ))}
        </div>
        <div className="section-label" style={{ marginTop: 18 }}><span><span className="num">02</span>Biological gender</span></div>
        <div className="preset-chips">
          {GENDERS.map((g) => (
            <button key={g} className={`chip ${state.gender === g ? "active" : ""}`}
              onClick={() => set({ gender: g })}>{g}</button>
          ))}
        </div>
        <div className="intake-hint mono-tiny">
          {state.region && state.gender ? "Now add a portrait →" : "Pick a region and gender, then add a portrait."}
        </div>
      </div>
      <div className="intake-col">
        <div className="section-label"><span><span className="num">03</span>Portrait</span></div>
        <UploadZone ctx={ctx} />
        {state.session && (
          <button className="btn btn-primary" style={{ marginTop: 14 }}
            onClick={() => set({ step: "analysis" })}>Continue to analysis →</button>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { IntakeStep });