// app/components/LandingPage.tsx (Server Component)
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Check } from "lucide-react";
import JoinForm from "./JoinForm";

export default function LandingPage() {
  return (
    <div className="min-h-screen">
      <header className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="rounded-full w-10 h-10 bg-black/90 text-white flex items-center justify-center font-bold">G4</div>
          <div>
            <h1 className="text-lg font-semibold">Gruff Studio</h1>
            <p className="text-xs text-slate-500">UI playground · shadcn + Tailwind</p>
          </div>
        </div>
        <nav className="flex items-center gap-3">
          <Button variant="ghost" size="sm">Docs</Button>
          <Button size="sm">Sign in</Button>
        </nav>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-12">
        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div>
            <Badge className="mb-4">Beta</Badge>
            <h2 className="text-4xl font-extrabold leading-tight">Build faster with shadcn components</h2>
            <p className="mt-4 text-slate-600">A tiny example landing page to confirm your Tailwind + shadcn setup is working. Components are unopinionated and fully customizable with Tailwind.</p>

            <div className="mt-6 flex gap-4">
              <Button>Get started</Button>
              <Button variant="outline">Learn more</Button>
            </div>

            <div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
              <Feature icon={<Check className="w-4 h-4" />} title="Reusable" subtitle="Composable UI" />
              <Feature icon={<Check className="w-4 h-4" />} title="Accessible" subtitle="Focus & keyboard" />
              <Feature icon={<Check className="w-4 h-4" />} title="Themed" subtitle="Tailwind friendly" />
              <Feature icon={<Check className="w-4 h-4" />} title="Tiny" subtitle="Zero runtime" />
            </div>
          </div>

          <div>
            <Card>
              <CardContent className="p-6">
                <CardTitle>Join the waitlist</CardTitle>
                <CardDescription>Drop your email and we’ll ping you when the demo is live.</CardDescription>
                <JoinForm />
                <p className="mt-3 text-xs text-slate-500">No spam — only useful updates.</p>
              </CardContent>
            </Card>

            <div className="mt-6 grid grid-cols-1 gap-3">
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="rounded-md bg-slate-100 p-2">
                      <Check className="w-5 h-5 text-slate-700" />
                    </div>
                    <div>
                      <p className="font-medium">Server-side friendly</p>
                      <p className="text-sm text-slate-500">Use these components in server and client components.</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="rounded-md bg-slate-100 p-2">
                      <Check className="w-5 h-5 text-slate-700" />
                    </div>
                    <div>
                      <p className="font-medium">Tailwind-ready</p>
                      <p className="text-sm text-slate-500">Customize tokens in tailwind.config.</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        <section className="mt-16">
          <h3 className="text-2xl font-semibold">Example features</h3>
          <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <FeatureCard title="Fast dev loop" desc="Hot reload, Tailwind JIT, and tiny components." />
            <FeatureCard title="Prisma-ready" desc="Wire your database and serve content from server components." />
            <FeatureCard title="Accessible" desc="Built with accessibility and UX in mind." />
          </div>
        </section>
      </main>

      <footer className="border-t mt-12 py-6">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-slate-500">© {new Date().getFullYear()} Gruff Studio</p>
          <div className="flex items-center gap-3 text-sm text-slate-600">Made with ❤️ using shadcn components</div>
        </div>
      </footer>
    </div>
  );
}

function Feature({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) {
  return (
    <div className="flex items-center gap-3 p-3 bg-white rounded-lg shadow-sm">
      <div className="w-8 h-8 bg-slate-100 rounded flex items-center justify-center">{icon}</div>
      <div>
        <div className="font-medium text-sm">{title}</div>
        <div className="text-xs text-slate-500">{subtitle}</div>
      </div>
    </div>
  );
}

function FeatureCard({ title, desc }: { title: string; desc: string }) {
  return (
    <Card>
      <CardContent>
        <h4 className="font-semibold">{title}</h4>
        <p className="mt-2 text-sm text-slate-500">{desc}</p>
      </CardContent>
    </Card>
  );
}