import type { Metadata } from 'next'
import { AboutContactForm } from '@/app/about/AboutContactForm'
import { ExpandableMediaGrid } from '@/components/shared/ExpandableMediaGrid'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import { ScrollReveal } from '@/components/shared/ScrollReveal'
import { getSiteAbout } from '@/lib/server-site'

export const metadata: Metadata = { title: '关于我们' }

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} />
}

export default async function AboutPage() {
  const about = await getSiteAbout()
  const content = about?.content
  if (!about || !content) {
    return <section className="bg-bg py-16 text-center text-sm font-bold text-muted">关于我们配置暂未初始化</section>
  }
  const serviceResultItems = [...about.representativeWork, ...about.cooperationModes]
  return (
    <>
      <ScrollReveal />
      <section className="flex min-h-[calc(100vh-70px)] items-center bg-white py-10 md:min-h-[calc(100vh-106px)] md:py-12">
        <div className="mx-auto grid max-w-[1280px] gap-12 px-6 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
          <div data-reveal="left">
            <h1 className="text-4xl font-extrabold leading-tight text-ink md:text-5xl">{content.heroTitle}</h1>
            <p className="mt-6 max-w-[640px] text-[15px] leading-8 text-text-body">
              {content.heroDescription}
            </p>
            <p className="mt-4 max-w-[640px] text-[15px] leading-8 text-muted">
              {content.heroExplanation}
            </p>
          </div>

          <div data-reveal="right">
            <MediaBlock imageUrl={content.heroCoverUrl} label="研究院办公楼、项目研讨或成果展示场景" className="h-[360px] rounded-[4px]" />
          </div>
        </div>
      </section>

      <section className="bg-bg py-16">
        <div className="mx-auto grid max-w-[1280px] gap-12 px-6 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
          <div data-reveal="left">
            <h2 className="text-3xl font-extrabold leading-tight text-ink">{content.workTitle}</h2>
            <p className="mt-4 max-w-xl text-[15px] leading-8 text-muted">
              {content.workDescription}
            </p>
            <MediaBlock imageUrl={content.workImageUrl} label="课题研究、专家研讨与项目推进现场" className="mt-8 h-64 rounded-[4px]" />
          </div>
          <div data-reveal-group className="border-y border-line bg-white">
            {about.workSteps.map((item, index) => (
              <div key={item.id} data-reveal="right" className="grid gap-5 border-b border-line px-0 py-7 last:border-b-0 md:grid-cols-[96px_180px_1fr] md:items-start">
                <div className="px-6 text-2xl font-extrabold leading-none text-brand">0{index + 1}</div>
                <h3 className="px-6 text-xl font-extrabold text-ink md:px-0">{item.title}</h3>
                <p className="px-6 text-sm leading-7 text-muted md:px-0 md:pr-6">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="mx-auto grid max-w-[1280px] gap-12 px-6 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
          <div data-reveal="left">
            <h2 className="text-3xl font-extrabold leading-tight text-ink">{content.serviceTitle}</h2>
            <p className="mt-4 max-w-xl text-[15px] leading-8 text-muted">
              {content.serviceDescription}
            </p>
            {about.serviceObjects.length > 0 && (
              <div className="mt-8 grid gap-3 sm:grid-cols-2">
                {about.serviceObjects.map((item) => (
                  <div key={item.id} className="border-l-2 border-brand bg-bg px-4 py-3">
                    <div className="text-sm font-extrabold text-ink">{item.title}</div>
                    <p className="mt-1 text-xs leading-6 text-muted">{item.description}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div data-reveal-group className="border-y border-line">
            {serviceResultItems.map((item) => (
              <div key={item.id} data-reveal="right" className="grid gap-4 border-b border-line py-5 last:border-b-0 md:grid-cols-[140px_1fr]">
                <h3 className="text-base font-extrabold text-ink">{item.title}</h3>
                <p className="text-sm leading-7 text-muted">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="qualifications" className="scroll-mt-[70px] bg-white py-16">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-8">
            <h2 className="text-3xl font-extrabold leading-tight text-ink">资质荣誉</h2>
          </div>
          <ExpandableMediaGrid items={about.honors} imageLabelSuffix="证书或荣誉图片" imageClassName="h-32" />
        </div>
      </section>

      <section id="partners" className="scroll-mt-[70px] bg-bg py-16">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-8">
            <h2 className="text-3xl font-extrabold leading-tight text-ink">合作伙伴</h2>
          </div>
          <ExpandableMediaGrid items={about.partners} imageLabelSuffix="Logo图片" imageClassName="h-20" initialCount={12} gridClassName="grid-cols-2 md:grid-cols-4 lg:grid-cols-6" />
        </div>
      </section>

      <section id="team" className="bg-white py-16">
        <div className="mx-auto max-w-[1280px] px-6">
          <div data-reveal="fade" className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
            <div>
              <h2 className="text-3xl font-extrabold leading-tight text-ink">核心团队</h2>
            </div>
          </div>
          <div data-reveal-group className="grid gap-5 md:grid-cols-4">
            {about.team.map((member) => (
              <article key={member.id} data-reveal="lift" className="overflow-hidden rounded-[4px] border border-line bg-white">
                <MediaBlock imageUrl={member.imageUrl} label={`${member.title}专家照片`} className="h-44" />
                <div className="p-5">
                  <h3 className="text-base font-extrabold text-ink">{member.title}</h3>
                  <div className="mt-1 text-xs font-bold text-brand">{member.role}</div>
                  <p className="mt-3 text-xs leading-6 text-muted">{member.description}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="contact" className="scroll-mt-[70px] bg-white py-16">
        <div className="mx-auto max-w-[1280px] px-6">
          <h2 data-reveal="fade" className="mb-8 text-3xl font-extrabold leading-tight text-ink">联系我们</h2>
          <div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
            <div data-reveal="left" className="divide-y divide-line border-y border-line text-sm">
              {[
                ['地址', content.contactAddress],
                ['电话', content.contactPhone],
                ['邮箱', content.contactEmail],
                ['工作时间', content.contactHours],
              ].map(([label, value]) => (
                <div key={label} className="grid gap-3 py-4 md:grid-cols-[96px_1fr]">
                  <div className="text-soft">{label}</div>
                  <div className="font-bold text-text-body">{value}</div>
                </div>
              ))}
            </div>
            <AboutContactForm />
          </div>
        </div>
      </section>
    </>
  )
}
