import {
  CreditCard,
  Wrench,
  Megaphone,
  ClipboardCheck,
  Users,
  BarChart3,
  ArrowRight,
  type LucideIcon,
} from 'lucide-react';

interface Feature {
  icon: LucideIcon;
  title: string;
  desc: string;
  tags: string[];
}

const FEATURES: Feature[] = [
  {
    icon: CreditCard,
    title: '物业缴费',
    desc: '支持微信/支付宝在线缴费，自动账单生成，逾期智能提醒，财务报表一键导出，收费率提升40%+。',
    tags: ['微信支付', '自动账单', '财务报表'],
  },
  {
    icon: Wrench,
    title: '在线报修',
    desc: '业主一键报修，工单自动派发，维修进度实时追踪，评价闭环管理，平均响应时间缩短至5分钟。',
    tags: ['智能派单', '进度追踪', '评价闭环'],
  },
  {
    icon: Megaphone,
    title: '社区公告',
    desc: '图文通知一键群发，已读未读精准统计，分类管理历史可追溯，触达率达99%以上。',
    tags: ['一键群发', '已读统计', '分类管理'],
  },
  {
    icon: ClipboardCheck,
    title: '巡检管理',
    desc: '设备设施巡检打卡，隐患上报闭环，NFC/二维码防作弊巡更，确保安保无死角。',
    tags: ['NFC打卡', '隐患上报', '防作弊'],
  },
  {
    icon: Users,
    title: '业主服务',
    desc: '访客邀请、投诉建议、投票表决、社区活动，业主自治一站式平台，满意度提升60%。',
    tags: ['访客邀请', '投票表决', '满意度+60%'],
  },
  {
    icon: BarChart3,
    title: '数据看板',
    desc: '收费率、报修响应、满意度等核心指标可视化，管理驾驶舱实时呈现，辅助科学决策。',
    tags: ['实时大屏', '多维分析', '决策辅助'],
  },
];

export function FeatureGrid() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-white to-slate-50 py-20">
      {/* 顶部柔光 */}
      <div className="pointer-events-none absolute left-1/2 top-0 h-64 w-[700px] -translate-x-1/2 rounded-full bg-brand-200/20 blur-[120px]" />

      <div className="container-page relative">
        {/* 标题区 */}
        <div className="mb-12 text-center">
          <span className="text-xs font-semibold uppercase tracking-widest text-brand-600">
            Core Features
          </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="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((f, i) => (
            <div
              key={f.title}
              className="group relative rounded-2xl border border-slate-200/70 bg-white p-7 shadow-[0_1px_3px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(79,70,229,0.12)] transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-[0_4px_12px_rgba(15,23,42,0.06),0_20px_40px_-16px_rgba(79,70,229,0.25)]"
            >
              {/* 序号 */}
              <span className="absolute right-5 top-5 font-mono text-2xl font-bold text-slate-100 transition-colors group-hover:text-brand-100">
                {String(i + 1).padStart(2, '0')}
              </span>

              {/* 图标 - 靛蓝渐变 */}
              <div className="relative flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 text-white shadow-lg shadow-brand-600/30 transition-transform duration-300 group-hover:scale-110">
                <f.icon className="h-6 w-6" />
              </div>

              {/* 标题 */}
              <h3 className="mt-5 text-lg font-bold text-slate-900">
                {f.title}
              </h3>

              {/* 描述 */}
              <p className="mt-2 text-sm leading-7 text-slate-500">
                {f.desc}
              </p>

              {/* 标签 */}
              <div className="mt-4 flex flex-wrap gap-2">
                {f.tags.map((tag) => (
                  <span
                    key={tag}
                    className="rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600"
                  >
                    {tag}
                  </span>
                ))}
              </div>

              {/* 底部箭头 */}
              <div className="mt-4 flex items-center gap-1.5 text-brand-600 opacity-0 transition-all duration-300 group-hover:opacity-100">
                <span className="text-xs font-medium">了解详情</span>
                <ArrowRight className="h-3.5 w-3.5" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}