import Image from 'next/image';

interface Scenario {
  num: string;
  tag: string;
  title: string;
  subtitle: string;
  desc: string;
  image: string;
}

const SCENARIOS: Scenario[] = [
  {
    num: '01',
    tag: '业主端',
    title: '指尖上的物业',
    subtitle: '服务触手可及',
    desc: '无需下载 APP，微信一键直达。支持在线缴费、手机报修、投诉建议及社区公告查看。',
    image: '/customer.png',
  },
  {
    num: '02',
    tag: '员工端',
    title: '口袋里的管家',
    subtitle: '告别纸质办公',
    desc: '专为一线人员打造。工单秒级响应，巡检拍照留痕，抄表自动计算，随时随地处理现场事务。',
    image: '/staff.png',
  },
  {
    num: '03',
    tag: '管理后台',
    title: '全景驾驶舱',
    subtitle: '盈亏一目了然',
    desc: '聚合财务、工单、人员数据。支持多项目集中管理，多维度经营报表。算清每一笔账，管好每一个人。',
    image: '/dashboard.png',
  },
];

export function SolutionShowcase() {
  return (
    <section className="bg-white py-16">
      <div className="container-page">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          <span className="text-xs font-semibold uppercase tracking-widest text-brand-600">
            Product
          </span>
          <h2 className="mt-3 text-3xl font-bold text-slate-900 sm:text-4xl">
            产品介绍
          </h2>
          <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-slate-900" />
          <p className="mx-auto mt-4 max-w-xl text-base text-slate-500">
            三端协同，覆盖业主、员工、管理层全角色场景
          </p>
        </div>

        <div className="space-y-12">
          {SCENARIOS.map((s, i) => {
            const reversed = i % 2 === 1;
            return (
              <div
                key={s.num}
                className="grid items-center gap-8 lg:grid-cols-12 lg:gap-10"
              >
                {/* 文案区 */}
                <div className={`lg:col-span-5 ${reversed ? 'lg:order-2 lg:col-start-8' : ''}`}>
                  {/* 序号 + 端标签 */}
                  <div className="flex items-center gap-3">
                    <span className="font-mono text-sm font-bold text-brand-600">
                      {s.num}
                    </span>
                    <span className="h-px w-6 bg-slate-300" />
                    <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                      {s.tag}
                    </span>
                  </div>

                  <h3 className="mt-4 text-2xl font-bold text-slate-900">
                    {s.title}
                  </h3>
                  <p className="mt-1.5 text-lg font-medium text-slate-900">
                    {s.subtitle}
                  </p>
                  <div className="mt-3 h-0.5 w-12 rounded-full bg-slate-900" />
                  <p className="mt-4 text-sm leading-7 text-slate-600">
                    {s.desc}
                  </p>
                </div>

                {/* 配图区 */}
                <div className={`lg:col-span-7 ${reversed ? 'lg:order-1 lg:col-start-1' : ''}`}>
                  <div className="group relative flex items-center justify-center overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-slate-50 to-white py-8 shadow-[0_4px_12px_rgba(15,23,42,0.04),0_24px_48px_-20px_rgba(15,23,42,0.12)] transition-all duration-500 hover:shadow-[0_8px_20px_rgba(15,23,42,0.06),0_32px_64px_-24px_rgba(15,23,42,0.2)]">
                    {/* 卡片内辉光 */}
                    <div className="pointer-events-none absolute left-1/2 top-1/2 h-48 w-80 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-200/40 blur-[80px] transition-all duration-500 group-hover:bg-slate-300/50" />
                    <div className="showcase-anim-float relative z-10 flex items-center justify-center transition-transform duration-500 group-hover:scale-[1.03]">
                      <Image
                        src={s.image}
                        alt={`${s.title} - ${s.subtitle}`}
                        width={500}
                        height={700}
                        className="h-[340px] w-auto max-w-full rounded-lg"
                        unoptimized
                      />
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}