import HeadBack from "@/components/head/HeadBack";
import TrackOrder from "./_components/TrackOrder";
import TrackFaqs from "./_components/TrackFaqs";

export default function TrackOrderPage() {
  return (
    <>
      <HeadBack />
      <div className="min-h-screen bg-[#f0ede4] text-black">
        <div className="max-w-3xl mx-auto px-4 py-8">
          {/* 顶部 Track Order 区域 */}
          <section className="mb-10">
            <h1 className="text-[clamp(1.8rem,4vw,2.5rem)] font-normal mb-6">
              Track Order
            </h1>
            <div className="space-y-3 mb-8 text-base leading-relaxed">
              <p>Want To Check The Status Of Your Order?</p>
              <p>
                Please Input Your Order Number And Click The Track Order Button
                To Find The Tracking Information.
              </p>
            </div>

            <TrackOrder />
          </section>

          {/* FAQ 区域 */}
          <section className="bg-white rounded-[8px] overflow-hidden">
            <h2 className="text-[clamp(1.5rem,3vw,2rem)] font-normal p-6 pb-4">
              People Also Ask
            </h2>
            {/* 问答 */}
            <TrackFaqs />
          </section>

          {/* You May Like 标题区域 */}
          <div className="mt-10">
            <h2 className="text-[clamp(1.4rem,3vw,1.8rem)] font-normal">
              You May Like
            </h2>
            {/* 下方可自行添加商品列表 */}
          </div>
        </div>
      </div>
    </>
  );
}
