// app/page.tsx
import Link from "next/link";
 
export default function HomePage() {
  return (
    <>
      <header className="border-b border-slate-200">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <div className="text-lg font-semibold">Glow</div>
          <nav className="hidden gap-6 text-sm text-slate-600 sm:flex">
            <Link href="/product">Product</Link>
            <Link href="/how">How it works</Link>
            <Link href="/reviews">Reviews</Link>
            <Link href="/buy">Buy</Link>
          </nav>
          <button className="rounded-full bg-violet-500 px-4 py-2 text-sm font-semibold text-white">
            Order Glow
          </button>
        </div>
      </header>
 
      <section className="mx-auto max-w-6xl px-6 py-20 sm:py-28">
        <div className="grid items-center gap-12 sm:grid-cols-2">
          <div>
            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-violet-500">
              New · Spring 2026
            </div>
            <h1 className="mt-3 text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
              Natural light, on a dimmer.
            </h1>
            <p className="mt-5 max-w-md text-lg leading-relaxed text-slate-600">
              Glow tunes to the time of day — warm in the morning, bright at noon, soft after dark. One lamp, every room, every mood.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <button className="rounded-full bg-violet-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg">
                Order — $89
              </button>
              <button className="rounded-full border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">
                See it in action
              </button>
            </div>
          </div>
          <div className="relative">
            <div className="aspect-square w-full rounded-3xl shadow-2xl bg-violet-100" />
          </div>
        </div>
      </section>
 
      <section className="bg-slate-50">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <div className="text-center">
            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-violet-500">
              Why people switch
            </div>
            <h2 className="mt-3 text-3xl font-bold tracking-tight">
              Three things smart bulbs got wrong.
            </h2>
          </div>
          <div className="mt-12 grid gap-8 sm:grid-cols-3">
            {/* features */}
          </div>
        </div>
      </section>
 
      <section className="mx-auto max-w-4xl px-6 py-20 text-center">
        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
          Light that fits the room you're actually in.
        </h2>
        <p className="mt-4 text-lg text-slate-600">
          Free shipping in the US. 60-day returns, no questions.
        </p>
      </section>
    </>
  );
}