import Image from "next/image";
import type { CalculatorConfig } from "@/types/home";
import type { JoomlaArticle, OrderServiceConfig, PricingConfig } from "@/services/joomlaService";
import { ServiceOrderForm } from "@/components/home/ServiceOrderForm";
import { StarRating } from "@/components/common/StarRating";
import { RATING_PLATFORMS, TRUST_BADGES } from "@/components/services/serviceConstants";

interface ServiceBannerProps {
  article: JoomlaArticle;
  hasOurServicesBanner: boolean;
  bannerHeading: string;
  bannerTitle: string;
  bannerSubtitle: string;
  suppressBanner: boolean;
  calculatorConfig: CalculatorConfig;
  orderConfig: OrderServiceConfig[];
  pricing: PricingConfig | null;
}

/**
 * The full-bleed gradient banner section (H1, subtitle, trust badges row,
 * rating-strip pill, `<ServiceOrderForm>`) — matching the live
 * `.banner_landing_pages` rule, whose gradient spans the whole section
 * rather than boxing in just the left-hand column. Suppressed for the 3
 * aliases `suppressBanner` covers — see its comment in `serviceConstants.ts`.
 */
export function ServiceBanner({
  article,
  hasOurServicesBanner,
  bannerHeading,
  bannerTitle,
  bannerSubtitle,
  suppressBanner,
  calculatorConfig,
  orderConfig,
  pricing,
}: ServiceBannerProps) {
  if (suppressBanner) return null;

  return (
    <section
      style={{
        background:
          "linear-gradient(94.59deg, #F3FBE9 0%, #E1ECD3 22.19%, #E2F0D1 50.44%, #ECF2E5 73.85%, #F4FDE9 96.63%)",
      }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-8 lg:py-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 sm:gap-6 lg:gap-8 text-center lg:text-left">
        <div className="lg:w-[54%] w-full">
          <h1
            className="text-2xl sm:text-4xl lg:text-[45px] leading-tight lg:leading-[58px] font-bold lg:font-normal text-[#3F3F3F]"
            style={{ textShadow: "4px 4px 11px rgba(0,0,0,0.08)" }}
          >
            {bannerHeading}
          </h1>

          {article.bannerSubtitle && (
            <p className="mt-1.5 sm:mt-2 text-sm sm:text-[15px] leading-snug sm:leading-5 text-[#2B2B2B]">
              {article.bannerSubtitle}
            </p>
          )}

          {/* Trust Badges - hidden on mobile/tablet (< 1024px / lg), flex on desktop per live CSS (.first-sec-left .services { display: none }) */}
          <div className="hidden lg:flex my-8 lg:my-11 flex-wrap items-center justify-between gap-6">
            {TRUST_BADGES.map(({ icon, label, badge }) => (
              <div key={label} className="flex items-center">
                <Image src={icon} alt="" width={40} height={40} className="shrink-0 w-10 h-10 object-contain" />
                <div className="ml-[7px] text-base lg:text-[19px] leading-[22px]" style={{ color: "#3F3F3F" }}>
                  {badge ? (
                    <span
                      className="table text-white rounded-[5px] px-[5px] py-0.5 text-sm leading-4"
                      style={{ background: "#C80B0B" }}
                    >
                      {badge}
                    </span>
                  ) : (
                    <span className="table">{label.split(" ")[0]}</span>
                  )}
                  <span className="block">{badge ? label : label.split(" ").slice(1).join(" ")}</span>
                </div>
              </div>
            ))}
          </div>

          {/* Rating Strip - hidden on mobile/tablet (< 1024px / lg), flex on desktop per live CSS (.first-sec-left .rating { display: none }) */}
          <div
            className="hidden lg:flex flex-wrap items-center justify-between gap-4 rounded-xl px-4 py-2 sm:px-6"
            style={{ background: "linear-gradient(90deg, #FFFFFF 2.98%, #FFE7DA 49.75%, #BFFFEA 98.36%)" }}
          >
            {RATING_PLATFORMS.map(({ name, icon, score }) => (
              <div key={name} className="flex items-center gap-[5px]">
                <div className="relative shrink-0 w-[45px] h-[45px]">
                  <Image src={icon} alt={name} fill sizes="45px" className="object-contain" />
                </div>
                <div>
                  <p className="text-[18px] leading-[22px] text-left" style={{ color: "#2A2A2A" }}>
                    {name}
                  </p>
                  <StarRating score={score} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="lg:w-[34%] w-full">
          <ServiceOrderForm
            /* default.php's our-services banner uses the compact
               `.amount-banner` price block plus the Ph.D. Writers /
               Free Plagiarism footer strip — the home variant — while
               service.php's uses "Prices Start From" with the clock. */
            variant={hasOurServicesBanner ? "home" : "service"}
            config={calculatorConfig}
            orderConfig={orderConfig}
            pricing={pricing}
            title={bannerTitle}
            subtitle={bannerSubtitle}
          />
        </div>
      </div>
    </section>
  );
}