Tilt card

import { Bath, BedDouble, MapPin, Ruler } from "lucide-react";
import { TiltCard } from "@/components/facade/tilt-card";

export default function Demo() {
  return (
    <div className="flex w-full justify-center py-4">
      <TiltCard
        wrapperClassName="w-full max-w-[380px]"
        className="w-full border border-border bg-card text-card-foreground shadow-[0_2px_4px_0_color-mix(in_oklch,var(--foreground)_6%,transparent),0_30px_60px_-30px_color-mix(in_oklch,var(--foreground)_40%,transparent)]"
      >
        {/* Abstract architectural placeholder image */}
        <div className="relative h-52 overflow-hidden bg-linear-to-b from-brand/25 via-accent to-muted">
          <svg aria-hidden viewBox="0 0 380 208" className="absolute inset-0 size-full" preserveAspectRatio="xMidYMax slice">
            <defs>
              <linearGradient id="tilt-sun" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="var(--brand)" stopOpacity="0.9" />
                <stop offset="1" stopColor="var(--brand)" stopOpacity="0.2" />
              </linearGradient>
            </defs>
            <circle cx="288" cy="70" r="34" fill="url(#tilt-sun)" />
            <path d="M0 170 Q 90 140 190 160 T 380 150 V208 H0Z" className="fill-foreground/10" />
            <g className="text-foreground">
              <rect x="70" y="92" width="200" height="86" rx="2" fill="currentColor" fillOpacity="0.88" />
              <rect x="150" y="62" width="150" height="40" rx="2" fill="currentColor" fillOpacity="0.95" />
              <rect x="84" y="108" width="54" height="56" rx="1" className="fill-brand/80" />
              <rect x="146" y="108" width="54" height="56" rx="1" className="fill-brand/60" />
              <rect x="210" y="108" width="46" height="70" rx="1" className="fill-background/25" />
              <rect x="164" y="72" width="122" height="20" rx="1" className="fill-brand/50" />
            </g>
            <rect x="0" y="178" width="380" height="30" className="fill-foreground/15" />
          </svg>
          <span className="absolute left-4 top-4 rounded-full bg-background/85 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-foreground backdrop-blur">
            Just listed
          </span>
        </div>
        <div className="p-5">
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className="font-display text-2xl font-semibold tracking-tight">$1,285,000</p>
              <p className="mt-1 inline-flex items-center gap-1 text-sm text-muted-foreground">
                <MapPin className="size-3.5" aria-hidden />
                2418 Juniper Ridge, Boulder, CO
              </p>
            </div>
            <span className="rounded-lg bg-success/10 px-2 py-1 text-xs font-medium text-success">Open Sat</span>
          </div>
          <div className="mt-5 grid grid-cols-3 divide-x divide-border rounded-xl border border-border bg-muted/40 text-sm">
            <div className="flex items-center justify-center gap-1.5 py-2.5">
              <BedDouble className="size-4 text-muted-foreground" aria-hidden />4 bd
            </div>
            <div className="flex items-center justify-center gap-1.5 py-2.5">
              <Bath className="size-4 text-muted-foreground" aria-hidden />3 ba
            </div>
            <div className="flex items-center justify-center gap-1.5 py-2.5">
              <Ruler className="size-4 text-muted-foreground" aria-hidden />
              <span className="font-mono text-[13px]">2,940</span> sqft
            </div>
          </div>
        </div>
      </TiltCard>
    </div>
  );
}