Hero

"use client";
import { ArrowRight, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "centered" | "split" | "minimal";

export function Hero({ state = "centered" }: { state?: State }) {
if (state === "minimal") {
  return (
    <div className="grid w-full place-items-center rounded-xl border border-border bg-background/30 px-6 py-16">
      <p className="font-mono text-[11px] text-muted-foreground">/ frontend lab</p>
      <h2 className="mt-3 text-3xl font-medium tracking-tight">把碎片，存成元件。</h2>
      <button className="mt-6 inline-flex items-center gap-2 text-xs text-foreground underline-offset-4 hover:underline">
        開始閱讀 <ArrowRight className="h-3 w-3" />
      </button>
    </div>
  );
}

if (state === "split") {
  return (
    <div className="grid w-full grid-cols-2 gap-6 rounded-xl border border-border bg-background/30 p-8">
      <div className="flex flex-col justify-center">
        <span className="mb-3 inline-flex w-fit items-center gap-1 rounded-full bg-lab-accent/15 px-2 py-0.5 font-mono text-[10px] text-lab-accent">
          <Sparkles className="h-2.5 w-2.5" /> NEW
        </span>
        <h2 className="text-2xl font-medium tracking-tight">所有效果與模式</h2>
        <p className="mt-2 text-xs text-muted-foreground">一站可查、可貼、可改。</p>
        <button className="mt-4 w-fit rounded-md bg-foreground px-3 py-1.5 text-xs text-background">
          立即開始
        </button>
      </div>
      <div className="aspect-square rounded-lg bg-gradient-to-br from-lab-accent/30 via-purple-500/20 to-blue-500/30" />
    </div>
  );
}

return (
  <div className="grid w-full place-items-center rounded-xl border border-border bg-gradient-to-b from-background to-lab-accent/5 px-6 py-16">
    <span className="mb-4 inline-flex items-center gap-1 rounded-full border border-border bg-background/80 px-2 py-0.5 font-mono text-[10px]">
      <Sparkles className="h-2.5 w-2.5 text-lab-accent" /> v1.0 released
    </span>
    <h2 className="text-center text-4xl font-medium tracking-tight">
      前端的所有片段，<br />都在這裡。
    </h2>
    <p className="mt-3 max-w-md text-center text-xs text-muted-foreground">
      Framer Motion · GSAP · Three.js · 完整介面互動模式
    </p>
    <div className="mt-6 flex gap-2">
      <button className="rounded-md bg-foreground px-4 py-2 text-xs text-background">
        開始閱讀
      </button>
      <button className="rounded-md border border-border px-4 py-2 text-xs">
        GitHub →
      </button>
    </div>
  </div>
);
}