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

const heroImages = [
  {
    id: "hero-1",
    src: "/img/Home_1.jpg",
    alt: "户外智能无线多功能风险监测系统",
    text: "户外智能无线多功能风险监测系统是一套技术领先的低成本、高集成、强兼容物联感知系统。系统包含高精度数据传感、智能数据传输以及云平台在内的整体解决方案，具有智能化、高度集成、绿色节能、易安装维护等核心特征。方案广泛应用于房屋、边坡、桥梁、塔杆、矿坑坝等基础设施的形变和结构健康监测，可实现对监测物异常动态（倾斜、位移、沉降、振动、崩塌、温湿度等）的24小时实时监测预警，实现传感、采集、传输、分析、推送、处置一体化闭环管理。",
  },
  {
    id: "hero-2",
    src: "/img/1.png",
    alt: "衡感智能核心监测终端应用场景",
  },
  {
    id: "hero-3",
    src: "/img/2.png",
    alt: "城市结构安全监测可视化示意图",
  },
  {
    id: "hero-4",
    src: "/img/3.png",
    alt: "AI 驱动的监测硬件与平台联动",
  },
  {
    id: "hero-5",
    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) => {
            // 如果有文字，使用左右布局（左边文字，右边图片）
            if (item.text) {
              return (
                <div className="flex h-full w-full flex-col overflow-hidden rounded-[28px] border border-white/8 bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] md:flex-row">
                  {/* 左边：文字内容 */}
                  <div className="flex flex-1 flex-col justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] p-6 text-[#0f1f39] md:p-8">
                    <h3 className="mb-3 text-xl font-semibold text-[#0f1f39] md:mb-4 md:text-2xl">
                      户外智能无线多功能风险监测系统
                    </h3>
                    <div className="space-y-3 text-sm leading-relaxed text-[#1f2937] md:text-base md:leading-relaxed">
                      <p>
                        是一套技术领先的低成本、高集成、强兼容物联感知系统。系统包含高精度数据传感、智能数据传输以及云平台在内的整体解决方案，具有<strong className="text-[#118af4]">智能化、高度集成、绿色节能、易安装维护</strong>等核心特征。
                      </p>
                      <p>
                        方案广泛应用于<strong className="text-[#118af4]">房屋、边坡、桥梁、塔杆、矿坑坝</strong>等基础设施的形变和结构健康监测，可实现对监测物异常动态（倾斜、位移、沉降、振动、崩塌、温湿度等）的<strong className="text-[#118af4]">24小时实时监测预警</strong>，实现传感、采集、传输、分析、推送、处置一体化闭环管理。
                      </p>
                    </div>
                  </div>
                  {/* 右边：图片 */}
                  <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] p-4 md:w-1/2 md:p-6">
                    <div className="relative flex h-full w-full max-w-[400px] items-center justify-center">
                      <div className="h-full w-full flex items-center justify-center bg-gradient-to-br from-[#f0f9ff] to-[#e4f2ff] rounded-lg relative">
                        <Image
                          src={item.src}
                          alt={item.alt}
                          fill
                          sizes="(max-width: 768px) 100vw, 400px"
                          className="object-contain"
                          style={{ 
                            mixBlendMode: 'multiply',
                            filter: 'contrast(1.1) brightness(1.02)'
                          }}
                          priority={item.id === "hero-1"}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              );
            }
            // 没有文字，使用原来的全屏图片布局
            return (
              <div className="relative 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]">
                <Image
                  src={item.src}
                  alt={item.alt}
                  fill
                  sizes="100vw"
                  className="object-cover"
                  priority={item.id === "hero-2"}
                />
              </div>
            );
          }}
          keyExtractor={(item) => item.id}
          interval={6000}
        />
      </div>
    </section>
  );
}