X1_Site/site/components/SolutionsSection.tsx

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

interface SolutionsSectionProps {
  data: SolutionsData;
  locale?: string;
}

export function SolutionsSection({ data, locale = "zh-CN" }: SolutionsSectionProps) {
  const hero = data.hero ?? { title: data.title };

  return (
    <section id="solutions" className="relative bg-[#f3f6fc] text-[#0f1f39]">
      <div className="absolute inset-0 pointer-events-none">
        <div className="h-full w-full bg-[radial-gradient(circle_at_top_left,_rgba(88,133,255,0.08),_transparent_55%)]" />
      </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) => {
              const detailUrl = `/${locale}/solutions/${item.id}`;
              return (
                <a
                  key={item.id}
                  href={detailUrl}
                  className="flex flex-col rounded-[20px] border border-[rgba(17,138,244,0.12)] bg-white/95 overflow-hidden shadow-[0_18px_42px_rgba(17,138,244,0.08)] transition-all duration-300 group hover:-translate-y-1 hover:shadow-[0_18px_48px_rgba(17,138,244,0.16)] cursor-pointer no-underline"
                >
                {/* 第一行：图片 */}
                <div className="w-full h-[200px] bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] flex items-center justify-center p-4 md:p-6">
                  <div className="w-full h-full max-w-[400px] flex items-center justify-center relative">
                    <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] rounded-lg relative">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="w-full h-full object-contain"
                        style={{ 
                          mixBlendMode: 'multiply',
                          filter: 'contrast(1.1) brightness(1.02)'
                        }}
                        loading="lazy"
                      />
                    </div>
                  </div>
                </div>
                {/* 第二行：文字内容 */}
                <div className="p-4 md:p-5">
                  {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-2.5 text-[22px] font-semibold leading-tight text-[#0f1f39] group-hover:text-[#0b1a30] md:text-[24px]">
                    {item.title}
                  </h3>
                  {item.summary && (
                    <p className="mt-2 text-sm leading-relaxed text-[#4b5565] md:text-base">
                      {item.summary}
                    </p>
                  )}
                  {item.bullets && item.bullets.length > 0 && (
                    <ul className="mt-3 space-y-1.5 text-sm text-[#1f2937] md:text-base">
                      {item.bullets.map((bullet, index) => (
                        <li key={index} className="flex items-start gap-2">
                          <span className="mt-[6px] inline-block h-1.5 w-1.5 rounded-full bg-[#118af4] flex-shrink-0" aria-hidden="true" />
                          <span className="leading-relaxed">{bullet}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                  {item.badges && item.badges.length > 0 && (
                    <div className="mt-3.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>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}