X1_Site/site/components/SolutionsCarousel.tsx

'use client';

import React from "react";
import Image from "next/image";
import type { SolutionItem } from "../types";
import { SimpleCarousel } from "./SimpleCarousel";

interface SolutionsCarouselProps {
  items: SolutionItem[];
  title?: string;
  eyebrow?: string;
  description?: string;
}

export function SolutionsCarousel({
  items,
  title = "行业安全监测解决方案矩阵",
  eyebrow = "Solutions Suite",
  description = "覆盖房屋、边坡、交通、能源等多场景的安全监测方案，联动多源感知与云端智能决策。",
}: SolutionsCarouselProps) {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <section className="relative bg-white py-16 text-[#0f1f39] md:py-20">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute right-[-160px] top-[-160px] h-[340px] w-[340px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.18)_0%,rgba(17,138,244,0)_78%)] blur-3xl opacity-80" />
        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-[240px] bg-gradient-to-t from-[#f5f7fb] via-white to-transparent opacity-60" />
      </div>

      <div className="relative mx-auto w-full max-w-5xl px-4 text-center md:px-6">
        {eyebrow && (
          <p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
            {eyebrow}
          </p>
        )}
        <h2 className="text-3xl font-semibold leading-tight md:text-[34px]">
          {title}
        </h2>
        {description && (
          <p className="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-[#4b5565] md:text-base">
            {description}
          </p>
        )}
      </div>

      <div className="relative mx-auto mt-10 w-full max-w-6xl px-4 md:mt-12 md:px-6">
        <SimpleCarousel
          items={items}
          keyExtractor={(item) => item.id}
          className="w-full rounded-[28px] bg-white/95 p-6 shadow-[0_24px_48px_rgba(17,138,244,0.08)] min-h-[520px] md:min-h-[460px] md:p-10"
          renderItem={(item) => (
            <div className="grid items-center gap-10 md:grid-cols-[1.05fr_0.95fr] md:gap-14">
              <div className="order-2 text-left md:order-1">
                {item.tag && (
                  <span className="inline-flex items-center rounded-full bg-[#e4f2ff] px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#118af4]">
                    {item.tag}
                  </span>
                )}
                <h3 className="mt-4 text-[26px] font-semibold leading-tight text-[#0f1f39] md:text-[30px]">
                  {item.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-[#4b5565] md:text-base">
                  {item.summary}
                </p>
                {item.bullets && item.bullets.length > 0 && (
                  <ul className="mt-5 space-y-2 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]" />
                        <span>{bullet}</span>
                      </li>
                    ))}
                  </ul>
                )}
                {item.badges && item.badges.length > 0 && (
                  <div className="mt-6 flex flex-wrap gap-2.5">
                    {item.badges.map((badge, index) => (
                      <span
                        key={index}
                        className={`rounded-full border px-4 py-2 text-xs font-semibold ${
                          index === 0
                            ? "border-[#d8e8fb] bg-[#f0f9ff] text-[#118af4]"
                            : "border-transparent bg-[#f7f8fb] text-[#4b5565]"
                        }`}
                      >
                        {badge}
                      </span>
                    ))}
                  </div>
                )}
              </div>

              <div className="order-1 flex items-center justify-center md:order-2">
                <div className="relative flex aspect-[4/3] w-full max-w-[420px] items-center justify-center overflow-hidden rounded-3xl border border-[#dfe9f8] bg-gradient-to-br from-[#f5f9ff] via-white to-[#eaf3ff] shadow-inner">
                  <Image
                    src={item.image}
                    alt={item.title}
                    fill
                    sizes="(max-width: 768px) 100vw, 420px"
                    className="object-cover"
                    priority={false}
                  />
                </div>
              </div>
            </div>
          )}
          interval={6500}
        />
      </div>
    </section>
  );
}