import { Fragment } from 'react'
import { ARCH_LAYERS } from '@/content/site'
import { SectionLabel } from '@/components/section-label'
import { Reveal } from '@/components/reveal'

export function Architecture() {
  return (
    <section
      id="architecture"
      className="border-t border-hairline px-6 py-16 lg:px-10"
    >
      <div className="mx-auto max-w-6xl">
        <Reveal>
          <div className="mx-auto mb-9 max-w-[560px] text-center">
            <SectionLabel>ARCHITECTURE</SectionLabel>
            <h2 className="text-balance text-[26px] font-[650] tracking-[-0.02em]">
              五层架构，一条零拷贝总线
            </h2>
            <p className="mt-2.5 text-[15px] text-ink-2">
              Monolith First，为微服务演进预留缝隙（Morph B）。
            </p>
          </div>
        </Reveal>

        <Reveal delay={120} className="mx-auto max-w-[760px]">
          {ARCH_LAYERS.map((layer, i) => (
            <Fragment key={layer.id}>
              {/* NATS 总线插在 L2 和 L4 之间 */}
              {i === 2 && (
                <div className="mb-2.5 flex items-center justify-center gap-3.5 rounded-[10px] border border-dashed border-accent bg-accent-soft px-5 py-3 font-mono text-xs tracking-[0.1em] text-accent-ink">
                  ⇅ NATS JETSTREAM — 零拷贝消息骨干网 · sundynix.* ⇅
                </div>
              )}
              <div className="mb-2.5 grid grid-cols-1 items-center gap-1 rounded-[10px] border border-hairline bg-surface px-5 py-3.5 sm:grid-cols-[120px_1fr_auto] sm:gap-5">
                <span className="font-mono text-[11px] tracking-[0.14em] text-ink-3">
                  {layer.id}
                </span>
                <span className="text-sm font-medium">
                  {layer.name}{' '}
                  <span className="text-[13px] font-normal text-ink-2">
                    {layer.detail}
                  </span>
                </span>
                <span className="font-mono text-[11.5px] text-accent-ink">
                  {layer.tech}
                </span>
              </div>
            </Fragment>
          ))}
        </Reveal>
      </div>
    </section>
  )
}