"use client";

import Link from "next/link";
import HeroSection from "./components/HeroSection";
import Footer from "./components/Footer";
import { SESSIONS } from "@/config/home.config";

export default function Home() {
  return (
    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 pb-24 sm:pb-12">
      <HeroSection />

      <main className="max-w-[900px] mx-auto px-5 sm:px-8 py-10 sm:py-14 space-y-14">
        {/* 信任标签 */}
        <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-stone-600 dark:text-stone-400">
          <span>📍 公开场地</span>
          <span>👥 小组活动</span>
          <span>✍️ 填表即报</span>
          <span>🆓 不收费</span>
        </div>

        {/* 本周场次 */}
        <section>
          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
            本周活动
          </h2>
          <div className="grid gap-4 sm:grid-cols-2">
            {SESSIONS.map((s, i) => (
              <Link
                key={s.id}
                href={`/join?session=${encodeURIComponent(s.id)}`}
                className="group flex gap-4 p-5 rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg hover:shadow-amber-900/5 transition-all"
              >
                <div className="w-14 h-14 shrink-0 rounded-xl bg-amber-100/80 dark:bg-amber-900/20 flex items-center justify-center text-2xl">
                  {i === 0 ? "☕" : i === 1 ? "📖" : "👋"}
                </div>
                <div className="min-w-0 flex-1">
                  {i === 0 && (
                    <span className="inline-block text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-0.5 rounded mb-2">
                      主推
                    </span>
                  )}
                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-amber-700 dark:group-hover:text-amber-400">
                    {s.title}
                  </h3>
                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
                    {s.date} {s.time} · {s.place}
                  </p>
                  <span className="inline-flex items-center gap-1 mt-3 text-amber-600 dark:text-amber-400 text-sm font-medium">
                    报名 →
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* 为什么来 */}
        <section>
          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
            为什么很多人愿意来
          </h2>
          <div className="rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-6 sm:p-8">
            <div className="grid sm:grid-cols-2 gap-6">
              <div>
                <p className="font-medium text-stone-800 dark:text-stone-100">氛围轻松</p>
                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
                  咖啡馆、书店里的线下小聚，不用尬聊，聊得来就多聊几句。
                </p>
              </div>
              <div>
                <p className="font-medium text-stone-800 dark:text-stone-100">安全靠谱</p>
                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
                  公开场地，地址提前告知。尊重边界，不追问隐私。
                </p>
              </div>
              <div>
                <p className="font-medium text-stone-800 dark:text-stone-100">第一次来也 OK</p>
                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
                  很多人都是第一次参加，小组活动人数可控，不会尴尬。
                </p>
              </div>
              <div>
                <p className="font-medium text-stone-800 dark:text-stone-100">填表就行</p>
                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
                  无需注册登录，不用先付款，填个表单即可。
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section>
          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
            常见问题
          </h2>
          <div className="space-y-3">
            {[
              { q: "需要先注册吗？", a: "不需要，填表即可。" },
              { q: "需要先付款吗？", a: "不需要，报名不收费。" },
              { q: "第一次参加可以吗？", a: "可以，很多人都是第一次来。" },
              { q: "地点什么时候通知？", a: "报名后会通过微信/短信告知，均为公开场地。" },
            ].map((faq, i) => (
              <div
                key={i}
                className="rounded-xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4"
              >
                <p className="font-medium text-stone-800 dark:text-stone-100 text-sm">{faq.q}</p>
                <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">{faq.a}</p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="pt-4">
          <Link
            href="/join"
            className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-4 rounded-xl font-semibold shadow-lg shadow-amber-900/20 transition-all"
          >
            立即报名 →
          </Link>
        </section>
      </main>

      {/* 移动端悬浮 CTA */}
      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white/95 dark:bg-stone-900/95 backdrop-blur border-t border-stone-200 dark:border-stone-800 sm:hidden z-50">
        <Link
          href="/join"
          className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3.5 rounded-xl font-medium"
        >
          报名参加
        </Link>
      </div>

      <Footer />
    </div>
  );
}