Service menu

"use client";

import { ServiceMenu, type ServiceCategory } from "@/components/facade/service-menu";

const categories: ServiceCategory[] = [
  {
    id: "hair",
    label: "Haircuts",
    blurb: "Every cut includes a consultation, shampoo and style.",
    items: [
      {
        name: "Precision cut & style",
        description: "Tailored cut with a blowout finish. Ideal for short to mid-length hair.",
        duration: 60,
        price: 85,
        popular: true,
        href: "#book",
      },
      {
        name: "Long hair cut & style",
        description: "Shape, layers and face-framing for hair past the shoulders.",
        duration: 75,
        price: 105,
        href: "#book",
      },
      {
        name: "Bang trim",
        description: "Quick refresh between appointments. Complimentary for clients within 6 weeks.",
        duration: 15,
        price: 20,
        href: "#book",
      },
      {
        name: "Men's cut",
        description: "Clipper or scissor cut with a hot towel finish.",
        duration: 45,
        price: 55,
        href: "#book",
      },
    ],
  },
  {
    id: "color",
    label: "Color",
    blurb: "Final pricing depends on length and density. We confirm it at your consult.",
    items: [
      {
        name: "Full balayage",
        description: "Hand-painted, sun-kissed dimension with toner and gloss.",
        duration: 180,
        price: "From $245",
        popular: true,
        href: "#book",
      },
      {
        name: "Partial highlights",
        description: "Foils through the top and sides for brightness where it counts.",
        duration: 120,
        price: 165,
        href: "#book",
      },
      {
        name: "Root touch-up",
        description: "Single-process color on regrowth up to 1.5 inches.",
        duration: 75,
        price: 95,
        href: "#book",
      },
      {
        name: "Gloss treatment",
        description: "Adds shine and refreshes tone. Pairs well with any cut.",
        duration: 30,
        price: 50,
        href: "#book",
      },
    ],
  },
  {
    id: "treatments",
    label: "Treatments",
    items: [
      {
        name: "Olaplex bond repair",
        description: "Rebuilds broken bonds after color or heat damage.",
        duration: 30,
        price: 45,
        popular: true,
        href: "#book",
      },
      {
        name: "Keratin smoothing",
        description: "Cuts frizz and blow-dry time for up to 12 weeks.",
        duration: 150,
        price: "From $275",
        href: "#book",
      },
      {
        name: "Scalp detox ritual",
        description: "Exfoliating scrub, steam and massage for a healthy scalp.",
        duration: 40,
        price: 60,
        href: "#book",
      },
    ],
  },
  {
    id: "events",
    label: "Bridal & events",
    items: [
      {
        name: "Bridal trial",
        description: "Full run-through of your wedding day look, with photos for reference.",
        duration: 90,
        price: 150,
        href: "#book",
      },
      {
        name: "Event updo",
        description: "Elegant styling for galas, proms and special occasions.",
        duration: 60,
        price: 95,
        href: "#book",
      },
    ],
  },
];

export default function Demo() {
  return (
    <div className="mx-auto w-full max-w-2xl p-4">
      <div className="rounded-2xl border border-border bg-card p-5 text-card-foreground sm:p-7">
        <header className="mb-5 flex flex-wrap items-end justify-between gap-2">
          <div>
            <p className="text-xs font-medium uppercase tracking-wider text-brand">Juniper Hair Studio</p>
            <h2 className="mt-1 font-display text-2xl font-semibold tracking-tight">Services & pricing</h2>
          </div>
          <p className="text-xs text-muted-foreground">Mission District, San Francisco</p>
        </header>
        <ServiceMenu categories={categories} />
      </div>
    </div>
  );
}