X1_Site/site/components/ProductCarouselSection.tsx

'use client';

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

interface ProductCarouselSectionProps {
  products: Product[];
  title?: string;
  description?: string;
  eyebrow?: string;
}

export function ProductCarouselSection({
  products,
  title = "核心监测终端与智能设备",
  description = "多模态感知硬件覆盖城市结构安全监测的关键场景，支持长续航、低功耗与云端协同。",
  eyebrow = "Product Portfolio",
}: ProductCarouselSectionProps) {
  if (!products || products.length === 0) {
    return null;
  }

  return (
    <section className="relative bg-[#f5f7fb] py-16 text-[#0f1f39] md:py-20">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-[260px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-70" />
        <div className="pointer-events-none absolute left-[-160px] top-[-120px] h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.14)_0%,rgba(17,138,244,0)_75%)] blur-3xl opacity-80" />
      </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={products}
          keyExtractor={(item) => item.id}
          className="w-full rounded-[28px] bg-white/90 p-6 shadow-[0_30px_60px_rgba(15,31,57,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.1fr_1fr] md:gap-14">
              <div className="order-2 text-left md:order-1">
                {item.eyebrow && (
                  <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.eyebrow}
                  </span>
                )}
                <h3 className="mt-4 text-[26px] font-semibold leading-tight text-[#0f1f39] md:text-[30px]">
                  {item.name}
                </h3>
                {item.summary && (
                  <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-white via-[#f7faff] to-[#eaf3ff] shadow-inner">
                  <Image
                    src={item.image}
                    alt={item.name}
                    fill
                    sizes="(max-width: 768px) 100vw, 420px"
                    className="object-contain"
                    priority={false}
                  />
                </div>
              </div>
            </div>
          )}
          interval={7000}
        />
      </div>
    </section>
  );
}