/* DOMINANCE — Page 3: Confirmation */

function ConfirmPage({ tweaks, navigate }) {
  return (
    <>
      <TopNav wordmark={true} status="Application received" right={<span className="meta">RECEIVED · 24H REPLY</span>} />
      <main className="confirm">
        <div className="confirm-card fade-in">
          <div className="confirm-mark fade-in">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12.5l4.5 4.5L19 7.5" />
            </svg>
          </div>

          <img
            src="assets/dominance-wordmark-white.png"
            alt="DOMINANCE"
            className="confirm-wordmark fade-in-2"
          />

          <h1 className="display fade-in-2" style={{ fontSize: "clamp(40px, 5.6vw, 72px)" }}>
            Application received.
          </h1>

          <p className="lede fade-in-3" style={{ textAlign: "center", maxWidth: "52ch" }}>
            I personally review every application within 24 hours.
            You'll hear back from me — whether it's a yes or a no.
          </p>

          <div className="confirm-divider fade-in-3" />

          <p className="confirm-small fade-in-4">
            Check your inbox (and spam folder, just in case).<br />
            I respond from <a href="mailto:nik@dominance.business">nik@dominance.business</a>.
          </p>

          <div className="confirm-sig fade-in-4" style={{ marginTop: 4 }}>— Nik</div>

          <div className="fade-in-4" style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-3)", display: "flex", gap: 14, alignItems: "center" }}>
            <span style={{ width: 6, height: 6, background: "var(--accent)", borderRadius: "50%", boxShadow: "0 0 8px var(--accent)" }} />
            <span>Ref. {Math.random().toString(36).slice(2, 8).toUpperCase()}-{new Date().getFullYear()}</span>
            <span>·</span>
            <span>Reply within 24h</span>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

window.ConfirmPage = ConfirmPage;