// Payment + Success
const PaymentPage = ({ lang, ccy, query, vehicle, onConfirm, onBack }) => {
  const [pm, setPm] = React.useState("card");
  const [card, setCard] = React.useState({ num: "", name: "", exp: "", cvv: "" });
  const [accept, setAccept] = React.useState(false);

  return (
    <div className="page-section">
      <div className="booking-layout">
        <div>
          <button className="btn btn-ghost" style={{ marginBottom: 16 }} onClick={onBack}>
            <Icon name="arrowLeft" size={14}/> Detaylara dön
          </button>
          <StepsBar step={3}/>

          <div className="booking-card">
            <h2>Ödeme Yöntemi</h2>
            <p className="sub">Güvenli SSL bağlantısı üzerinden, 256-bit şifrelemeyle.</p>

            <div className="pm-row">
              <div className={"pm-card " + (pm === "card" ? "active" : "")} onClick={() => setPm("card")}>
                <div className="pm-icon"><Icon name="creditCard" size={18}/></div>
                Kredi / Banka Kartı
              </div>
              <div className={"pm-card " + (pm === "paypal" ? "active" : "")} onClick={() => setPm("paypal")}>
                <div className="pm-icon" style={{ fontFamily: "var(--font-mono)" }}>P</div>
                PayPal
              </div>
              <div className={"pm-card " + (pm === "cash" ? "active" : "")} onClick={() => setPm("cash")}>
                <div className="pm-icon"><Icon name="eur" size={18}/></div>
                Şoföre Nakit
              </div>
            </div>

            {pm === "card" && (
              <>
                <div className="card-mock">
                  <div className="card-mock-row">
                    <div className="card-chip"></div>
                    <div style={{ fontSize: 11, opacity: .7, fontFamily: "var(--font-mono)", letterSpacing: ".15em" }}>VISA</div>
                  </div>
                  <div className="card-num">{card.num || "•••• •••• •••• ••••"}</div>
                  <div className="card-row-bottom">
                    <div>
                      <div className="label">Kart Sahibi</div>
                      <div className="v">{card.name || "AD SOYAD"}</div>
                    </div>
                    <div>
                      <div className="label">SKT</div>
                      <div className="v">{card.exp || "AA/YY"}</div>
                    </div>
                  </div>
                </div>

                <div className="form-grid">
                  <div className="form-field span-2">
                    <label>Kart Numarası</label>
                    <input value={card.num} onChange={e => setCard(c => ({ ...c, num: e.target.value }))} placeholder="1234 5678 9012 3456"/>
                  </div>
                  <div className="form-field span-2">
                    <label>Kart Sahibinin Adı</label>
                    <input value={card.name} onChange={e => setCard(c => ({ ...c, name: e.target.value.toUpperCase() }))} placeholder="MEHMET YILMAZ"/>
                  </div>
                  <div className="form-field">
                    <label>Son Kullanma</label>
                    <input value={card.exp} onChange={e => setCard(c => ({ ...c, exp: e.target.value }))} placeholder="12/28"/>
                  </div>
                  <div className="form-field">
                    <label>CVV</label>
                    <input value={card.cvv} onChange={e => setCard(c => ({ ...c, cvv: e.target.value }))} placeholder="123" maxLength={4}/>
                  </div>
                </div>
              </>
            )}

            {pm === "paypal" && (
              <div style={{ padding: 32, textAlign: "center", background: "var(--gray-50)", borderRadius: 12 }}>
                <div style={{ fontSize: 18, fontWeight: 700, color: "var(--blue)" }}>PayPal'a yönlendirileceksiniz</div>
                <div style={{ fontSize: 13, color: "var(--gray-500)", marginTop: 6 }}>"Ödemeyi Tamamla" butonuna bastığınızda güvenli PayPal sayfasına yönlendirilirsiniz.</div>
              </div>
            )}

            {pm === "cash" && (
              <div style={{ padding: 20, background: "rgba(245,158,11,.06)", border: "1px solid rgba(245,158,11,.2)", borderRadius: 12, fontSize: 13.5, color: "#92400E" }}>
                <Icon name="info" size={16} style={{ verticalAlign: "middle", marginRight: 6 }}/>
                Ödemeniz şoförümüze nakit olarak yapılacaktır. Lütfen tam tutarı (TRY/EUR/USD) hazır bulundurunuz.
              </div>
            )}

            <div className="security-note" style={{ marginTop: 18 }}>
              <Icon name="lock" size={16} className="icon"/>
              <div>
                <b>Güvenli ödeme</b> · Kart bilgileriniz 256-bit SSL ile şifrelenir, hiçbir şekilde saklanmaz. PCI-DSS uyumlu altyapı.
              </div>
            </div>
          </div>

          <div className="booking-card">
            <h2>Şartlar & Onaylar</h2>
            <label className="checkbox-row" style={{ marginBottom: 6 }}>
              <input type="checkbox" checked={accept} onChange={e => setAccept(e.target.checked)}/>
              <div>
                <div className="name">Kullanım şartlarını ve iptal politikasını okudum, kabul ediyorum.</div>
                <div className="desc">Yolculuk başlangıcına 24 saat kala ücretsiz iptal hakkınız vardır.</div>
              </div>
            </label>
            <label className="checkbox-row">
              <input type="checkbox" defaultChecked/>
              <div>
                <div className="name">Kişisel verilerimin işlenmesine onay veriyorum (KVKK).</div>
                <div className="desc">Sadece rezervasyonun yürütülmesi için kullanılır.</div>
              </div>
            </label>
          </div>

          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", alignItems: "center" }}>
            <div style={{ marginRight: "auto", fontSize: 13, color: "var(--gray-500)" }}>
              <Icon name="lock" size={14} style={{ verticalAlign: "middle", color: "#16A34A" }}/> SSL · 256-bit · PCI-DSS
            </div>
            <button className="btn btn-ghost" onClick={onBack}>Geri</button>
            <button className={"btn btn-primary btn-lg" + (accept ? "" : "")}
                    style={{ opacity: accept ? 1 : .5, pointerEvents: accept ? "auto" : "none" }}
                    onClick={onConfirm}>
              <Icon name="lock" size={15}/> Ödemeyi Tamamla
            </button>
          </div>
        </div>

        <BookingSummary vehicle={vehicle} query={query} ccy={ccy}/>
      </div>
    </div>
  );
};

window.PaymentPage = PaymentPage;