// pages/payment.jsx — success + failed states

function PaymentSuccessPage({ go }) {
  return (
    <div style={{ minHeight: "100vh", background: "var(--paper)", display: "flex", alignItems: "center", padding: "48px 0" }}>
      <div className="container-narrow" style={{ textAlign: "center" }}>
        {/* Success mark */}
        <div style={{ width: 96, height: 96, borderRadius: "50%", background: "var(--green-100)", color: "var(--green)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24, animation: "pop .4s ease" }}>
          <Icon name="check" size={48} stroke={3}/>
        </div>
        <style>{`@keyframes pop { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }`}</style>

        <div className="eyebrow" style={{ color: "var(--green)" }}>Payment successful</div>
        <h1 style={{ marginTop: 12, fontSize: "clamp(36px, 4.4vw, 60px)" }}>You're in.</h1>
        <p style={{ marginTop: 16, fontSize: 18, color: "var(--ink-2)", maxWidth: 520, margin: "16px auto 0" }}>
          Welcome to the Aug 2025 batch. Your seat is reserved, your dashboard is unlocked, and your first class is just around the corner.
        </p>

        <div className="card" style={{ marginTop: 40, textAlign: "left", padding: 0, overflow: "hidden", maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ padding: 24, borderBottom: "1px solid var(--line-2)" }}>
            <div className="row between" style={{ alignItems: "flex-start" }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Your batch</div>
                <h3 style={{ marginTop: 8 }}>ISC-XII Aug 2025</h3>
                <p className="muted" style={{ marginTop: 4, fontSize: 14 }}>ISC Class 12 — Computer Science</p>
              </div>
              <span className="pill pill-green pill-dot">Active</span>
            </div>
          </div>
          <div style={{ padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <KV label="First class"   value="Mon, Aug 04 · 7:00 PM" />
            <KV label="Schedule"      value="Mon & Thu · 90 min" />
            <KV label="Access until"  value="Feb 04, 2026" />
            <KV label="Order ID"      value="rzp_QF8gN2qWxLnVbT" mono />
          </div>
        </div>

        <div className="row gap-12" style={{ justifyContent: "center", marginTop: 32 }}>
          <button className="btn btn-primary btn-lg" onClick={() => go("/dashboard")}>
            Go to dashboard <Icon name="arrow-right" size={18}/>
          </button>
          <button className="btn btn-secondary btn-lg" onClick={() => window.print()}>
            <Icon name="download" size={16}/> Receipt
          </button>
        </div>

        <div style={{ marginTop: 48, fontSize: 13, color: "var(--ink-3)" }}>
          A confirmation email has been sent. Need help? <a href="mailto:revathi@computertution.in" style={{ color: "var(--blue)" }}>revathi@computertution.in</a>
        </div>
      </div>
    </div>
  );
}

const KV = ({ label, value, mono }) => (
  <div>
    <div style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>{label}</div>
    <div style={{ marginTop: 6, fontWeight: 500, fontFamily: mono ? "var(--font-mono)" : "inherit", fontSize: mono ? 13 : 15 }}>{value}</div>
  </div>
);

function PaymentFailedPage({ go }) {
  return (
    <div style={{ minHeight: "100vh", background: "var(--paper)", display: "flex", alignItems: "center", padding: "48px 0" }}>
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <div style={{ width: 96, height: 96, borderRadius: "50%", background: "var(--red-100)", color: "var(--red)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
          <Icon name="x" size={48} stroke={3}/>
        </div>

        <div className="eyebrow" style={{ color: "var(--red)" }}>Payment failed</div>
        <h1 style={{ marginTop: 12, fontSize: "clamp(36px, 4.4vw, 60px)" }}>That didn't go through.</h1>
        <p style={{ marginTop: 16, fontSize: 18, color: "var(--ink-2)", maxWidth: 540, margin: "16px auto 0" }}>
          Your card or UPI was declined and no amount was deducted. If money was debited, it will be refunded automatically within 5 working days.
        </p>

        <div className="card" style={{ marginTop: 40, textAlign: "left", maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
          <div className="row between" style={{ alignItems: "flex-start" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Attempted payment</div>
              <h3 style={{ marginTop: 8 }}>ISC-XII Aug 2025 · ₹1,800</h3>
              <p className="muted" style={{ marginTop: 4, fontSize: 14 }}>UPI · rzp_QF8gN2qWxLnVbT</p>
            </div>
            <span className="pill pill-red pill-dot">Failed</span>
          </div>
          <div style={{ marginTop: 20, padding: 16, background: "var(--paper)", borderRadius: 12, fontSize: 13, color: "var(--ink-2)" }}>
            <div style={{ fontWeight: 600, marginBottom: 8, color: "var(--ink)" }}>What to try</div>
            <ul style={{ paddingLeft: 20, margin: 0, lineHeight: 1.7 }}>
              <li>Use a different UPI app or bank card</li>
              <li>Check daily transaction limit on your bank</li>
              <li>Try again in a few minutes — bank servers can be busy</li>
            </ul>
          </div>
        </div>

        <div className="row gap-12" style={{ justifyContent: "center", marginTop: 32 }}>
          <button className="btn btn-primary btn-lg" onClick={() => go("/signup")}>
            Try again <Icon name="arrow-right" size={18}/>
          </button>
          <a className="btn btn-secondary btn-lg" href="mailto:revathi@computertution.in">
            <Icon name="mail" size={16}/> Contact support
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PaymentSuccessPage, PaymentFailedPage });