import Link from 'next/link'
import Image from 'next/image'
import { ArrowRight, MapPin } from 'lucide-react'
import { HomeHeroCarousel } from '@/components/home/HomeHeroCarousel'
import { HomeRegisterCta } from '@/components/home/HomeRegisterCta'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import { ScrollReveal } from '@/components/shared/ScrollReveal'
import type { Expert } from '@/types'
import { mapBackendExpert, type BackendExpert } from '@/lib/backend'
import { getNewsArticles } from '@/lib/server-news'
import { getCourseProducts, getEventProducts } from '@/lib/server-products'
import { getSiteAbout, getSiteConsulting, getSiteHome } from '@/lib/server-site'

const capabilityAssetKeys: Record<string, string> = {
  'digital-planning': 'capability_digital_planning',
  'smart-city': 'capability_smart_city',
  'data-governance': 'capability_data_governance',
  'industry-digital': 'capability_industry_digital',
}

function formatDate(iso: string) {
  const d = new Date(iso)
  return { month: d.getMonth() + 1, day: d.getDate() }
}

function courseBadge(courseType: string, price: number) {
  if (courseType === 'free' || price === 0) return '免费'
  if (courseType === 'pro') return '初级会员'
  if (courseType === 'max') return '高级会员'
  return `¥${price}`
}

function MediaBlock({ imageUrl, label, className }: { imageUrl?: string; label: string; className: string }) {
  if (imageUrl) {
    return <div className={`${className} bg-cover bg-center`} style={{ backgroundImage: `url(${imageUrl})` }} role="img" aria-label={label} />
  }
  return <ImagePlaceholder label={label} className={className} />
}

function ExpertPhoto({ expert, className }: { expert: Expert; className: string }) {
  if (expert.photoUrl) {
    return <div className={`${className} bg-cover bg-center`} style={{ backgroundImage: `url(${expert.photoUrl})` }} role="img" aria-label={`${expert.name}专家照片`} />
  }
  return <ImagePlaceholder label={`${expert.name}专家照片：正式头像或工作照`} className={className} />
}

function EmptyRecommendation({ label }: { label: string }) {
  return <div className="border border-dashed border-line bg-white px-5 py-8 text-sm font-bold text-muted">{label}</div>
}

