Hero Section

import HeroSection from "@/components/ui/hero-section"

const MockDashboard = () => (
  <div className="grid h-64 grid-cols-3 gap-px bg-border md:h-80">
    <div className="col-span-1 flex flex-col gap-px bg-muted/20 p-4">
      <div className="mb-3 h-3 w-24 rounded bg-muted" />
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="flex items-center gap-2 rounded-md p-2 hover:bg-muted/40">
          <div className="h-3 w-3 rounded-full bg-primary/30" />
          <div className="h-2 flex-1 rounded bg-muted" />
        </div>
      ))}
    </div>
    <div className="col-span-2 bg-background p-4">
      <div className="mb-4 flex items-center justify-between">
        <div className="h-4 w-32 rounded bg-muted" />
        <div className="h-7 w-20 rounded-md bg-primary/20" />
      </div>
      <div className="grid grid-cols-2 gap-3">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="rounded-lg border border-border bg-card p-3 shadow-sm">
            <div className="mb-2 h-2 w-16 rounded bg-muted" />
            <div className="h-6 w-10 rounded bg-primary/20" />
          </div>
        ))}
      </div>
      <div className="mt-3 h-20 rounded-lg border border-border bg-card p-3">
        <div className="mb-2 h-2 w-24 rounded bg-muted" />
        <div className="flex gap-1">
          {[40, 65, 50, 80, 60, 90, 70].map((h, i) => (
            <div
              key={i}
              className="flex-1 rounded-sm bg-primary/30"
              style={{ height: `${h * 0.5}px` }}
            />
          ))}
        </div>
      </div>
    </div>
  </div>
)

export default function HeroSectionDemo() {
  return (
    <div className="min-h-screen bg-background">
      <HeroSection
        badge="New — Property Management 2.0"
        headline="Manage your properties without the chaos"
        subheadline="One platform for developers, administrators, and residents. Documents, defects, maintenance, and community — all in one place."
        primaryCta={{ label: "Get started free", href: "#" }}
        secondaryCta={{ label: "See how it works", href: "#" }}
        media={<MockDashboard />}
        align="center"
      />
    </div>
  )
}