import { cn } from "@/lib/utils"
import { ClassValue } from "clsx"
import { ReactNode } from "react"

type HeroProps = {
  title: ReactNode
  paragraph: ReactNode
  badge?: ReactNode
  ctas?: ReactNode
  className?: ClassValue
}

export default function Hero01({
  title,
  paragraph,
  badge = null,
  ctas = null,
  className,
}: HeroProps) {
  return (
    <section
      className={cn(
        "flex flex-col items-center px-6 py-24 text-center md:py-32 lg:p-40",
        className,
      )}
    >
      {badge}
      <h1 className="max-w-4xl text-5xl font-bold tracking-tight text-balance sm:text-6xl lg:text-7xl">
        {title}
      </h1>
      <p className="mt-8 max-w-5xl text-lg leading-relaxed text-muted-foreground text-balance sm:text-xl">
        {paragraph}
      </p>
      {ctas && (
        <div className="mt-8 flex flex-col gap-3 sm:flex-row">{ctas}</div>
      )}
    </section>
  )
}

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export default function Hero02() {
  return (
    <section className="w-full py-20 md:py-28 lg:py-32">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 lg:grid-cols-2 lg:gap-16">
        <div className="flex flex-col gap-6">
          <Badge variant="outline" className="w-fit">
            Version 2.0
          </Badge>
          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
            The platform for modern teams
          </h1>
          <p className="text-lg text-muted-foreground">
            Streamline your workflow with powerful collaboration tools.
            From planning to deployment, everything your team needs to
            build great products together.
          </p>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Button size="lg">Start Free Trial</Button>
            <Button variant="outline" size="lg">
              Watch Demo
            </Button>
          </div>
        </div>
        <div className="flex items-center justify-center">
          <div className="aspect-[4/3] w-full rounded-xl border border-border bg-muted/50 p-8">
            <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="48"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="opacity-50"
              >
                <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                <circle cx="9" cy="9" r="2" />
                <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
              </svg>
              <span className="text-sm">Product Screenshot</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

import {
  LayersIcon,
  LayoutGridIcon,
  FileCodeIcon,
  ArrowRightIcon,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

const valueProps = [
  {
    icon: LayersIcon,
    title: "Component Library",
    description:
      "50+ handcrafted, accessible components built on Base UI and styled with Tailwind CSS.",
    href: "#",
  },
  {
    icon: LayoutGridIcon,
    title: "UI Blocks",
    description:
      "Production-ready page sections — heroes, pricing, FAQs, and more — ready to drop into your app.",
    href: "#",
  },
  {
    icon: FileCodeIcon,
    title: "Templates",
    description:
      "Full-stack starter kits and landing pages built with Next.js, so you can ship faster.",
    href: "#",
  },
]

export default function Hero03() {
  return (
    <section className="px-6 py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-6xl">
        {/* Top split section */}
        <div className="grid items-end gap-8 lg:grid-cols-2 lg:gap-16">
          {/* Left: badge + title */}
          <div className="flex flex-col items-start gap-4">
            <Badge variant="outline" className="gap-1.5 px-3 py-1 text-xs font-normal text-muted-foreground">
              <span className="font-medium text-foreground">Now available</span>
              <span className="text-border">|</span>
              v1.0
            </Badge>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
              Build your next idea even faster.
            </h1>
          </div>

          {/* Right: copy + CTAs */}
          <div className="flex flex-col items-start gap-6">
            <p className="text-lg leading-relaxed text-muted-foreground">
              Beautifully designed, expertly crafted components and templates,
              built by the makers of Toro UI. The perfect starting point for
              your next project.
            </p>
            <div className="flex gap-3">
              <Button size="lg">Get Started</Button>
              <Button variant="outline" size="lg">
                Browse Components
              </Button>
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="my-12 border-t lg:my-16" />

        {/* Value props */}
        <div className="grid gap-8 sm:grid-cols-3">
          {valueProps.map((prop) => (
            <div key={prop.title} className="group flex flex-col gap-3">
              <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
                <prop.icon className="size-5 text-foreground" />
              </div>
              <h3 className="text-base font-semibold">{prop.title}</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {prop.description}
              </p>
              <a
                href={prop.href}
                className="inline-flex items-center gap-1 text-sm font-medium text-foreground hover:underline"
              >
                Explore
                <ArrowRightIcon className="size-3.5" />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}