import Link from "next/link";
import { ArrowRight, BluetoothIcon, ChipIcon, SparkIcon, WaveIcon } from "@/components/icons";
import { ArrowLink, DevPlaceholder, ProductVisual, SectionHeading } from "@/components/ui";
import { products } from "@/lib/content";

const capabilities = [
  { icon: BluetoothIcon, title: "Bluetooth", copy: "稳定连接" },
  { icon: WaveIcon, title: "Audio", copy: "更好的声音体验" },
  { icon: ChipIcon, title: "Embedded", copy: "可靠的硬件与固件" },
  { icon: SparkIcon, title: "AI", copy: "让设备更智能" },
];

export default function HomePage() {
  return (
    <>
      <section className="relative isolate overflow-hidden hero-glow">
        <div className="surface-grid pointer-events-none absolute inset-0 -z-10 opacity-60" />
        <div className="container-shell grid min-h-[560px] items-center gap-10 py-16 lg:grid-cols-[0.85fr_1.15fr] lg:py-20">
          <div>
            <p className="eyebrow">Connecting technology with everyday life</p>
            <h1 className="display-heading text-balance">连接技术与日常。</h1>
            <p className="body-copy mt-8 max-w-md text-lg">我们专注于蓝牙周边、音频与智能设备，持续把可靠的技术变成简单、可用的产品。</p>
            <div className="mt-9 flex flex-wrap items-center gap-4">
              <Link className="button-primary" href="/products">了解产品 <ArrowRight /></Link>
              <Link className="text-sm font-semibold text-muted hover:text-copy" href="#technology">探索技术 <span className="ml-2">↓</span></Link>
            </div>
          </div>
          <div className="relative lg:pl-8">
            <div className="absolute -right-16 top-1/2 h-64 w-64 -translate-y-1/2 rounded-full bg-blue/10 blur-3xl" />
            <ProductVisual label="AUDIO / HARDWARE CONCEPT" />
            <div className="absolute -bottom-5 left-5 rounded-xl border border-line bg-panel/90 px-4 py-3 backdrop-blur sm:left-12">
              <p className="text-[0.65rem] uppercase tracking-[0.2em] text-subtle">Product first</p>
              <p className="mt-1 text-sm text-copy">真实产品资料待补充</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-rule py-20 sm:py-24">
        <div className="container-shell">
          <div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-end">
            <SectionHeading eyebrow="Products" title="为真实场景，打造可靠的蓝牙周边。" description="产品中心将由结构化内容驱动。当前资料尚未确认，以下内容仅用于开发阶段验证模板。" />
            <ArrowLink href="/products">查看全部产品</ArrowLink>
          </div>
          <div className="mt-14 grid gap-5 lg:grid-cols-2">
            {products.map((product) => (
              <Link className="group grid gap-5 rounded-2xl border border-line bg-panel/60 p-4 transition-colors hover:border-blue/60 sm:grid-cols-[0.9fr_1.1fr] sm:p-5" href={`/products/${product.slug}`} key={product.slug}>
                <ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
                <div className="flex flex-col justify-center p-2 sm:p-4">
                  <DevPlaceholder>{product.shortLabel}</DevPlaceholder>
                  <p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-subtle">{product.category}</p>
                  <h3 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-copy">{product.name}</h3>
                  <p className="mt-3 text-sm leading-7 text-muted">{product.summary}</p>
                  <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-cyan">查看模板 <ArrowRight /></span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="section-rule py-20 sm:py-24" id="technology">
        <div className="container-shell">
          <SectionHeading eyebrow="Technology" title="从无线连接到嵌入式开发，关注产品背后的核心技术。" description="以硬件经验为基础，持续探索可靠连接、音频体验、嵌入式系统与 AI 在设备中的应用。" tone="cyan" />
          <div className="mt-14 grid border-y border-line sm:grid-cols-2 lg:grid-cols-4">
            {capabilities.map(({ icon: Icon, title, copy }, index) => (
              <div className="flex items-start gap-4 border-line py-7 sm:px-6 lg:border-r lg:first:pl-0 lg:last:border-r-0" key={title}>
                <span className={index === 0 ? "text-blue" : index === 3 ? "text-cyan" : "text-copy"}><Icon /></span>
                <div><h3 className="font-semibold text-copy">{title}</h3><p className="mt-2 text-sm text-muted">{copy}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-rule overflow-hidden py-20 sm:py-24" id="ai-lab">
        <div className="container-shell grid items-center gap-12 lg:grid-cols-[0.8fr_1.2fr]">
          <div>
            <p className="eyebrow eyebrow-cyan">AI Lab</p>
            <h2 className="text-balance mt-5 max-w-lg text-4xl font-semibold tracking-[-0.05em] text-copy sm:text-6xl">让设备更懂声音。</h2>
            <p className="body-copy mt-6 max-w-md">从文本转语音开始，探索语音能力在真实产品中的应用。完整工具位于独立工作台，不抢占首页的产品叙事。</p>
            <Link className="button-secondary mt-8" href="/tts">体验 TTS <ArrowRight /></Link>
          </div>
          <div className="relative flex min-h-64 items-center justify-center overflow-hidden rounded-2xl border border-line bg-panel/50 p-8">
            <div className="absolute inset-x-12 h-px bg-cyan/30" />
            <div className="flex items-center gap-1 opacity-90" aria-hidden="true">
              {[22, 42, 70, 105, 66, 132, 90, 48, 112, 78, 36, 58, 96, 50, 26].map((height, index) => <span className={`w-1 rounded-full ${index % 3 === 0 ? "bg-orange" : "bg-cyan"}`} style={{ height }} key={index} />)}
            </div>
            <span className="absolute bottom-5 right-5 text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-subtle">Voice / exploration</span>
          </div>
        </div>
      </section>

      <section className="section-rule py-20 sm:py-24">
        <div className="container-shell flex flex-col justify-between gap-8 rounded-2xl border border-line bg-panel/50 p-7 sm:flex-row sm:items-center sm:p-10">
          <div><p className="eyebrow eyebrow-blue">About Kaotings</p><h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em]">把技术做成日常可用的体验。</h2></div>
          <ArrowLink href="/about">了解我们</ArrowLink>
        </div>
      </section>
    </>
  );
}