'use client';
import React from "react";
import { SimpleCarousel } from "./SimpleCarousel";

const heroImages = [
  {
    id: "hero-1",
    src: "/img/1.png",
    alt: "衡感智能核心监测终端应用场景",
  },
  {
    id: "hero-2",
    src: "/img/2.png",
    alt: "城市结构安全监测可视化示意图",
  },
  {
    id: "hero-3",
    src: "/img/3.png",
    alt: "AI 驱动的监测硬件与平台联动",
  },
  {
    id: "hero-4",
    src: "/img/4.png",
    alt: "智慧城市结构安全解决方案",
  },
];

export function HomeHeroCarousel() {
  return (
    <section className="relative overflow-hidden bg-[#0f1f39] pb-14 pt-10 text-white md:pb-20 md:pt-16">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(17,138,244,0.3),transparent_55%)]" />
      </div>

      <div className="relative mx-auto flex w-full max-w-6xl flex-col items-center gap-6 px-4 text-center md:px-6">
        <div className="max-w-3xl space-y-3">
          <p className="text-xs font-semibold uppercase tracking-[0.46em] text-[#7bc2ff]">
            Intelligent Urban Safety
          </p>
          <h1 className="text-3xl font-semibold leading-tight md:text-[40px]">
            AI 驱动的城市结构安全数字底座
          </h1>
          <p className="text-sm leading-relaxed text-[#bed9ff] md:text-base">
            结合 AI 感知、数字孪生与智能硬件，构建设备—数据—AI—决策一体化安全体系，
            为城市提供可持续的“自我防御力”。
          </p>
        </div>

        <SimpleCarousel
          items={heroImages}
          className="mt-4 h-[320px] w-full max-w-5xl rounded-[28px] bg-[#0b1629] md:h-[420px]"
          renderItem={(item) => (
            <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[28px] border border-white/8 bg-gradient-to-br from-[#102b55] via-[#0b1629] to-[#081220]">
              <img
                src={item.src}
                alt={item.alt}
                className="h-full w-full object-cover"
                loading="lazy"
              />
            </div>
          )}
          keyExtractor={(item) => item.id}
          interval={6000}
        />
      </div>
    </section>
  );
}