// 內 UCHI web — onboarding part 3: payment, welcome-in

function Payment({ D, tier, onBack, onPaid }) {
  const [card, setCard] = React.useState("");
  const [exp, setExp] = React.useState("");
  const [cvc, setCvc] = React.useState("");
  const [name, setName] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const fmtCard = v => v.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim();
  const fmtExp = v => { const d = v.replace(/\D/g, "").slice(0, 4); return d.length > 2 ? d.slice(0, 2) + "/" + d.slice(2) : d; };
  const brand = card.replace(/\s/g, "").startsWith("4") ? "VISA" : /^5[1-5]/.test(card.replace(/\s/g, "")) ? "MC" : "";
  const valid = card.replace(/\s/g, "").length >= 15 && exp.length === 5 && cvc.length >= 3 && name.trim();
  const pay = () => { setBusy(true); setTimeout(onPaid, 1500); };

  return (
    <>
      <AuthBar onBack={onBack} right={<span className="cap" style={{ display: "flex", alignItems: "center", gap: 7 }}><Icon name="lock" size={14} /> Seguro</span>} />
      <Centered max={880}>
        <div className="pay-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          {/* summary */}
          <div className="fade">
            <Eyebrow accent style={{ marginBottom: 14 }}>A tua adesão</Eyebrow>
            <h1 className="h1" style={{ marginBottom: 28 }}>EN House · {tier.name}</h1>
            <div className="divider" style={{ marginBottom: 20 }} />
            <SumRow l={`Adesão ${tier.name}`} r={`${tier.price}€`} sub={tier.cadence} />
            <SumRow l="Joia de entrada" r="oferta" />
            <div className="divider" style={{ margin: "20px 0" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="h3">Total hoje</span><span className="display num" style={{ fontSize: 34 }}>{tier.price}€</span>
            </div>
            <div style={{ display: "flex", gap: 11, alignItems: "flex-start", marginTop: 28, padding: "14px 16px",
              background: "var(--bg-2)", borderRadius: 4, border: "1px solid var(--line)" }}>
              <Icon name="shield" size={16} style={{ color: "var(--accent)", flexShrink: 0, marginTop: 1 }} />
              <span className="cap" style={{ lineHeight: 1.5 }}>Renova todos os anos. Cancela quando quiseres — a sala fica aberta até ao fim do período.</span>
            </div>
          </div>

          {/* card form */}
          <div className="fade" style={{ animationDelay: ".06s" }}>
            <label className="label">Dados do cartão</label>
            <div style={{ position: "relative", marginBottom: 12 }}>
              <input className="box" inputMode="numeric" placeholder="1234 1234 1234 1234" value={card}
                onChange={e => setCard(fmtCard(e.target.value))} style={{ paddingRight: 56 }} />
              <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", fontSize: 12, fontWeight: 900,
                letterSpacing: ".06em", color: brand ? "var(--accent)" : "var(--ink-3)" }}>{brand || "••••"}</span>
            </div>
            <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
              <input className="box" inputMode="numeric" placeholder="MM / AA" value={exp} onChange={e => setExp(fmtExp(e.target.value))} style={{ flex: 1 }} />
              <input className="box" inputMode="numeric" placeholder="CVC" value={cvc} onChange={e => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4))} style={{ flex: 1 }} />
            </div>
            <input className="box" placeholder="Nome no cartão" value={name} onChange={e => setName(e.target.value)} style={{ marginBottom: 24 }} />
            <Button variant="primary" block disabled={!valid || busy} onClick={pay}>
              {busy ? <><Spinner /> A processar…</> : <><Icon name="lock" size={16} /> Pagar {tier.price}€</>}
            </Button>
            <p style={{ textAlign: "center", marginTop: 14, display: "flex", justifyContent: "center", alignItems: "center", gap: 6 }}>
              <span className="cap">Pagamento seguro via</span>
              <span style={{ fontWeight: 900, fontSize: 14, letterSpacing: "-0.02em", color: "var(--ink-2)" }}>stripe</span>
            </p>
          </div>
        </div>
      </Centered>
    </>
  );
}
function SumRow({ l, r, sub }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
      <div><div className="small" style={{ color: "var(--ink)" }}>{l}</div>{sub && <div className="cap" style={{ marginTop: 2 }}>{sub}</div>}</div>
      <span className="small" style={{ color: "var(--ink)", fontWeight: 700 }}>{r}</span>
    </div>
  );
}

function WelcomeIn({ D, onEnter }) {
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, position: "relative", overflow: "hidden" }}>
      <Kanji ch="縁" size={520} style={{ top: "50%", left: "50%", transform: "translate(-50%,-50%)" }} />
      <div className="rise" style={{ position: "relative", textAlign: "center", maxWidth: 480 }}>
        <Brush size={92} color="var(--accent)" style={{ margin: "0 auto 32px" }} />
        <Eyebrow accent>Estás dentro</Eyebrow>
        <h1 className="display" style={{ fontSize: "clamp(40px,6vw,64px)", margin: "18px 0 0" }}>Bem-vindo a casa.</h1>
        <div className="rule" style={{ margin: "26px auto" }} />
        <p className="body-lg" style={{ margin: "0 auto 40px", maxWidth: 380 }}>
          A porta dos fundos é tua agora. O balcão guarda-te um banco, a garrafa espera o teu nome.
        </p>
        <Button variant="primary" onClick={onEnter} icon="arrowR" style={{ minWidth: 240 }}>Entrar na EN House</Button>
        <p style={{ marginTop: 22 }}><span className="cap">{D.club.gloss}</span></p>
      </div>
    </div>
  );
}

Object.assign(window, { Payment, SumRow, WelcomeIn });