export default async function HomePage() {
  const [newsArticles, courses, events, siteHome, siteConsulting, siteAbout] = await Promise.all([getNewsArticles(), getCourseProducts(), getEventProducts(), getSiteHome(), getSiteConsulting(), getSiteAbout()])
  const assetsByKey = new Map(siteHome.assets.map((asset) => [asset.key, asset]))
  const consultingDirections = siteConsulting?.directions || []
  const recommendationGroups = siteHome.recommendations || { news: [], courses: [], events: [], experts: [] }
  const recommendedExpertSources = (recommendationGroups.experts || [])
    .map((slot) => slot.source)
    .filter((source): source is BackendExpert => Boolean(source && 'name' in source))
  const featuredExperts = recommendedExpertSources.map(mapBackendExpert).slice(0, 4)
  const managedCourses = (recommendationGroups.courses || [])
    .map((slot) => courses.find((course) => course.id === slot.sourceId || course.slug === slot.sourceId))
    .filter((course): course is NonNullable<typeof course> => Boolean(course))
  const featuredCourses = managedCourses.slice(0, 3)
  const managedEvents = (recommendationGroups.events || [])
    .map((slot) => events.find((event) => event.id === slot.sourceId || event.slug === slot.sourceId))
    .filter((event): event is NonNullable<typeof event> => Boolean(event))
  const featuredEvents = managedEvents.slice(0, 4)
  const managedNews = (recommendationGroups.news || [])
    .map((slot) => newsArticles.find((article) => article.id === slot.sourceId || article.slug === slot.sourceId))
    .filter((article): article is NonNullable<typeof article> => Boolean(article))
  const homeNews = managedNews.slice(0, 3)
  const topNews = homeNews[0]
  const sideNews = homeNews.slice(1, 3)
  const blocksByKey = new Map((siteHome.blocks || []).map((block) => [block.blockKey, block]))
  const partnersBlock = blocksByKey.get('partners')
  const partnerItems = (siteAbout?.partners || []).length
    ? (siteAbout?.partners || []).map((item) => ({
      itemKey: item.id,
      title: item.title,
      imageUrl: item.imageUrl,
      sortOrder: item.sortOrder,
    }))
    : (partnersBlock?.items || [])
  const serviceBlock = blocksByKey.get('service_entrances')
  const serviceEntranceItems = (serviceBlock?.items || []).map((item) => ({
      title: item.title,
      desc: item.description,
      href: item.href || '/',
      label: item.ctaLabel || '查看详情',
      assetKey: String(item.metadata?.assetKey || ''),
      visual: String(item.metadata?.visual || item.description || item.title),
    }))
  const workflowBlock = blocksByKey.get('agent_workflow')
  const cmsWorkflowNodes = (workflowBlock?.items || []).map((item) => ({
    id: item.itemKey,
    label: item.subtitle || '智能体',
    title: item.title,
    detail: item.description,
    x: Number(item.metadata?.x || 0) || 150,
    y: Number(item.metadata?.y || 0) || 125,
    size: String(item.metadata?.size || 'normal'),
  }))
  const visibleWorkflowNodes = cmsWorkflowNodes
  const workflowProblem = visibleWorkflowNodes.find((node) => node.id === 'problem')?.detail || workflowBlock?.body || ''
  const workflowResult = visibleWorkflowNodes.find((node) => node.id === 'result')?.detail || workflowBlock?.body || ''
  const membershipBlock = blocksByKey.get('membership_cards')
  const membershipPlans = (membershipBlock?.items || []).map((item) => ({
      name: item.title,
      price: item.subtitle,
      desc: item.description,
      href: item.href || '/membership',
      tone: String(item.metadata?.tone || 'base'),
    }))

  return (
    <>
      <ScrollReveal />
      <section className="overflow-hidden bg-[#edf4ff]">
        <HomeHeroCarousel slides={siteHome.slides} />
      </section>

      <section className="border-y border-line bg-white">
        <div className="mx-auto flex min-h-[88px] max-w-[1280px] items-center gap-6 overflow-hidden px-6">
          <div className="shrink-0 border-r border-line pr-6 text-xs font-extrabold tracking-[0.16em] text-soft">合作单位</div>
          <div className="relative min-w-0 flex-1 overflow-hidden">
            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-[linear-gradient(90deg,#fff,rgba(255,255,255,0))]" />
            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-[linear-gradient(270deg,#fff,rgba(255,255,255,0))]" />
            {partnerItems.length ? (
              <div className="logo-marquee flex w-max items-center gap-4">
                {[...partnerItems, ...partnerItems].map((item, index) => (
                  <div key={`${item.title}-${index}`} className="grid h-12 min-w-[168px] place-items-center rounded-[4px] bg-bg/80 px-6 text-sm font-extrabold text-muted">
                    {item.imageUrl ? (
                      <Image src={item.imageUrl} alt={item.title} width={160} height={48} unoptimized className="max-h-8 max-w-[136px] object-contain" />
                    ) : item.title}
                  </div>
                ))}
              </div>
            ) : (
              <div className="grid h-12 place-items-center rounded-[4px] border border-dashed border-line bg-bg/70 px-6 text-sm font-bold text-muted">后台待配置合作单位</div>
            )}
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto grid max-w-[1280px] gap-0 px-6 lg:grid-cols-2">
          <div data-reveal="left" className="min-h-[360px] overflow-hidden rounded-[4px] lg:min-h-[500px]">
            <MediaBlock
              imageUrl={assetsByKey.get('service_scene')?.imageUrl}
              label={assetsByKey.get('service_scene')?.label || '研究院服务场景图：办公、咨询沟通或项目交付现场'}
              className="h-full min-h-[360px] lg:min-h-[500px]"
            />
          </div>
          <div data-reveal="right" className="flex flex-col justify-center py-10 lg:py-16 lg:pl-18">
            <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">
              {siteAbout?.content.workTitle || siteAbout?.content.heroTitle || '关于研究院'}
            </h2>
            <p className="mt-5 text-[15px] leading-8 text-muted">
              {siteAbout?.content.workDescription || siteAbout?.content.heroDescription || '后台待配置关于研究院简介。'}
            </p>
            <Link href="/about" className="mt-7 inline-flex items-center gap-2 text-sm font-extrabold text-brand">
              了解研究院详情
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      <section className="bg-bg py-20">
        <div className="mx-auto grid max-w-[1280px] gap-16 px-6 lg:grid-cols-[5fr_7fr]">
          <div data-reveal="left" className="lg:sticky lg:top-24 lg:self-start">
            <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">
              {siteConsulting?.content.directionTitle || '研究院核心业务能力'}
            </h2>
            <p className="mt-4 max-w-xl text-[15px] leading-8 text-muted">
              {siteConsulting?.content.directionDescription || '后台待配置规划咨询服务方向说明。'}
            </p>
            <div className="mt-7 flex flex-col items-start gap-3">
              <Link href="/consulting/apply" className="rounded-[4px] bg-brand px-6 py-3 text-sm font-extrabold text-white hover:bg-brand-dark">提交咨询意向</Link>
              <Link href="/consulting" className="rounded-[4px] border-2 border-brand px-6 py-3 text-sm font-extrabold text-brand hover:bg-brand-light">查看服务方向</Link>
            </div>
          </div>
          <div data-reveal-group className="grid overflow-hidden rounded-[4px] bg-line md:grid-cols-2">
            {consultingDirections.map((item, index) => (
              <Link key={item.id} href={`/consulting/${item.slug}`} data-reveal="lift" className="group bg-white">
                <MediaBlock
                  imageUrl={assetsByKey.get(capabilityAssetKeys[item.slug])?.imageUrl}
                  label={assetsByKey.get(capabilityAssetKeys[item.slug])?.label || `${item.title}业务配图：行业场景、方案研讨或数据治理示意`}
                  className="h-40"
                />
                <div className="p-6">
                  <div className="mb-3 text-[11px] font-extrabold tracking-[0.12em] text-soft">0{index + 1}</div>
                  <h3 className="text-lg font-bold leading-snug text-ink group-hover:text-brand">{item.title}</h3>
                  <p className="mt-2 line-clamp-3 text-[13px] leading-6 text-muted">{item.summary}</p>
                  <span className="mt-4 inline-flex text-[13px] font-extrabold text-brand">了解方向</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-9 flex flex-col justify-between gap-5 md:flex-row md:items-end">
            <div>
              <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">
                预约行业专家，
                <br />
                在线一对一咨询
              </h2>
            </div>
            <Link href="/experts" className="text-sm font-extrabold text-brand">查看全部专家</Link>
          </div>
          <div data-reveal-group className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            {featuredExperts.map((expert) => (
              <article key={expert.id} data-reveal="lift" className="group overflow-hidden rounded-[4px] border border-line bg-white transition hover:-translate-y-1 hover:border-brand hover:shadow-[0_12px_32px_rgba(10,58,120,0.10)]">
                <Link href={`/experts/${expert.slug}`} className="block">
                  <ExpertPhoto expert={expert} className="h-48 w-full" />
                  <div className="p-5">
                    <h3 className="text-lg font-bold text-ink group-hover:text-brand">{expert.name}</h3>
                    <div className="mt-1 text-xs text-muted">{expert.title} · {expert.organization}</div>
                    <div className="mt-3 flex flex-wrap gap-1.5">
                      {expert.specialties.slice(0, 3).map((tag) => (
                        <span key={tag} className="rounded-[3px] bg-brand-light px-2 py-0.5 text-[11px] font-bold text-brand">{tag}</span>
                      ))}
                    </div>
                    <div className="mt-4 flex items-center justify-between border-t border-line pt-4">
                      <div>
                        <strong className="text-xl font-extrabold text-brand">¥{expert.pricePerHour.toLocaleString()}</strong>
                        <span className="text-xs text-muted"> / 小时</span>
                      </div>
                      <span className="text-xs font-bold text-muted">查看主页</span>
                    </div>
                  </div>
                </Link>
                <Link href={`/experts/${expert.slug}`} className="mx-5 mb-5 block rounded-[4px] border-2 border-brand py-2 text-center text-[13px] font-extrabold text-brand group-hover:bg-brand group-hover:text-white">
                  立即预约
                </Link>
              </article>
            ))}
            {!featuredExperts.length && <EmptyRecommendation label="后台待配置专家推荐位" />}
          </div>
        </div>
      </section>

      <section className="bg-bg py-20">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-10 flex flex-col justify-between gap-5 md:flex-row md:items-end">
            <div>
              <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">按需求进入服务</h2>
              <p className="mt-4 max-w-2xl text-[15px] leading-8 text-muted">
                从前期咨询到学习培训、活动报名、数据服务申请和智能体交付，按业务场景进入对应服务，后续订单、学习和交付记录统一沉淀到个人中心。
              </p>
            </div>
            <Link href="/account" className="inline-flex items-center gap-2 text-sm font-extrabold text-brand">
              订单与服务在个人中心查看
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>

          {serviceEntranceItems.length ? <div data-reveal-group className="grid gap-4 lg:grid-cols-6">
            {serviceEntranceItems.map((item, index) => (
              <Link
                key={item.title}
                href={item.href}
                data-reveal="lift"
                className={`group overflow-hidden rounded-[4px] border border-line bg-white transition hover:-translate-y-1 hover:border-brand hover:shadow-[0_18px_48px_rgba(10,58,120,0.10)] ${
                  index === 0 ? 'lg:col-span-3 lg:row-span-2' : 'lg:col-span-3 xl:col-span-3'
                }`}
              >
                <div className={`${index === 0 ? 'h-72' : 'h-40'} overflow-hidden`}>
                  <MediaBlock
                    imageUrl={assetsByKey.get(item.assetKey)?.imageUrl}
                    label={assetsByKey.get(item.assetKey)?.label || item.visual}
                    className="h-full transition duration-500 group-hover:scale-[1.02]"
                  />
                </div>
                <div className={`grid gap-4 p-6 ${index === 0 ? 'md:grid-cols-[1fr_auto] md:items-end' : 'md:grid-cols-[1fr_auto] md:items-center'}`}>
                  <div>
                    <h3 className={`${index === 0 ? 'text-2xl' : 'text-lg'} font-extrabold text-ink group-hover:text-brand`}>{item.title}</h3>
                    <p className="mt-2 text-[13px] leading-6 text-muted">{item.desc}</p>
                  </div>
                  <span className="inline-flex items-center gap-2 text-[13px] font-extrabold text-brand">
                    {item.label}
                    <ArrowRight className="h-4 w-4" />
                  </span>
                </div>
              </Link>
            ))}
          </div> : <div className="border border-dashed border-line bg-white px-5 py-8 text-sm font-bold text-muted">后台待配置服务入口</div>}
        </div>
      </section>

      <section className="relative overflow-hidden bg-white py-24">
        <div className="absolute inset-x-0 top-0 h-px bg-line" />
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end">
            <div>
                  <h2 className="text-4xl font-extrabold leading-tight text-ink md:text-5xl">{workflowBlock?.title || '智能体工作流案例'}</h2>
                  <p className="mt-5 max-w-[600px] text-[15px] leading-8 text-muted">
                {workflowBlock?.body || '一个可复用的增长 workflow，把“找机会、匹配客户、产出内容、触达跟进、复盘优化”串成循环。这里展示的是多智能体如何接力完成复杂人工问题，不在首页重复摆产品卡。'}
              </p>
            </div>
            <div className="rounded-[4px] bg-bg/80 p-5">
              <MediaBlock
                imageUrl={assetsByKey.get('agent_workflow_home')?.imageUrl}
                label={assetsByKey.get('agent_workflow_home')?.label || '智能体工作流配图：多智能体协作、任务接力、线索转化与复盘优化流程'}
                className="h-64 rounded-[4px]"
              />
            </div>
          </div>

          <div data-reveal="lift" className="mt-12 border-y border-line py-10">
            <div className="mb-6 grid gap-4 md:grid-cols-[1fr_auto] md:items-end">
              <div>
                <div className="text-xl font-extrabold text-ink">从业务问题到持续增长</div>
                <div className="mt-2 max-w-3xl text-sm leading-7 text-muted">
                  {workflowProblem}
                </div>
              </div>
              <Link href="/agents" className="mt-4 inline-flex items-center gap-2 text-sm font-extrabold text-brand md:mt-0">
                查看完整智能体页面
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>

            {visibleWorkflowNodes.length ? <div className="relative overflow-x-auto overflow-y-visible rounded-[4px] bg-[#f8fbff] px-4 py-6">
              <div className="relative h-[560px] min-w-[2300px]">
                <svg
                  className="pointer-events-none absolute inset-0 h-full w-full"
                  viewBox="0 0 2300 560"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M285 275 C330 160 365 130 430 125 C532 118 565 316 670 325 C772 334 805 130 910 125 C1012 120 1045 316 1150 325 C1252 334 1285 130 1390 125 C1492 120 1525 316 1630 325 C1732 334 1765 130 1870 125 C2010 117 2065 185 2015 275"
                    stroke="#cbd5e1"
                    strokeWidth="2"
                  />
                  <path
                    d="M285 275 C500 475 850 492 1150 455 C1450 418 1720 492 2015 275"
                    stroke="#e2e8f0"
                    strokeWidth="1.5"
                    strokeDasharray="6 8"
                  />
                </svg>

                {visibleWorkflowNodes.map((node) => {
                  const isEdge = node.id === 'problem' || node.id === 'result'
                  const isWide = node.size === 'wide'

                  return (
                    <div
                      key={node.id}
                      className={`absolute z-10 -translate-x-1/2 -translate-y-1/2 rounded-[10px] border border-line bg-white/95 p-4 text-left shadow-[0_16px_36px_rgba(15,23,42,0.08)] ${isEdge ? 'bg-[#fbfcfe]' : ''}`}
                      style={{ left: node.x, top: node.y }}
                    >
                      <span className="block text-[11px] font-extrabold text-soft">{node.label}</span>
                      <span className={`mt-1 block font-extrabold leading-6 text-ink ${isWide ? 'text-lg' : 'text-sm'}`}>
                        {node.title}
                      </span>
                      <span className={`mt-2 block text-xs leading-6 text-muted ${isWide ? 'w-[250px]' : 'w-[184px]'}`}>
                        {node.detail}
                      </span>
                    </div>
                  )
                })}

                <div className="absolute bottom-0 left-1/2 z-10 w-[520px] -translate-x-1/2 rounded-[4px] bg-white px-6 py-5 text-center text-sm font-bold leading-7 text-brand shadow-[0_12px_30px_rgba(10,58,120,0.06)]">
                  {workflowResult}
                </div>
              </div>
            </div> : <div className="rounded-[4px] border border-dashed border-line bg-bg px-5 py-8 text-sm font-bold text-muted">后台待配置智能体工作流节点</div>}

            {visibleWorkflowNodes.length ? <div className="mt-4 text-xs font-bold text-soft">
              横向滑动查看完整工作流
            </div> : null}
          </div>

        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto grid max-w-[1280px] gap-12 px-6 lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
          <div data-reveal="left">
            <div className="mb-5 inline-flex border-l-2 border-brand pl-3 text-[11px] font-extrabold tracking-[0.16em] text-soft">会员权益</div>
            <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">
              {membershipBlock?.title || '会员权益'}
            </h2>
            <p className="mt-5 max-w-md text-[15px] leading-8 text-muted">
              {membershipBlock?.body || membershipBlock?.subtitle || '后台待配置会员权益说明。'}
            </p>
            <Link href="/membership" className="mt-8 inline-flex items-center gap-2 rounded-[4px] bg-brand px-6 py-3 text-sm font-extrabold text-white hover:bg-brand-dark">
              查看权益详情
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
	          {membershipPlans.length ? <div data-reveal-group className="grid gap-4">
	            {membershipPlans.map((plan) => (
	              <Link
	                key={plan.name}
	                href={plan.href}
	                data-reveal="lift"
	                className={`group grid gap-5 rounded-[4px] border p-6 shadow-[0_14px_34px_rgba(10,58,120,0.06)] transition hover:-translate-y-1 hover:shadow-[0_22px_54px_rgba(10,58,120,0.11)] md:grid-cols-[160px_1fr_auto] md:items-center ${
	                  plan.tone === 'brand'
	                    ? 'border-brand/20 bg-brand-light/70 lg:ml-10'
	                    : plan.tone === 'gold'
	                      ? 'border-[#c9a227]/25 bg-[#fdf6e4] lg:ml-20'
	                      : 'border-line/70 bg-bg/80'
	                }`}
	              >
	                <div>
	                  <div className="text-xl font-extrabold text-ink">{plan.name}</div>
	                </div>
	                <p className="text-sm leading-7 text-muted">{plan.desc}</p>
	                <div className="flex items-center justify-between gap-4 md:block md:text-right">
	                  <div className={`text-2xl font-extrabold ${plan.tone === 'gold' ? 'text-gold' : 'text-brand'}`}>{plan.price}</div>
	                  <div className="mt-1 text-xs font-bold text-soft">查看方案</div>
	                </div>
	              </Link>
            ))}
          </div> : <div className="border border-dashed border-line bg-bg px-5 py-8 text-sm font-bold text-muted">后台待配置会员权益卡</div>}
        </div>
      </section>

      <section className="bg-bg py-20">
        <div className="mx-auto grid max-w-[1280px] gap-10 px-6 lg:grid-cols-2">
          <div data-reveal="left">
            <div className="mb-6 flex items-baseline justify-between">
              <h3 className="text-2xl font-bold text-ink">近期课程</h3>
              <Link href="/courses" className="text-[13px] font-bold text-brand">全部课程</Link>
            </div>
            <div data-reveal-group className="grid gap-4">
              {featuredCourses.map((course) => (
                <Link key={course.id} href={`/courses/${course.slug}`} data-reveal="lift" className="group rounded-[4px] border border-line bg-white hover:border-brand">
                  <div className="p-5">
                    <span className="mb-3 inline-block rounded-[3px] bg-brand-light px-2 py-1 text-[11px] font-extrabold text-brand">{courseBadge(course.courseType, course.price)}</span>
                    <h4 className="text-base font-bold text-ink group-hover:text-brand">{course.title}</h4>
                    <div className="mt-2 text-xs text-muted">{course.instructor} · {course.lessonCount} 课时</div>
                  </div>
                </Link>
              ))}
              {!featuredCourses.length && <EmptyRecommendation label="后台待配置课程推荐位" />}
            </div>
          </div>
          <div data-reveal="right">
            <div className="mb-6 flex items-baseline justify-between">
              <h3 className="text-2xl font-bold text-ink">近期活动</h3>
              <Link href="/events" className="text-[13px] font-bold text-brand">全部活动</Link>
            </div>
            <div data-reveal-group className="grid gap-0.5 overflow-hidden rounded-[4px] bg-line">
              {featuredEvents.map((event) => {
                const date = formatDate(event.startsAt)
                return (
                  <Link key={event.id} href={`/events/${event.slug}`} data-reveal="lift" className="grid grid-cols-[68px_1fr] bg-white">
                    <div className="flex flex-col items-center justify-center bg-brand px-2 py-4 text-white">
                      <span className="text-[10px] font-bold tracking-[0.1em] opacity-75">{date.month}月</span>
                      <span className="text-3xl font-extrabold leading-none">{date.day}</span>
                    </div>
                    <div className="p-4">
                      <h4 className="text-sm font-bold leading-6 text-ink">{event.title}</h4>
                      <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted">
                        <span className="inline-flex items-center gap-1"><MapPin className="h-3.5 w-3.5" />{event.isOnline ? '线上' : event.location}</span>
                        <span className="font-bold text-brand">{event.price === 0 ? '免费' : `¥${event.price}`}</span>
                        <span className="text-amber">{event.registeredCount}/{event.capacity} 人</span>
                      </div>
                    </div>
                  </Link>
                )
              })}
              {!featuredEvents.length && <EmptyRecommendation label="后台待配置活动推荐位" />}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-9 flex items-end justify-between">
            <div>
              <h2 className="text-3xl font-extrabold leading-tight text-ink md:text-4xl">研究院动态与行业洞察</h2>
            </div>
            <Link href="/news" className="text-sm font-extrabold text-brand">全部资讯</Link>
          </div>
          {topNews ? (
            <div data-reveal-group className="grid gap-5 lg:grid-cols-[2fr_1fr_1fr]">
              <Link href={`/news/${topNews.slug}`} data-reveal="lift" className="group overflow-hidden rounded-[4px] border border-line bg-white hover:border-brand">
                {topNews.coverUrl ? <div className="h-60 bg-cover bg-center" style={{ backgroundImage: `url(${topNews.coverUrl})` }} /> : <ImagePlaceholder label={`新闻头图：${topNews.title}`} className="h-60" />}
                <div className="p-5">
                  <div className="mb-2 text-[11px] font-extrabold tracking-[0.1em] text-brand">{topNews.category}</div>
                  <h3 className="text-base font-bold leading-7 text-ink group-hover:text-brand">{topNews.title}</h3>
                  <p className="mt-2 line-clamp-2 text-[13px] leading-6 text-muted">{topNews.summary}</p>
                  <div className="mt-4 flex justify-between text-xs text-soft">
                    <span>{new Date(topNews.publishedAt).toLocaleDateString('zh-CN')}</span>
                    <span className="font-bold text-brand">阅读全文</span>
                  </div>
                </div>
              </Link>
            {sideNews.map((news) => (
              <Link key={news.id} href={`/news/${news.slug}`} data-reveal="lift" className="group overflow-hidden rounded-[4px] border border-line bg-white hover:border-brand">
                {news.coverUrl ? <div className="h-40 bg-cover bg-center" style={{ backgroundImage: `url(${news.coverUrl})` }} /> : <ImagePlaceholder label={`新闻配图：${news.title}`} className="h-40" />}
                <div className="p-5">
                  <div className="mb-2 text-[11px] font-extrabold tracking-[0.1em] text-brand">{news.category}</div>
                  <h3 className="line-clamp-3 text-sm font-bold leading-6 text-ink group-hover:text-brand">{news.title}</h3>
                  <div className="mt-4 flex justify-between text-xs text-soft">
                    <span>{new Date(news.publishedAt).toLocaleDateString('zh-CN')}</span>
                    <span className="font-bold text-brand">阅读</span>
                  </div>
                </div>
              </Link>
            ))}
            </div>
          ) : (
            <div className="border border-dashed border-line bg-bg px-5 py-8 text-sm font-bold text-muted">后台待配置资讯推荐位</div>
          )}
        </div>
      </section>

      <HomeRegisterCta />
    </>
  )
}
