function ThankYouPage({ navigate }) {
  window.useSeo({
    title: "Thank you · Larissa Fine Art",
    description: "Your order is confirmed at Larissa Fine Art.",
    noindex: true,
  });
  const [status, setStatus] = useState("verifying"); // verifying | confirmed | unknown
  const [orderId] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get("session_id") || "";
  });

  useEffect(() => {
    // We don't fetch Stripe directly from the client. The webhook will
    // mark the painting as sold; here we just give the buyer a beat to
    // breathe before flipping from "verifying" to "confirmed".
    const t = setTimeout(() => setStatus("confirmed"), 1400);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className="page-enter paper-bg" style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "80px 24px" }}>
        <div style={{ maxWidth: 620, width: "100%", textAlign: "center" }}>

          {/* Ornament */}
          <div style={{ display: "inline-flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
            <span className="gold-rule" />
            <span className="eyebrow" style={{ color: "var(--gold-deep)" }}>The Studio</span>
            <span className="gold-rule" />
          </div>

          <div className="h-script" style={{ fontSize: "clamp(48px, 7vw, 84px)", color: "var(--gold-deep)", lineHeight: 1.05 }}>
            Thank you,
          </div>
          <div className="h-script" style={{ fontSize: "clamp(40px, 6vw, 72px)", color: "var(--gold-deep)", lineHeight: 1.05, marginTop: -10 }}>
            for collecting.
          </div>

          <p style={{
            marginTop: 32, fontFamily: "var(--serif)", fontStyle: "italic",
            fontSize: "clamp(18px, 2.1vw, 22px)", lineHeight: 1.6, color: "var(--ink)",
          }}>
            {status === "verifying"
              ? "Confirming your order with our gallery partner…"
              : "Your painting will be lovingly packed and shipped from the studio in rural Ontario. A confirmation has been sent to your email."}
          </p>

          <div style={{
            margin: "44px auto 0", maxWidth: 480,
            padding: 24, background: "var(--warm-white)",
            border: "1px solid var(--line)", borderRadius: 4, textAlign: "left",
          }}>
            <div className="eyebrow" style={{ color: "var(--gold-deep)" }}>What happens next</div>
            <ol style={{
              marginTop: 14, paddingLeft: 22, fontSize: 14.5, lineHeight: 1.85, color: "var(--ink-soft)",
            }}>
              <li>Receipt &amp; confirmation arrive in your inbox within minutes.</li>
              <li>Your painting is wrapped in archival paper and crated for transit.</li>
              <li>Insured shipping is dispatched, typically within 3–5 business days.</li>
              <li>Tracking is sent to you the moment your painting is on its way.</li>
            </ol>
          </div>

          {orderId && (
            <div style={{
              marginTop: 22, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
              color: "var(--ink-mute)",
            }}>
              Order reference · {orderId.slice(-12)}
            </div>
          )}

          <div style={{ marginTop: 40, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("home")}>
              Return to Studio <Icon.ArrowR />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("gallery")}>
              Browse the Gallery
            </button>
          </div>

          <div style={{ marginTop: 60, fontFamily: "var(--script)", fontSize: 28, color: "var(--gold-deep)" }}>
            — Larissa
          </div>
        </div>
      </div>
    </div>
  );
}

window.ThankYouPage = ThankYouPage;