import React from "react";
import Image from "next/image";

/**
 * The real `.sample-order-strip` CTA band from the live category template
 * (`default_children.php`) — previously only implemented on the root
 * `/free-samples` page; extracted here so `/free-samples/[subject]` can
 * reuse the identical real markup/styling instead of a re-typed copy.
 */
export function SamplesPromoStrip({ orderNowUrl }: { orderNowUrl: string }) {
  return (
    <div
      className="rounded-[20px] flex items-center justify-between gap-6 p-4 sm:p-6"
      style={{ background: "linear-gradient(89.76deg, #7F9C34 0%, #559700 99.89%)" }}
    >
      <Image
        src="/images/man-with-diary.png"
        alt=""
        width={220}
        height={230}
        className="hidden sm:block shrink-0 -my-5 w-[140px] lg:w-[200px] h-auto object-contain"
      />
      <div className="flex-1 flex flex-wrap items-center justify-between gap-4 bg-white rounded-[20px] px-5 py-5 sm:px-8">
        <div>
          <h2 className="text-xl sm:text-[28px] leading-tight font-bold text-slate-900 mb-1.5">
            Achieve Your Samples With Professional AI-Free Academic Support
          </h2>
          <p className="text-sm sm:text-lg text-slate-700">
            Skilled Professionals to Handle All Your Subjects and Challenges
          </p>
        </div>
        <a
          href={orderNowUrl}
          className="shrink-0 inline-flex items-center rounded-[10px] px-6 py-2 font-bold text-white text-lg shadow-sm hover:shadow-md transition-shadow"
          style={{ background: "#F58E0E" }}
        >
          Order Now
        </a>
      </div>
    </div>
  );
}