// Naam-selectie scherm
function NamePicker({ onPick }) {
  const DATA = window.CORVEE_DATA;
  const HIDE = new Set(["cam", "max", "mil"]);
  const hoofden = DATA.people.filter(p => p.role === "hoofd" && !HIDE.has(p.id));
  const kinderen = DATA.people.filter(p => p.role === "kind" && !HIDE.has(p.id));
  const opa = DATA.people.find(p => p.id === "opa");

  return (
    <div style={{ padding: "20px 20px 80px", maxWidth: 480, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginTop: 30, marginBottom: 24 }}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>🇬🇷</div>
        <h1 className="serif" style={{ fontSize: 34, margin: "0 0 4px", color: "var(--aegean-deep)", letterSpacing: -0.8 }}>
          Kαλώς ήρθες!
        </h1>
        <div style={{ color: "var(--muted)", fontSize: 14 }}>
          Welkom bij Corvee Kreta 2026
        </div>
      </div>

      <div className="card" style={{ marginBottom: 20 }}>
        <div className="section-sub" style={{ marginBottom: 14, marginTop: 0 }}>
          Wie ben jij? Tik op je naam.
        </div>
        <div className="tiny-mute" style={{ marginBottom: 8 }}>Hoofden van de keuken</div>
        <div className="name-grid">
          {hoofden.map(p => (
            <div key={p.id} className="name-card" onClick={() => onPick(p.id)}>
              <Avatar person={p} size={48} />
              <div className="name">{p.name}</div>
              <div style={{ fontSize: 14 }}>{p.emoji}</div>
            </div>
          ))}
        </div>

        <div className="tiny-mute" style={{ marginTop: 18, marginBottom: 8 }}>De meute</div>
        <div className="name-grid">
          {kinderen.map(p => (
            <div key={p.id} className="name-card" onClick={() => onPick(p.id)}>
              <Avatar person={p} size={48} />
              <div className="name">{p.name}</div>
              <div style={{ fontSize: 14 }}>{p.emoji}</div>
            </div>
          ))}
        </div>

        <div className="tiny-mute" style={{ marginTop: 18, marginBottom: 8 }}>Eregast</div>
        <div className="opa-card" style={{ cursor: "pointer" }} onClick={() => onPick(opa.id)}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar person={opa} size={48} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "Fraunces, serif", fontWeight: 700, fontSize: 18, color: "#6b4a00" }}>
                Opa 👑
              </div>
              <div style={{ fontSize: 12, color: "#8b6a20", marginTop: 2 }}>
                70 jaar · geldschieter · taak: genieten
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ textAlign: "center", fontSize: 12, color: "var(--muted)", marginTop: 20 }}>
        We onthouden je keuze op dit apparaat.
      </div>
    </div>
  );
}

window.NamePicker = NamePicker;