"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-[#fafafa] dark:bg-gray-950">
      <HeroSection />

      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-8 space-y-8">
        {/* 信任信息条 */}
        <div className="flex flex-wrap justify-center gap-4 sm:gap-8 text-sm text-gray-600 dark:text-gray-400">
          <span>📍 公开场地</span>
          <span>👥 小组活动</span>
          <span>📋 规则透明</span>
          <span>✍️ 无需注册</span>
        </div>

        {/* 本周活动场次 */}
        <section>
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">本周活动场次</h2>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {SESSIONS.map((s) => (
              <Link
                key={s.id}
                href={`/join?session=${encodeURIComponent(s.id)}`}
                className="right-item block"
              >
                <div className="right-item-header">{s.title}</div>
                <div className="p-4 sm:p-5">
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">{s.date} {s.time}</p>
                  <p className="text-xs text-gray-500 dark:text-gray-500 mb-3">{s.place}</p>
                  <span className="inline-block bg-[#ff4d4f] text-white px-3 py-1.5 rounded-lg text-xs font-semibold">
                    报名 →
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* 为什么很多人更愿意来这种局 */}
        <section>
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">为什么很多人更愿意来这种局</h2>
          <div className="right-item">
            <div className="right-item-header">先了解，再决定</div>
            <div className="p-4 sm:p-5 space-y-2 text-sm text-gray-600 dark:text-gray-400">
              <p>• 场地公开，地址提前告知，不用担心安全问题</p>
              <p>• 人数可控，小组活动，不会太吵也不会冷场</p>
              <p>• 规则透明，活动前会说明流程和边界</p>
              <p>• 填个简单表单即可，无需注册登录，更不用先付款</p>
            </div>
          </div>
        </section>

        {/* 安全与边界规则 */}
        <section>
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">安全与边界规则</h2>
          <div className="right-item">
            <div className="right-item-header">活动规则</div>
            <div className="p-4 sm:p-5 space-y-2 text-sm text-gray-600 dark:text-gray-400">
              <p>• 活动在公开场地进行，不私下约见</p>
              <p>• 尊重他人边界，不追问隐私、不强行加微信</p>
              <p>• 如有不适可随时离开，主办方会协助处理</p>
              <p>• 报名即同意以上规则</p>
            </div>
          </div>
        </section>

        {/* 主理人说明 */}
        <section>
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">主理人说明</h2>
          <div className="right-item">
            <div className="right-item-header">关于我们</div>
            <div className="p-4 sm:p-5 text-sm text-gray-600 dark:text-gray-400">
              <p>我们是一群在北京的朋友，定期组织周末小聚，让想认识新朋友的人有个轻松、靠谱的场合。活动不设门槛，不搞暧昧，就是单纯聊天、互相认识。</p>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section>
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">常见问题</h2>
          <div className="space-y-2">
            {[
              { q: "需要先注册吗？", a: "不需要。填个简单表单即可，无需注册登录。" },
              { q: "需要先付款吗？", a: "不需要。先看场次，再决定要不要报名，报名不收费。" },
              { q: "活动地点在哪里？", a: "报名后会通过微信或短信告知具体地址，均为公开场地。" },
              { q: "第一次参加可以吗？", a: "可以。我们欢迎第一次参加类似活动的朋友。" },
            ].map((faq, i) => (
              <div key={i} className="right-item">
                <div className="right-item-header">{faq.q}</div>
                <div className="p-3 sm:p-4 text-sm text-gray-600 dark:text-gray-400">{faq.a}</div>
              </div>
            ))}
          </div>
        </section>

        {/* 底部 CTA */}
        <section className="pt-4">
          <Link href="/join" className="right-item block max-w-md">
            <div className="right-item-header">去报名</div>
            <div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
              <span className="text-2xl sm:text-5xl mb-1 sm:mb-3">✍️</span>
              <p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
                选好场次，填个简单表单即可参与
              </p>
              <span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">去报名 →</span>
            </div>
          </Link>
        </section>
      </div>

      <Footer />
    </div>
  );
}