import Image from "next/image";
import Link from "next/link";
import {
  ArrowRight,
  BarChart3,
  Boxes,
  CalendarClock,
  Eye,
  Handshake,
  Package,
  PiggyBank,
  Quote,
  RefreshCw,
  Rocket,
  Search,
  TrendingUp,
  Unlink,
  Users,
  type LucideIcon,
} from "lucide-react";
import Reveal from "@/components/home/Reveal";
import { ABOUT_IMAGES } from "@/lib/about/images";
import { cn } from "@/lib/utils";

/*
  The regulated hedges in these finance claims ("subject to eligibility and
  approval", "subject to the applicable transaction terms", "can help",
  "potentially") are load-bearing: keep them on any edit.
*/

type Benefit = { icon: LucideIcon; text: string };

const BUYER_BENEFITS: Benefit[] = [
  { icon: Search, text: "Discover competitive B2B prices" },
  { icon: Boxes, text: "Source products in bulk from multiple suppliers" },
  { icon: PiggyBank, text: "Reduce the need to block immediate working capital" },
  { icon: CalendarClock, text: "Access 30–90 days of payment credit" },
  { icon: TrendingUp, text: "Increase purchasing capacity" },
  { icon: Rocket, text: "Focus available capital on business growth" },
];

const SELLER_BENEFITS: Benefit[] = [
  { icon: Eye, text: "Improve cash-flow visibility" },
  { icon: Unlink, text: "Reduce dependence on long buyer credit cycles" },
  { icon: RefreshCw, text: "Reuse working capital faster" },
  { icon: Package, text: "Increase inventory turnover" },
  { icon: Users, text: "Serve more buyers" },
  {
    icon: BarChart3,
    text: "Potentially increase business volumes without proportionately increasing working-capital pressure",
  },
];

/** The trade-off Biznie is built to break, stated as the copy states it. */
const TRADE_OFF = ["Sell more", "Give more credit", "Block more working capital"];

const PRIMARY_BTN =
  "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-[#CC1414] px-6 text-sm font-semibold text-white shadow-[0_14px_30px_rgba(204,20,20,0.3)] transition-all hover:-translate-y-0.5 hover:bg-[#A50E0E] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#CC1414]/40 focus-visible:ring-offset-2";
const SECONDARY_BTN =
  "inline-flex h-12 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-6 text-sm font-semibold text-slate-900 transition-colors hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#CC1414]/40 focus-visible:ring-offset-2";

