"use client";

import { useEffect } from "react";
import Link from "next/link";
import Container from "@/components/ui/Container";
import { clearStoredCart } from "@/lib/store-api";

/** Landing page Stripe redirects to after a successful ONLINE payment. */
export default function CheckoutSuccessPage() {
  useEffect(() => {
    clearStoredCart();
  }, []);

  return (
    <section className="py-24">
      <Container className="max-w-lg mx-auto text-center">
        <p className="text-[11px] font-bold uppercase tracking-[0.15em] text-[#b08968]">3 — Confirmation</p>
        <h1 className="mt-3 font-black uppercase text-3xl text-[#1d2739]">Thank you for your order</h1>
        <p className="mt-4 text-[#515a68]">
          Your payment was successful and your order is being processed. A confirmation email is on its way.
        </p>
        <div className="mt-8">
          <Link
            href="/shop"
            className="inline-flex items-center justify-center bg-[#b08968] hover:bg-[#8f6d51] text-white text-xs font-bold uppercase tracking-wide px-6 py-3 transition-colors"
          >
            Continue Shopping
          </Link>
        </div>
      </Container>
    </section>
  );
}