// Club profile form — 7 fields in a single long screen

function ClubProfile({ profile, onChange, onDone }) {
  const philosophies = [
    { id: "possession",  label: "Controlled possession", desc: "Build from the back, dominate the ball, patient attack." },
    { id: "pressing",    label: "High press & counter",  desc: "Aggressive rest defence, win high, quick transitions." },
    { id: "direct",      label: "Vertical & direct",     desc: "Play through the lines fast, physical duels, crosses." },
    { id: "structured",  label: "Structured defensive",  desc: "Compact mid-block, disciplined out of possession." },
    { id: "hybrid",      label: "Flexible / situational",desc: "Adapts to opponent; multi-system squad building." },
  ];
  const styles = ["possession", "transition", "pressing", "structured defense", "direct"];
  const goals = [
    { id: "short-term",  label: "Short-term reinforcement" },
    { id: "u23",         label: "U23 talents / development" },
    { id: "sales",       label: "Sales objects (profit-on-resale)" },
    { id: "gap",         label: "Specific position gap" },
  ];

  const update = (k, v) => onChange({ ...profile, [k]: v });
  const toggleTag = (t) => {
    const set = new Set(profile.styleTags || []);
    set.has(t) ? set.delete(t) : set.add(t);
    update("styleTags", Array.from(set));
  };
  const tags = profile.styleTags || [];
  const valid = profile.country && profile.league && profile.budget && profile.philosophy && tags.length > 0 && profile.goal;

  return (
    <div style={{
      maxWidth: 920, margin: "0 auto", padding: "48px 40px 120px", width: "100%",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
        <SectionTitle
          eyebrow="Onboarding · 1 of 1"
          title="Tell us who you’re scouting for."
          lede="Seven fields. Takes about ninety seconds. Editable anytime from Club Profile."
        />
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
          Draft · autosaved
        </div>
      </div>

      <div style={{ marginTop: 40, display: "grid", gap: 36 }}>
        {/* Row 1: Club identity */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="01" title="Club identity" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 16, marginTop: 18 }}>
            <div className="field">
              <label>Club name</label>
              <input type="text" placeholder="e.g. SV Musterstadt"
                value={profile.name || ""} onChange={e => update("name", e.target.value)}/>
            </div>
            <div className="field">
              <label>Country</label>
              <select value={profile.country || ""} onChange={e => update("country", e.target.value)}>
                <option value="">—</option>
                {["Germany","Netherlands","Belgium","Austria","Switzerland","Denmark","Sweden","Norway","Poland","Czechia","Portugal","Spain","Italy","France","England","USA","Brazil","Argentina","Japan","Türkiye","Greece"].map(c => <option key={c}>{c}</option>)}
              </select>
            </div>
            <div className="field">
              <label>League</label>
              <input type="text" placeholder="e.g. 2. Bundesliga"
                value={profile.league || ""} onChange={e => update("league", e.target.value)}/>
            </div>
            <div className="field">
              <label>Tier</label>
              <select value={profile.tier || "2"} onChange={e => update("tier", e.target.value)}>
                <option value="1">1st tier</option>
                <option value="2">2nd tier</option>
                <option value="3">3rd tier</option>
                <option value="4">Academy / reserves</option>
              </select>
            </div>
          </div>
        </div>

        {/* Row 2: Budget */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="02" title="Budget band" sub="Rough monthly wage envelope per new signing. Used only to narrow the shortlist." />
          <div className="seg" style={{ marginTop: 18, gap: 8 }}>
            {[
              { id: "low",    label: "Low",    hint: "€2k–€15k/mo" },
              { id: "mid",    label: "Mid",    hint: "€15k–€50k/mo" },
              { id: "high",   label: "High",   hint: "€50k–€150k/mo" },
              { id: "top",    label: "Top",    hint: "€150k+/mo" },
            ].map(b => (
              <button key={b.id}
                className={profile.budget === b.id ? "on" : ""}
                onClick={() => update("budget", b.id)}
                style={{ flexDirection: "column", alignItems: "flex-start", padding: "10px 16px", display: "flex", gap: 2 }}>
                <span style={{ fontWeight: 600 }}>{b.label}</span>
                <span className="mono" style={{ fontSize: 10, opacity: 0.75 }}>{b.hint}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Row 3: Philosophy */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="03" title="Playing philosophy" sub="Pick the closest preset, or describe in your own words — we’ll parse it." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 10, marginTop: 18 }}>
            {philosophies.map(p => (
              <button key={p.id}
                onClick={() => update("philosophy", p.id)}
                className={profile.philosophy === p.id ? "on" : ""}
                style={{
                  textAlign: "left", padding: 14,
                  border: "1px solid " + (profile.philosophy === p.id ? "var(--accent)" : "var(--rule-strong)"),
                  background: profile.philosophy === p.id ? "var(--accent-soft)" : "var(--panel)",
                  borderRadius: "var(--radius)",
                  minHeight: 112,
                }}>
                <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink)" }}>{p.label}</div>
                <div style={{ fontSize: 12, color: "var(--ink-muted)", marginTop: 4, lineHeight: 1.4 }}>{p.desc}</div>
              </button>
            ))}
          </div>
          <div className="field" style={{ marginTop: 18 }}>
            <label>Or describe in your own words (optional)</label>
            <textarea rows="2" placeholder="e.g. We play a 4-2-3-1 with vertical pressing triggers and expect our full-backs to provide the width…"
              value={profile.philoFree || ""} onChange={e => update("philoFree", e.target.value)}
              style={{
                width: "100%", padding: "10px 12px",
                background: "var(--panel-2)", color: "var(--ink)",
                border: "1px solid var(--rule-strong)",
                borderRadius: "var(--radius)", resize: "vertical",
              }}/>
          </div>
        </div>

        {/* Row 4: style tags */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="04" title="Style tags" sub="Multi-select. Informs the fit score." />
          <div className="seg" style={{ marginTop: 18 }}>
            {styles.map(s => (
              <button key={s} className={tags.includes(s) ? "on" : ""}
                onClick={() => toggleTag(s)}>{s}</button>
            ))}
          </div>
        </div>

        {/* Row 5: Language preference */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="05" title="Language preference for incoming players" sub="Primary is weighted strongly; secondary is a soft plus." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 18 }}>
            <div className="field">
              <label>Primary</label>
              <select value={profile.lang1 || ""} onChange={e => update("lang1", e.target.value)}>
                <option value="">—</option>
                {["German","English","Portuguese","Spanish","French","Dutch","Italian","Polish","Scandinavian (any)"].map(l => <option key={l}>{l}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Secondary (optional)</label>
              <select value={profile.lang2 || ""} onChange={e => update("lang2", e.target.value)}>
                <option value="">—</option>
                {["German","English","Portuguese","Spanish","French","Dutch","Italian","Polish","Scandinavian (any)"].map(l => <option key={l}>{l}</option>)}
              </select>
            </div>
          </div>
        </div>

        {/* Row 6: Goal */}
        <div className="card" style={{ padding: 28 }}>
          <FormGroup n="06" title="Scouting goal" />
          <div className="seg" style={{ marginTop: 18 }}>
            {goals.map(g => (
              <button key={g.id} className={profile.goal === g.id ? "on" : ""}
                onClick={() => update("goal", g.id)}>{g.label}</button>
            ))}
          </div>
          {profile.goal === "gap" && (
            <div className="field" style={{ marginTop: 14 }}>
              <label>Position gap</label>
              <div className="seg" style={{ marginTop: 4 }}>
                {window.IAMS_DATA.POSITIONS.map(p => (
                  <button key={p} className={profile.gapPos === p ? "on" : ""} onClick={() => update("gapPos", p)}>{p}</button>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Row 7: Submit */}
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <button className="btn accent lg" disabled={!valid} onClick={onDone}
            style={{ opacity: valid ? 1 : 0.4, cursor: valid ? "pointer" : "not-allowed" }}>
            Generate world map →
          </button>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            {valid ? "Ready" : "Complete required fields"}
          </div>
        </div>
      </div>
    </div>
  );
}

function FormGroup({ n, title, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>{n}</div>
      <div>
        <div className="display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: "var(--ink-muted)", marginTop: 2 }}>{sub}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { ClubProfile });