function BenefitList({ heading, items }: { heading: string; items: Benefit[] }) {
  return (
    <div className="mt-8">
      <h3 className="text-sm font-semibold uppercase tracking-wider text-slate-500">{heading}</h3>
      <ul className="mt-4 grid gap-3 sm:grid-cols-2">
        {items.map(({ icon: Icon, text }) => (
          <li
            key={text}
            className="group flex items-center gap-3 rounded-2xl bg-white p-3.5 shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:ring-red-100"
          >
            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-red-50 text-[#CC1414] transition-colors group-hover:bg-[#CC1414] group-hover:text-white">
              <Icon size={19} aria-hidden />
            </span>
            <span className="text-sm font-medium leading-snug text-slate-800">{text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function PhotoPanel({
  src,
  alt,
  tag,
  quote,
  sub,
  position,
  className,
}: {
  src: string;
  alt: string;
  tag: string;
  quote: string;
  sub?: string;
  position: string;
  className?: string;
}) {
  return (
    <Reveal className={cn("relative", className)}>
      {/* Pinned beside the (taller) copy column on desktop instead of stretching to its height. */}
      <figure className="group relative lg:sticky lg:top-24 lg:h-[640px]">
        <div className="relative aspect-[4/3] overflow-hidden rounded-3xl bg-slate-200 shadow-2xl sm:aspect-[16/10] lg:aspect-auto lg:h-full">
          <Image
            src={src}
            alt={alt}
            fill
            sizes="(max-width: 1024px) 100vw, 1140px"
            className={cn("object-cover transition-transform duration-700 group-hover:scale-105", position)}
          />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-950/85 via-slate-950/15 to-transparent" />
          <span className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full border border-white/20 bg-slate-950/40 px-3 py-1 text-xs font-semibold text-white backdrop-blur sm:left-6 sm:top-6">
            <span className="h-1.5 w-1.5 rounded-full bg-[#ff4d4f]" />
            {tag}
          </span>
        </div>
        {/* Overlaps the photo's lower edge on phones, sits inside it from sm up. */}
        <figcaption className="relative z-10 mx-4 -mt-14 sm:absolute sm:inset-x-6 sm:bottom-6 sm:m-0">
          <blockquote className="rounded-2xl bg-white/95 p-5 shadow-xl ring-1 ring-black/5 backdrop-blur">
            <Quote size={18} className="text-[#CC1414]" aria-hidden />
            <p className="mt-2 text-base font-semibold leading-snug text-slate-900 sm:text-lg">{quote}</p>
            {sub ? <p className="mt-1.5 text-sm text-slate-500">{sub}</p> : null}
          </blockquote>
        </figcaption>
      </figure>
    </Reveal>
  );
}

export function BuyersSection() {
  return (
    <section id="buyers" className="scroll-mt-24 bg-white py-16 sm:py-20 lg:py-24">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
        <PhotoPanel
          src={ABOUT_IMAGES.siteConstruction}
          alt="A residential building under construction, wrapped in scaffolding"
          position="object-[35%_center]"
          tag="For bulk buyers"
          quote="Buy the inventory you need today. Use your cash to grow your business tomorrow."
        />

        <div className="lg:py-4">
          <Reveal>
            <span className="inline-flex items-center gap-2 rounded-full bg-red-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-[#CC1414]">
              For Buyers
            </span>
            <h2 className="mt-4 text-3xl font-black leading-tight tracking-tight text-slate-900 md:text-4xl">
              Buy More. Pay Later. <span className="text-[#CC1414]">Grow Faster.</span>
            </h2>
            <p className="mt-5 text-base leading-relaxed text-slate-600">
              Finding the right supplier is only half the challenge. Getting the right price and the right payment terms
              can be even harder.
            </p>
            <p className="mt-4 text-base leading-relaxed text-slate-600">
              Biznie helps bulk buyers source products from manufacturers, traders and importers at competitive prices
              while facilitating 30–90 days of trade credit through our partnered financial institutions, subject to
              eligibility and approval.
            </p>
          </Reveal>

          <Reveal delay={100}>
            <BenefitList heading="With Biznie, buyers can" items={BUYER_BENEFITS} />
          </Reveal>

          <Reveal delay={150} className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link href="/products" className={PRIMARY_BTN}>
              Browse Products <ArrowRight size={16} aria-hidden />
            </Link>
            <Link href="/credit-request" className={SECONDARY_BTN}>
              <CalendarClock size={16} aria-hidden /> Apply for Credit
            </Link>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

export function SellersSection() {
  return (
    <section id="sellers" className="scroll-mt-24 bg-slate-50 py-16 sm:py-20 lg:py-24">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
        <PhotoPanel
          src={ABOUT_IMAGES.dealerShop}
          alt="A steel dealer carrying lengths of metal pipe into his shop"
          position="object-[40%_center]"
          tag="For suppliers"
          quote="Your growth shouldn't stop because your money is stuck with your customers."
          sub="Biznie helps turn receivables into faster-moving working capital."
          className="lg:order-2"
        />

        <div className="lg:order-1 lg:py-4">
          <Reveal>
            <span className="inline-flex items-center gap-2 rounded-full bg-red-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-[#CC1414]">
              For Sellers
            </span>
            <h2 className="mt-4 text-3xl font-black leading-tight tracking-tight text-slate-900 md:text-4xl">
              Sell More Without Waiting Months for Your Money
            </h2>
            <p className="mt-5 text-base leading-relaxed text-slate-600">
              For suppliers, selling more often means giving buyers longer credit periods. That creates a difficult
              trade-off:
            </p>
            <ol className="mt-4 flex flex-wrap items-center gap-2" aria-label="The seller's trade-off">
              {TRADE_OFF.map((step, index) => (
                <li key={step} className="flex items-center gap-2">
                  <span className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">
                    {step}
                  </span>
                  {index < TRADE_OFF.length - 1 ? <ArrowRight size={14} className="text-slate-400" aria-hidden /> : null}
                </li>
              ))}
            </ol>
            <p className="mt-6 text-base font-semibold text-[#CC1414]">Biznie is designed to change that equation.</p>
            <p className="mt-2 text-base leading-relaxed text-slate-600">
              Suppliers can list their products and offer competitive prices to bulk buyers. Once the goods are delivered
              and satisfactorily accepted by the buyer, Biznie facilitates payment to the supplier within 7 days, subject
              to the applicable transaction terms.
            </p>

            {/* The 7-day figure is the section's headline promise, so it gets its own panel. */}
            <div className="mt-6 flex items-start gap-4 rounded-2xl bg-gradient-to-br from-[#CC1414] to-[#8B0000] p-5 text-white shadow-lg shadow-red-900/15">
              <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-white/15 ring-1 ring-inset ring-white/25">
                <Handshake size={22} aria-hidden />
              </span>
              <div>
                <p className="text-lg font-black">Paid within 7 days of acceptance</p>
                <p className="mt-1 text-sm text-red-50">
                  Once the goods are delivered and satisfactorily accepted by the buyer, subject to the applicable
                  transaction terms.
                </p>
              </div>
            </div>
          </Reveal>

          <Reveal delay={100}>
            <BenefitList heading="This can help suppliers" items={SELLER_BENEFITS} />
          </Reveal>

          <Reveal delay={150} className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link href="/profile/become-seller" className={PRIMARY_BTN}>
              Become a Seller <ArrowRight size={16} aria-hidden />
            </Link>
            <Link href="/contact" className={SECONDARY_BTN}>
              Talk to Our Team
            </Link>
          </Reveal>
        </div>
      </div>
    </section>
  );
}