"use client";

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

export default function HeroSection() {
  const mainSession = SESSIONS[0];
  return (
    <section className="relative overflow-hidden bg-[#faf8f5] dark:bg-stone-950">
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,83,9,0.08) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 80% 80%, rgba(180,83,9,0.05) 0%, transparent 50%)`,
        }}
      />
      <div
        className="absolute inset-0 dark:opacity-60"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E")`,
        }}
      />

      <div className="relative max-w-[1000px] mx-auto px-5 sm:px-8 py-14 sm:py-20 md:py-24">
        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-16">
          <div className="flex-1">
            <p className="text-sm font-medium text-amber-700 dark:text-amber-400/90 mb-4 tracking-wide">
              北京 · 周末线下
            </p>
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.15]">
              <span className="hero-gradient-text">周末抽两小时</span>
              <br />
              <span className="text-stone-800 dark:text-stone-100">在咖啡馆认识几个新朋友</span>
            </h1>
            <p className="mt-5 text-stone-600 dark:text-stone-400 text-base sm:text-lg max-w-md leading-relaxed">
              氛围轻松，不用尬聊。公开场地，填表即报。
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link
                href="/join"
                className="inline-flex items-center justify-center bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
              >
                报名参加
              </Link>
              {mainSession && (
                <Link
                  href={`/join?session=${mainSession.id}`}
                  className="inline-flex items-center justify-center border border-stone-200 dark:border-stone-700 text-stone-700 dark:text-stone-300 px-6 py-3 rounded-xl text-sm font-medium hover:bg-stone-100 dark:hover:bg-stone-800/50 transition-colors"
                >
                  {mainSession.title} · {mainSession.date}
                </Link>
              )}
            </div>
          </div>

          {mainSession && (
            <div className="lg:w-[300px] shrink-0 mt-10 lg:mt-0">
              <Link
                href={`/join?session=${mainSession.id}`}
                className="block rounded-2xl overflow-hidden border border-stone-200/80 dark:border-stone-700/80 bg-white dark:bg-stone-900/80 shadow-xl shadow-stone-900/5 hover:shadow-2xl hover:shadow-amber-900/10 transition-all"
              >
                <div className="aspect-[4/3] bg-gradient-to-br from-amber-500/20 via-amber-100/50 to-stone-100 dark:from-amber-900/30 dark:via-stone-800 dark:to-stone-900 flex items-center justify-center">
                  <span className="text-6xl">☕</span>
                </div>
                <div className="p-5">
                  <p className="text-xs font-medium text-amber-600 dark:text-amber-400/90 uppercase tracking-wider mb-1">
                    本周主推
                  </p>
                  <h3 className="font-semibold text-stone-800 dark:text-stone-100">{mainSession.title}</h3>
                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
                    {mainSession.date} {mainSession.time}
                  </p>
                  <span className="inline-flex items-center gap-1 mt-4 text-amber-600 dark:text-amber-400 font-medium text-sm">
                    报名这场 →
                  </span>
                </div>
              </Link>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}