import Link from "next/link";

import OrderTrackingForm from "./OrderTrackingForm";


export default function OrderTrackingPage() {
  return (
    <main className="min-h-screen bg-[#fffaf4] text-[#2b2118]">

      {/* =========================================
          HEADER
      ========================================== */}

      <header className="sticky top-0 z-50 border-b border-black/5 bg-[#fffaf4]/95 backdrop-blur">

        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-10">

          <Link
            href="/"
            className="text-2xl font-black tracking-[0.22em]"
          >
            PELCY
          </Link>


          {/* DESKTOP NAVIGATION */}
          <nav className="hidden items-center gap-8 text-sm font-medium md:flex">

            <Link
              href="/"
              className="transition hover:opacity-60"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="transition hover:opacity-60"
            >
              Products
            </Link>


            <Link
              href="/#about"
              className="transition hover:opacity-60"
            >
              About
            </Link>


            <Link
              href="/#contact"
              className="transition hover:opacity-60"
            >
              Contact
            </Link>


            <Link
              href="/order-tracking"
              className="font-black text-[#a46b2a]"
            >
              Track Order
            </Link>

          </nav>


          <Link
            href="/#products"
            className="rounded-full bg-[#2b2118] px-5 py-3 text-sm font-black text-white transition hover:opacity-90"
          >
            Shop Now
          </Link>

        </div>


        {/* MOBILE NAVIGATION */}
        <nav className="border-t border-black/5 md:hidden">

          <div className="flex items-center gap-6 overflow-x-auto px-5 py-3 text-sm font-semibold">

            <Link
              href="/"
              className="shrink-0"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="shrink-0"
            >
              Products
            </Link>


            <Link
              href="/order-tracking"
              className="shrink-0 rounded-full bg-[#2b2118] px-4 py-2 font-bold text-white"
            >
              Track Order
            </Link>

          </div>

        </nav>

      </header>


      {/* =========================================
          HERO / INTRO
      ========================================== */}

      <section className="mx-auto max-w-5xl px-5 py-10 md:px-10 md:py-16">

        <Link
          href="/"
          className="inline-flex items-center gap-2 text-sm font-bold text-black/50 transition hover:text-black"
        >
          ← Back to PELCY
        </Link>


        <div className="mt-8">

          <p className="text-sm font-black uppercase tracking-[0.2em] text-[#a46b2a]">
            PELCY Order Tracking
          </p>


          <h1 className="mt-3 max-w-3xl text-4xl font-black leading-tight md:text-6xl">
            Where is my order?
          </h1>


          <p className="mt-5 max-w-2xl text-lg leading-8 text-black/55">
            Enter the order number and phone number used
            during checkout to see your payment status,
            fulfilment progress and delivery updates.
          </p>

        </div>


        {/* =========================================
            TRACKING FORM
        ========================================== */}

        <div className="mt-10">

          <OrderTrackingForm />

        </div>

      </section>


      {/* =========================================
          HELP SECTION
      ========================================== */}

      <section className="border-t border-black/5 bg-[#f1e5d8]">

        <div className="mx-auto max-w-5xl px-5 py-12 md:px-10">

          <div className="grid gap-5 md:grid-cols-3">

            <InfoCard
              icon="🔎"
              title="Find Your Order"
              text="Use the exact order number provided after checkout or payment."
            />


            <InfoCard
              icon="📱"
              title="Use Your Phone Number"
              text="Enter the same phone or WhatsApp number used when the order was placed."
            />


            <InfoCard
              icon="📦"
              title="Follow Delivery"
              text="See when your order is received, confirmed, prepared, dispatched and delivered."
            />

          </div>

        </div>

      </section>


      {/* =========================================
          FOOTER
      ========================================== */}

      <footer className="bg-[#19130f] text-white">

        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-7 px-5 py-10 md:flex-row md:items-center md:px-10">

          <div>

            <p className="text-xl font-black tracking-[0.2em]">
              PELCY
            </p>

            <p className="mt-2 text-sm text-white/45">
              Fresh goodness, delivered.
            </p>

          </div>


          <div className="flex flex-wrap gap-5 text-sm text-white/60">

            <Link
              href="/"
              className="transition hover:text-white"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="transition hover:text-white"
            >
              Products
            </Link>


            <Link
              href="/cart"
              className="transition hover:text-white"
            >
              Cart
            </Link>


            <Link
              href="/order-tracking"
              className="font-bold text-white"
            >
              Track Order
            </Link>

          </div>


          <p className="text-sm text-white/45">
            © 2026 PELCY. All rights reserved.
          </p>

        </div>

      </footer>

    </main>
  );
}


/* =============================================
   INFO CARD
============================================= */

function InfoCard({
  icon,
  title,
  text,
}: {
  icon: string;
  title: string;
  text: string;
}) {
  return (
    <div className="rounded-[24px] bg-white p-6">

      <div className="text-2xl">
        {icon}
      </div>


      <h3 className="mt-4 text-lg font-black">
        {title}
      </h3>


      <p className="mt-2 text-sm leading-6 text-black/50">
        {text}
      </p>

    </div>
  );
}