import Image from "next/image";
import Link from "next/link";

import CartButton from "./components/CartButton";
import ProductGrid from "./components/ProductGrid";
import ProductVideo from "./components/ProductVideo";


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

      {/* ===================================================
          NAVIGATION
      ==================================================== */}

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

        {/* MAIN HEADER ROW */}
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-10">

          {/* LOGO */}
          <a
            href="#home"
            className="shrink-0"
          >
            <h1 className="text-2xl font-black tracking-[0.2em]">
              PELCY
            </h1>
          </a>


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

            <a
              href="#home"
              className="transition hover:opacity-60"
            >
              Home
            </a>

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

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

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

            <Link
              href="/order-tracking"
              className="font-bold transition hover:opacity-60"
            >
              Track Order
            </Link>

          </nav>


          {/* CART */}
          <CartButton />

        </div>


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

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

            <a
              href="#home"
              className="shrink-0 transition hover:opacity-60"
            >
              Home
            </a>

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

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

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

            <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
      ==================================================== */}

      <section
        id="home"
        className="mx-auto grid max-w-7xl items-center gap-10 px-5 py-12 md:grid-cols-2 md:px-10 md:py-20"
      >

        <div>

          <p className="mb-4 text-sm font-bold uppercase tracking-[0.25em] text-[#9b6a44]">
            Fresh • Healthy • Delicious
          </p>


          <h2 className="max-w-xl text-5xl font-black leading-[1.05] md:text-7xl">
            Good food.
            <br />
            Made fresh.
            <br />
            Delivered.
          </h2>


          <p className="mt-6 max-w-lg text-lg leading-8 text-black/60">
            Enjoy delicious PELCY granola, creamy yoghurt,
            refreshing parfaits and nutritious fruit bowls,
            freshly prepared for you.
          </p>


          <div className="mt-8 flex flex-wrap gap-4">

            <a
              href="#products"
              className="rounded-full bg-[#2b2118] px-7 py-4 font-bold text-white transition hover:scale-105"
            >
              Order Now
            </a>


            <a
              href="#videos"
              className="rounded-full border border-[#2b2118] px-7 py-4 font-bold transition hover:bg-[#2b2118] hover:text-white"
            >
              Watch Our Products
            </a>


            <Link
              href="/order-tracking"
              className="rounded-full border border-[#9b6a44] px-7 py-4 font-bold text-[#9b6a44] transition hover:bg-[#9b6a44] hover:text-white"
            >
              Track Your Order
            </Link>

          </div>

        </div>


        {/* HERO PRODUCT IMAGE */}
        <div className="relative overflow-hidden rounded-[32px] shadow-xl">

          <Image
            src="/products/hero.jpg"
            alt="PELCY fresh breakfast bowl"
            width={900}
            height={1100}
            priority
            className="h-[500px] w-full object-cover md:h-[650px]"
          />


          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 to-transparent p-8 pt-24 text-white">

            <p className="text-sm font-semibold uppercase tracking-[0.2em]">
              PELCY
            </p>


            <h3 className="mt-2 text-3xl font-black">
              Fresh goodness in every bite.
            </h3>


            <p className="mt-2 text-white/80">
              Healthy choices can still taste amazing.
            </p>

          </div>

        </div>

      </section>


      {/* ===================================================
          CATEGORIES
      ==================================================== */}

      <section className="border-y border-black/5 bg-white">

        <div className="mx-auto grid max-w-7xl grid-cols-2 gap-4 px-5 py-8 md:grid-cols-4 md:px-10">

          <Category
            name="Granola"
            icon="🥣"
          />

          <Category
            name="Yoghurt"
            icon="🥛"
          />

          <Category
            name="Parfait"
            icon="🍓"
          />

          <Category
            name="Fruit Bowls"
            icon="🥝"
          />

        </div>

      </section>


      {/* ===================================================
          PRODUCTS
      ==================================================== */}

      <section
        id="products"
        className="mx-auto max-w-7xl px-5 py-20 md:px-10"
      >

        <div className="mb-10">

          <p className="text-sm font-bold uppercase tracking-[0.2em] text-[#9b6a44]">
            Shop PELCY
          </p>


          <h2 className="mt-2 text-4xl font-black md:text-5xl">
            Popular Products
          </h2>


          <p className="mt-3 max-w-xl text-black/60">
            Deliciously prepared favourites for breakfast,
            lunch, snacks or whenever you want something fresh.
          </p>

        </div>


        <ProductGrid />

      </section>


      {/* ===================================================
          VIDEO SECTION
      ==================================================== */}

      <section
        id="videos"
        className="bg-[#f1e5d8]"
      >

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

          <div className="grid items-center gap-12 md:grid-cols-2">

            <div>

              <p className="text-sm font-bold uppercase tracking-[0.2em] text-[#9b6a44]">
                Watch & Order
              </p>


              <h2 className="mt-3 text-4xl font-black md:text-5xl">
                See it.
                <br />
                Love it.
                <br />
                Order it.
              </h2>


              <p className="mt-5 max-w-lg leading-7 text-black/60">
                Watch our freshly prepared products before you order.
                Browse product videos, choose what you want and
                order directly from your phone.
              </p>


              <a
                href="#products"
                className="mt-7 inline-flex rounded-full bg-[#2b2118] px-7 py-4 font-bold text-white transition hover:opacity-90"
              >
                Browse Products
              </a>

            </div>


            <ProductVideo />

          </div>

        </div>

      </section>


      {/* ===================================================
          WHY PELCY
      ==================================================== */}

      <section
        id="about"
        className="bg-[#2b2118] text-white"
      >

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

          <div className="max-w-2xl">

            <p className="text-sm font-bold uppercase tracking-[0.2em] text-white/60">
              Why PELCY?
            </p>


            <h2 className="mt-3 text-4xl font-black md:text-5xl">
              Fresh goodness made simple.
            </h2>

          </div>


          <div className="mt-12 grid gap-8 md:grid-cols-3">

            <Feature
              number="01"
              title="Freshly Prepared"
              text="Quality ingredients carefully prepared to give you fresh and delicious products."
            />


            <Feature
              number="02"
              title="Secure Payment"
              text="Convenient online payment with secure payment verification."
            />


            <Feature
              number="03"
              title="Easy Delivery"
              text="Select your products, provide your location and let PELCY take care of the rest."
            />

          </div>

        </div>

      </section>


      {/* ===================================================
          ORDER TRACKING PROMOTION
      ==================================================== */}

      <section className="bg-[#f1e5d8]">

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

          <div className="flex flex-col items-start justify-between gap-8 rounded-[32px] bg-white p-8 shadow-sm md:flex-row md:items-center md:p-10">

            <div>

              <p className="text-sm font-black uppercase tracking-[0.2em] text-[#9b6a44]">
                Already Ordered?
              </p>


              <h2 className="mt-3 text-3xl font-black md:text-4xl">
                Track your PELCY order.
              </h2>


              <p className="mt-3 max-w-xl leading-7 text-black/55">
                Enter your order number and the phone number used
                during checkout to see your payment and delivery
                progress.
              </p>

            </div>


            <Link
              href="/order-tracking"
              className="shrink-0 rounded-full bg-[#2b2118] px-8 py-4 font-black text-white transition hover:scale-105"
            >
              Track My Order
            </Link>

          </div>

        </div>

      </section>


      {/* ===================================================
          CONTACT / CTA
      ==================================================== */}

      <section
        id="contact"
        className="bg-[#fffaf4]"
      >

        <div className="mx-auto max-w-7xl px-5 py-20 text-center md:px-10">

          <p className="text-sm font-bold uppercase tracking-[0.2em] text-[#9b6a44]">
            Ready to order?
          </p>


          <h2 className="mx-auto mt-3 max-w-3xl text-4xl font-black md:text-6xl">
            Your next delicious PELCY experience is only a few taps away.
          </h2>


          <div className="mt-8 flex flex-wrap justify-center gap-4">

            <a
              href="#products"
              className="rounded-full bg-[#2b2118] px-8 py-4 font-bold text-white transition hover:opacity-90"
            >
              Start Shopping
            </a>


            <Link
              href="/order-tracking"
              className="rounded-full border border-[#2b2118] px-8 py-4 font-bold transition hover:bg-[#2b2118] hover:text-white"
            >
              Track Existing Order
            </Link>

          </div>

        </div>

      </section>


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

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

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

          <div className="flex flex-col justify-between gap-8 md:flex-row md:items-end">

            <div>

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


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

            </div>


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

              <a
                href="#home"
                className="transition hover:text-white"
              >
                Home
              </a>

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

              <Link
                href="/order-tracking"
                className="transition hover:text-white"
              >
                Track Order
              </Link>

            </div>


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

          </div>

        </div>

      </footer>

    </main>
  );
}


/* =========================================================
   CATEGORY
========================================================= */

function Category({
  name,
  icon,
}: {
  name: string;
  icon: string;
}) {
  return (
    <div className="flex items-center gap-3 rounded-2xl bg-[#fffaf4] p-4 text-left transition hover:-translate-y-1">

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

      <span className="font-bold">
        {name}
      </span>

    </div>
  );
}


/* =========================================================
   FEATURE
========================================================= */

function Feature({
  number,
  title,
  text,
}: {
  number: string;
  title: string;
  text: string;
}) {
  return (
    <div>

      <span className="text-sm text-white/40">
        {number}
      </span>


      <h3 className="mt-3 text-xl font-bold">
        {title}
      </h3>


      <p className="mt-3 leading-7 text-white/60">
        {text}
      </p>

    </div>
  );
}