import Image from "next/image";
import { joomlaService } from "@/services/joomlaService";
import { getNavigationData } from "@/app/api/navigation/route";
import { Breadcrumb } from "@/components/common/Breadcrumb";
import { SampleCategoryGrid } from "@/components/common/SampleCategoryGrid";
import { SamplesPromoStrip } from "@/components/common/SamplesPromoStrip";
import { siteName } from "@/lib/pageHelpers";
import { SAMPLES_BADGES, SAMPLES_SEO_CONTENT_HTML } from "./samplesConstants";

export async function SamplesIndexPage({ basePath = "/free-samples" }: { basePath?: string } = {}) {
  const rootAlias = basePath === "/answers" ? "answers" : "free-samples";
  const [categories, navigationData] = await Promise.all([
    joomlaService.getSampleCategories(rootAlias),
    getNavigationData(),
  ]);
  const totalSamples = categories.reduce((sum, c) => sum + c.count, 0);

  return (
    <div className="min-h-[60vh]">
      {/* Background, spacing and the four feature icons match the live
          `.sample-top-banner` rule (landing-samples.css) exactly, including
          its radial gradient and decorative corner doodles — everything
          except the subtitle copy, which stays real/dynamic instead of the
          template's generic marketing line. */}
      <section
        className="relative overflow-hidden text-white text-center py-[30px] px-4 sm:px-6 lg:px-8"
        style={{ background: "radial-gradient(50% 50% at 50% 50%, #759B45 0%, #5F8037 100%)" }}
      >
        <Image
          src="/icons/pen-doodle-1.svg"
          alt=""
          width={115}
          height={112}
          className="hidden sm:block absolute top-0 right-0 pointer-events-none select-none"
        />
        <Image
          src="/icons/pen-doodle-2.svg"
          alt=""
          width={97}
          height={116}
          className="hidden sm:block absolute bottom-0 left-8 pointer-events-none select-none"
        />

        <div className="relative z-[1] max-w-3xl mx-auto space-y-1">
          <h1 className="text-[28px] sm:text-[32px] leading-tight sm:leading-[38px] font-bold">
            {basePath === "/answers" ? "Free Samples of Assignments" : "Free Samples of Assignments"}
          </h1>
          <p className="text-[15px] sm:text-base leading-[19px] text-green-50 my-[15px]">
            Browse {totalSamples.toLocaleString()}+ real assignment samples across {categories.length} subjects to
            see the writing standard behind {siteName}.
          </p>
          <a
            href="#samples-grid"
            className="inline-block rounded px-[9px] py-[6px] mb-[15px] font-bold text-sm text-white"
            style={{ background: "#f58e0e" }}
          >
            Explore Free Samples
          </a>
        </div>

        <div className="relative z-[1] flex flex-wrap items-center justify-center gap-x-[30px] gap-y-4 mt-4">
          {SAMPLES_BADGES.map(({ src, width, height, top, bottom, topIsBadge }) => (
            <div key={bottom} className="flex items-center gap-1.5 text-left">
              <Image src={src} alt="" width={width} height={height} className="shrink-0" style={{ width, height }} />
              <p className="text-[19px] leading-[25px]">
                {topIsBadge ? (
                  <span className="inline-block bg-[#333333] text-[14px] leading-[19px] rounded px-1">{top}</span>
                ) : (
                  <span>{top}</span>
                )}
                <span className="block text-base leading-[21px]">{bottom}</span>
              </p>
            </div>
          ))}
        </div>
      </section>

      <div id="samples-grid" className="bg-white">
        {/* Sits between the banner and the filter row, matching where
            default_children.php renders the breadcrumbs module. */}
        <Breadcrumb items={[{ label: basePath === "/answers" ? "Answers" : "Samples" }]} />

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-10 pt-4">
          {categories.length === 0 ? (
            <p className="text-sm text-slate-500 text-center">No sample subjects available right now.</p>
          ) : (
            <SampleCategoryGrid
              categories={categories}
              basePath={basePath}
              searchPlaceholder={basePath === "/answers" ? "Search your Answers" : "Search your samples"}
            />
          )}
        </div>
      </div>
    </div>
  );
}