// 內 UCHI web — onboarding part 2: apply, pending, tiers, payment, welcome-in

// ───────────────────────── Application ─────────────────────────
function Apply({ D, ap, set, toggle, onBack, onDone }) {
  const [i, setI] = React.useState(0);
  const last = 3;
  const ok = [ap.name.trim() && ap.email.trim(), ap.role.trim(), ap.interests.length > 0 && ap.freq, ap.why.trim().length > 12];
  const next = () => { if (i < last) setI(i + 1); else onDone(); };
  const back = () => { if (i > 0) setI(i - 1); else onBack(); };
  const titles = ["Quem és", "O que fazes", "O que te move", "Porquê tu"];

  return (
    <>
      <AuthBar onBack={back} right={<span className="cap">Candidatura · {i + 1}/4</span>} />
      <Centered max={560}>
        <div style={{ marginBottom: 40 }}><Steps n={4} i={i} /></div>
        <div key={i} className="fade">
          {i === 0 && <>
            <Eyebrow accent style={{ marginBottom: 14 }}>{titles[0]}</Eyebrow>
            <h1 className="h1">Apresenta-te à casa.</h1>
            <p className="body" style={{ margin: "12px 0 36px" }}>O básico. Sem isto não te conseguimos chamar pelo nome.</p>
            <div className="stack" style={{ display: "grid", gap: 26 }}>
              <Field label="Nome" v={ap.name} on={v => set("name", v)} ph="Como te chamamos?" />
              <Field label="Email" type="email" v={ap.email} on={v => set("email", v)} ph="tu@exemplo.pt" hint="Já confirmado no teu acesso." />
              <Field label="Telemóvel (opcional)" v={ap.phone} on={v => set("phone", v)} ph="+351 …" />
            </div>
          </>}
          {i === 1 && <>
            <Eyebrow accent style={{ marginBottom: 14 }}>{titles[1]}</Eyebrow>
            <h1 className="h1">Profissão & área.</h1>
            <p className="body" style={{ margin: "12px 0 36px" }}>A EN House mistura ofícios. Gostamos de saber quem se senta ao balcão.</p>
            <div style={{ display: "grid", gap: 26 }}>
              <Field label="Profissão" v={ap.role} on={v => set("role", v)} ph="O que fazes ao certo?" />
              <Field label="Empresa / projeto (opcional)" v={ap.company} on={v => set("company", v)} ph="Onde, com quem" />
              <div>
                <label className="label">Como chegaste até nós?</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                  {D.hearAbout.map(h => <button key={h} className={"chip" + (ap.hear === h ? " on" : "")} onClick={() => set("hear", h)}>{h}</button>)}
                </div>
              </div>
            </div>
          </>}
          {i === 2 && <>
            <Eyebrow accent style={{ marginBottom: 14 }}>{titles[2]}</Eyebrow>
            <h1 className="h1">Interesses.</h1>
            <p className="body" style={{ margin: "12px 0 28px" }}>Escolhe o que te puxa. Ajuda-nos a sentar-te ao lado das pessoas certas.</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {D.interests.map(it => <button key={it} className={"chip" + (ap.interests.includes(it) ? " on" : "")} onClick={() => toggle("interests", it)}>{it}</button>)}
            </div>
            <div style={{ marginTop: 36 }}>
              <label className="label">Com que frequência jantas fora?</label>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                {D.dineFreq.map(f => <button key={f} className={"chip" + (ap.freq === f ? " on" : "")} onClick={() => set("freq", f)}>{f}</button>)}
              </div>
            </div>
          </>}
          {i === 3 && <>
            <Eyebrow accent style={{ marginBottom: 14 }}>{titles[3]}</Eyebrow>
            <h1 className="h1">Conta-nos.</h1>
            <p className="body" style={{ margin: "12px 0 30px" }}>Em duas linhas: porque queres entrar na EN House? Lemos todas.</p>
            <div style={{ display: "grid", gap: 26 }}>
              <Field label="O que te traz cá" textarea v={ap.why} on={v => set("why", v)} ph="Procuro uma mesa que não fecha cedo, gente que…" />
              <Field label="Quem te recomenda (opcional)" v={ap.ref} on={v => set("ref", v)} ph="Nome de um membro, se houver" hint="Uma referência acelera a análise." />
            </div>
          </>}
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 44 }}>
          <Button variant="ghost" onClick={back}>{i === 0 ? "Voltar" : "Anterior"}</Button>
          <Button variant="primary" disabled={!ok[i]} onClick={next} icon={i === last ? "check" : "arrowR"} style={{ flex: 1 }}>
            {i === last ? "Enviar candidatura" : "Continuar"}
          </Button>
        </div>
      </Centered>
    </>
  );
}

