// Success page
const SuccessPage = ({ lang, ccy, query, vehicle, reservationResult, onHome }) => {
  const ref = reservationResult?.referenceCode ||
    ("ENG-" + Math.random().toString(36).slice(2, 8).toUpperCase() + "-" + Math.floor(Math.random() * 9999).toString().padStart(4, "0"));
  const fromName = query.from?.name || "Antalya Havalimanı (AYT)";
  const toName = query.to?.name || "Lara Bölgesi";

  return (
    <div className="page-section" style={{ background: "var(--gray-50)", padding: 0 }}>
      <div className="success-page">
        <div className="success-icon">
          <Icon name="check" size={44}/>
        </div>
        <h1>Rezervasyonunuz onaylandı!</h1>
        <p className="lead">Onay e-postası ve şoför bilgileri kayıtlı e-posta adresinize gönderildi. WhatsApp üzerinden de bilgilendirileceksiniz.</p>

        <div className="success-ref">
          <span style={{ color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".1em", fontSize: 11 }}>Rezervasyon No</span>
          <b>{ref}</b>
        </div>

        <div className="success-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", marginBottom: 24, paddingBottom: 20, borderBottom: "1px solid var(--gray-100)" }}>
            <div>
              <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".1em" }}>Yolculuk</div>
              <div style={{ fontSize: 18, fontWeight: 700, fontFamily: "var(--font-display)", marginTop: 4 }}>{fromName} → {toName}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".1em" }}>Tarih</div>
              <div style={{ fontSize: 18, fontWeight: 700, fontFamily: "var(--font-display)", marginTop: 4 }}>{query.pickupDate || "12.05.2026"} · {query.pickupTime || "14:30"}</div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 4 }}>Araç</div>
              <div style={{ fontWeight: 600 }}>{vehicle?.name || "VIP Premium Transfer"}</div>
              <div style={{ fontSize: 13, color: "var(--gray-500)" }}>{vehicle?.model || "Mercedes E-Class"}</div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 4 }}>Toplam Ödenen</div>
              <div style={{ fontWeight: 700, fontFamily: "var(--font-display)", fontSize: 22 }}>
                {fmtPrice(vehicle?.priceTry || 2400, ccy).symbol}{fmtPrice(vehicle?.priceTry || 2400, ccy).value}
              </div>
            </div>
          </div>

          <div style={{ padding: 16, background: "var(--gray-50)", borderRadius: 10, fontSize: 13, color: "var(--gray-700)", display: "flex", gap: 10, alignItems: "start" }}>
            <Icon name="info" size={16} style={{ color: "var(--blue)", marginTop: 2 }}/>
            <div>Şoförünüzün adı, telefon numarası ve plaka bilgileri yolculuk başlamadan <b>2 saat önce</b> SMS ve e-posta ile size iletilecektir.</div>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 32 }}>
          <button className="btn btn-ghost"><Icon name="mail" size={15}/> E-postayı Yeniden Gönder</button>
          <button className="btn btn-secondary" onClick={onHome}>Ana Sayfaya Dön</button>
          <button className="btn btn-primary"><Icon name="whatsapp" size={15}/> WhatsApp ile Devam Et</button>
        </div>
      </div>
    </div>
  );
};

window.SuccessPage = SuccessPage;