import React from "react";
import type { SolutionsData } from "../types";

interface SolutionsSectionProps {
  data: SolutionsData;
}

export function SolutionsSection({ data }: SolutionsSectionProps) {
  const hero = data.hero ?? { title: data.title };

  return (
    <section id="solutions" className="relative bg-[#f5f7fb] text-[#0f1f39]">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-[320px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-60" />
        <div className="pointer-events-none absolute -top-32 right-[-140px] h-[380px] w-[380px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.16)_0%,rgba(17,138,244,0)_70%)] blur-3xl opacity-70" />
      </div>

      <div className="relative mx-auto w-full max-w-5xl px-4 pb-16 pt-16 md:px-6 md:pt-20">
        <div className="text-center">
          {hero.eyebrow && (
            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
              {hero.eyebrow}
            </p>
          )}
          <h2 className="mb-4 text-3xl font-semibold leading-tight text-[#0f1f39] md:text-[34px]">
            {hero.title || data.title}
          </h2>
          {(hero.subtitle || hero.description) && (
            <p className="mx-auto max-w-3xl text-base leading-relaxed text-[#4b5565] md:text-lg">
              {hero.subtitle ?? hero.description}
            </p>
          )}
        </div>
      </div>

      <div className="relative z-10 -mt-10 pb-16 md:-mt-12 md:pb-20">
        <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
          <div className="grid grid-cols-1 gap-7 md:grid-cols-2">
            {data.items.map((item) => (
              <article
                key={item.id}
                className="flex flex-col gap-6 rounded-[20px] border border-[rgba(17,138,244,0.12)] bg-white/95 p-6 shadow-[0_18px_42px_rgba(17,138,244,0.08)] transition-transform md:flex-row md:p-8"
              >
                <div className="flex-1">
                  {item.tag && (
                    <div className="inline-flex items-center gap-2 rounded-full bg-[#e4f2ff] px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#118af4]">
                      {item.tag}
                    </div>
                  )}
                  <h3 className="mt-4 text-[22px] font-semibold leading-tight text-[#0f1f39] md:text-[24px]">
                    {item.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-[#4b5565] md:text-base">
                    {item.summary}
                  </p>
                  <ul className="mt-4 space-y-2 text-sm text-[#1f2937] md:text-base">
                    {item.bullets.map((bullet, index) => (
                      <li key={index} className="flex items-start gap-2 leading-relaxed">
                        <span
                          className="mt-[6px] inline-block h-1.5 w-1.5 rounded-full bg-[#118af4]"
                          aria-hidden="true"
                        />
                        <span>{bullet}</span>
                      </li>
                    ))}
                  </ul>
                  {item.badges && item.badges.length > 0 && (
                    <div className="mt-5 flex flex-wrap gap-2.5">
                      {item.badges.map((badge, index) => {
                        const isPrimary = index === 0;
                        return (
                          <span
                            key={index}
                            className={[
                              "rounded-full px-4 py-2 text-xs font-semibold",
                              isPrimary
                                ? "border border-[#d8e8fb] bg-[#f0f9ff] text-[#118af4]"
                                : "border border-transparent bg-[#f9fafb] text-[#4b5565]",
                            ].join(" ")}
                          >
                            {badge}
                          </span>
                        );
                      })}
                    </div>
                  )}
                </div>
                <div className="mx-auto w-full max-w-[240px] shrink-0 md:w-52">
                  <div className="overflow-hidden rounded-2xl border border-[#d9e6f8] shadow-[0_10px_28px_rgba(15,31,57,0.12)]">
                    <img
                      src={item.image}
                      alt={item.title}
                      className="h-full w-full object-cover"
                      loading="lazy"
                    />
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}