// ───────────────────────── Pending ─────────────────────────
function Pending({ D, ap, onApprove }) {
  return (
    <>
      <AuthBar />
      <Centered max={540}>
        <div className="fade" style={{ textAlign: "center", paddingTop: 20 }}>
          <Brush size={64} color="var(--accent)" style={{ margin: "0 auto 28px" }} />
          <Eyebrow accent>Candidatura recebida</Eyebrow>
          <h1 className="h1" style={{ margin: "16px 0 0" }}>A casa está a ler-te.</h1>
          <div className="rule" style={{ margin: "24px auto" }} />
          <p className="body" style={{ maxWidth: 400, margin: "0 auto" }}>
            A EN House é por candidatura. Olhamos para cada pessoa — não para um formulário.
            Damos resposta em até <strong style={{ color: "var(--ink)" }}>três dias</strong>{ap.name ? ", " + ap.name.split(" ")[0] : ""}.
          </p>
          <div style={{ margin: "34px 0 0", padding: 22, textAlign: "left", background: "var(--bg-2)", borderRadius: 6, border: "1px solid var(--line)" }}>
            <Eyebrow accent>Demonstração</Eyebrow>
            <p className="small" style={{ margin: "10px 0 16px" }}>Salta a espera e vê o resto do fluxo.</p>
            <Button variant="primary" block onClick={onApprove} icon="check">Simular aprovação</Button>
          </div>
        </div>
      </Centered>
    </>
  );
}

// ───────────────────────── Tiers ─────────────────────────
function Tiers({ D, chosen, setChosen, onBack, onNext }) {
  return (
    <>
      <AuthBar onBack={onBack} />
      <Centered max={900}>
        <div className="fade" style={{ textAlign: "center" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, marginBottom: 18, padding: "7px 14px",
            borderRadius: 999, border: "1px solid color-mix(in srgb, var(--accent) 45%, transparent)", color: "var(--accent)" }}>
            <Icon name="check" size={15} /><span className="cap" style={{ color: "var(--accent)", letterSpacing: ".12em" }}>Aprovado — bem-vindo</span>
          </div>
          <h1 className="h1">Escolhe a tua entrada.</h1>
          <p className="body" style={{ margin: "12px auto 0", maxWidth: 460 }}>A quota mantém a sala pequena. Podes mudar mais tarde — nunca para baixo de fundador.</p>
        </div>
        <div className="tiers-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 40 }}>
          {D.tiers.map(t => {
            const on = chosen === t.id;
            return (
              <div key={t.id} onClick={() => setChosen(t.id)} style={{ position: "relative", cursor: "pointer", padding: 30, borderRadius: 6,
                background: on ? "var(--surface-2)" : "var(--surface)", border: "1px solid " + (on ? "var(--accent)" : "var(--line)"),
                transition: "all .2s ease" }}>
                {t.featured && <Tag tone="accent" style={{ position: "absolute", top: -11, right: 24, background: "var(--surface)" }}>Mais escolhido</Tag>}
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 9 }}>
                    <span className="h2">{t.name}</span>
                    <span style={{ fontSize: 15, color: "var(--ink-3)", fontWeight: 900 }}>{t.jp}</span>
                  </div>
                  <div style={{ width: 22, height: 22, borderRadius: 999, marginTop: 4, border: "2px solid " + (on ? "var(--accent)" : "var(--line-2)"),
                    background: on ? "var(--accent)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--on-accent)" }}>
                    {on && <Icon name="check" size={13} stroke={2.4} />}
                  </div>
                </div>
                <p className="small" style={{ marginTop: 6 }}>{t.line}</p>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, margin: "22px 0 18px" }}>
                  <span className="display num" style={{ fontSize: 46 }}>{t.price}€</span><span className="cap">{t.cadence}</span>
                </div>
                <div className="divider" style={{ marginBottom: 18 }} />
                <div style={{ display: "grid", gap: 11 }}>
                  {t.perks.map(p => (
                    <div key={p} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
                      <Icon name="check" size={16} stroke={2} style={{ color: "var(--accent)", marginTop: 1, flexShrink: 0 }} />
                      <span className="small" style={{ color: "var(--ink)" }}>{p}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
          <Button variant="primary" onClick={onNext} icon="arrowR" style={{ minWidth: 280 }}>Continuar para pagamento</Button>
        </div>
      </Centered>
    </>
  );
}

Object.assign(window, { Apply, Pending, Tiers });