import Link from 'next/link'
import type { Metadata } from 'next'
import { ArrowRight } from 'lucide-react'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import { ScrollReveal } from '@/components/shared/ScrollReveal'
import { getSiteConsulting } from '@/lib/server-site'

export const metadata: Metadata = { title: '规划咨询' }

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

export default async function ConsultingPage() {
  const site = await getSiteConsulting()
  const content = site?.content
  const directions = site?.directions || []
  const cases = site?.cases || []
  const steps = site?.steps || []

  return (
    <>
      <ScrollReveal />

      <section className="bg-white py-10">
        <div className="mx-auto grid max-w-[1280px] gap-10 px-6 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
          <div data-reveal="left">
              <h1 className="text-[34px] font-extrabold leading-tight text-ink md:text-[44px]">{content?.heroTitle || '规划咨询'}</h1>
              <p className="mt-5 max-w-2xl text-base leading-8 text-muted">
              {content?.heroDescription || '研究院面向政府、园区与企业提供数字化规划咨询服务，围绕战略目标、业务场景、数据基础和实施条件，形成可执行的建设路径。'}
            </p>
            <p className="mt-4 max-w-2xl text-base leading-8 text-text-body">
              {content?.heroExplanation || '服务不是标准化商品，而是一套从调研诊断到方案设计、从项目拆解到后续跟进的专业咨询工作。'}
            </p>
          </div>

          <div data-reveal="right">
            <MediaBlock src={content?.heroImageUrl} label="规划咨询服务场景：调研访谈、方案汇报与项目路径设计" className="h-[280px] w-full rounded-[4px]" />
          </div>
        </div>
      </section>

      <section className="bg-bg py-10">
        <div className="mx-auto max-w-[1280px] px-6">
          <div className="mb-6 flex items-end justify-between gap-6" data-reveal="fade">
            <div>
              <h2 className="text-2xl font-extrabold text-ink">{content?.directionTitle || '服务方向'}</h2>
              <p className="mt-3 text-sm leading-7 text-muted">{content?.directionDescription || '四个方向是服务介绍入口，进入后查看更完整的说明、适用场景和咨询表单。'}</p>
            </div>
            <Link href="/consulting/apply" className="hidden text-sm font-extrabold text-brand hover:text-brand-dark md:inline-flex">
              提交咨询需求
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </div>

          <div className="grid gap-5 md:grid-cols-2" data-reveal-group>
            {directions.map((direction, index) => (
              <Link
                key={direction.id}
                href={`/consulting/${direction.slug}`}
                data-reveal="lift"
                className="group overflow-hidden bg-white transition-all hover:-translate-y-1 hover:shadow-[0_18px_45px_rgba(15,23,42,0.09)]"
              >
                <div className="grid min-h-[236px] md:grid-cols-[220px_1fr]">
                  <MediaBlock src={direction.imageUrl} label={`${direction.title}服务场景`} className="h-48 w-full md:h-full" />
                  <div className="flex flex-col justify-between p-6">
                    <div>
                      <div className="text-xs font-extrabold text-brand">{String(index + 1).padStart(2, '0')}</div>
                      <h3 className="mt-3 text-xl font-extrabold text-ink group-hover:text-brand">{direction.title}</h3>
                      <p className="mt-3 text-sm leading-7 text-muted">{direction.summary}</p>
                      <p className="mt-3 text-sm leading-7 text-text-body">{direction.note}</p>
                    </div>
                    <div className="mt-5 inline-flex items-center text-sm font-extrabold text-brand">
                      查看详细介绍
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-14">
        <div className="mx-auto max-w-[1280px] px-6">
          <div className="grid gap-10 lg:grid-cols-[300px_1fr]">
            <div data-reveal="left">
              <h2 className="text-2xl font-extrabold text-ink">{content?.casesTitle || '过往案例'}</h2>
              <p className="mt-4 text-sm leading-7 text-muted">
                {content?.casesDescription || '这里先放典型项目类型，后续可以替换为真实案例图片、项目名称和交付摘要。'}
              </p>
            </div>
            <div className="grid gap-5 md:grid-cols-3" data-reveal-group>
              {cases.map((item) => (
                <div key={item.id} data-reveal="lift" className="border-t border-line pt-5">
                  <MediaBlock src={item.imageUrl} label={`${item.title}配图`} className="h-36 w-full" />
                  <div className="mt-5 text-xs font-extrabold text-brand">{item.type}</div>
                  <h3 className="mt-2 text-lg font-extrabold text-ink">{item.title}</h3>
                  <p className="mt-3 text-sm leading-7 text-muted">{item.summary}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-bg py-14">
        <div className="mx-auto max-w-[1280px] px-6">
          <div className="grid gap-10 lg:grid-cols-[300px_1fr]">
            <div data-reveal="left">
              <h2 className="text-2xl font-extrabold text-ink">{content?.stepsTitle || '交付流程'}</h2>
              <p className="mt-4 text-sm leading-7 text-muted">{content?.stepsDescription || '从需求提交到方案交付，用户可在个人中心查看咨询记录和处理进度。'}</p>
              <Link
                href="/consulting/apply"
                className="mt-6 inline-flex h-11 items-center justify-center gap-2 rounded-[4px] bg-brand px-5 text-sm font-extrabold text-white hover:bg-brand-dark"
              >
                提交咨询需求
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
            <div className="border-y border-line bg-white" data-reveal-group>
              {steps.map((step, index) => (
                <div key={step.id} data-reveal="lift" className="grid gap-4 border-b border-line px-6 py-6 last:border-b-0 md:grid-cols-[100px_1fr]">
                  <div className="text-sm font-extrabold text-brand">{String(index + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="text-lg font-extrabold text-ink">{step.title}</h3>
                    <p className="mt-2 text-sm leading-7 text-muted">{step.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
