import * as React from "react"
import { cn } from "@/lib/utils"

/* ------------------------------------------------------------------ */
/*  TestimonialsSection — root <section>                               */
/* ------------------------------------------------------------------ */

function TestimonialsSection({
  className,
  ...props
}: React.ComponentProps<"section">) {
  return (
    <section
      data-slot="testimonials-section"
      className={cn("py-20 bg-secondary", className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  TestimonialsSectionContainer — centred max-width wrapper            */
/* ------------------------------------------------------------------ */

function TestimonialsSectionContainer({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="testimonials-section-container"
      className={cn("mx-auto max-w-7xl px-6 lg:px-8", className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  TestimonialsSectionHeader — heading area                           */
/* ------------------------------------------------------------------ */

function TestimonialsSectionHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="testimonials-section-header"
      className={cn("mb-12", className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  TestimonialsSectionLabel — small uppercase tracking label           */
/* ------------------------------------------------------------------ */

function TestimonialsSectionLabel({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="testimonials-section-label"
      className={cn(
        "text-xs font-semibold tracking-[.2em] uppercase text-primary mb-3",
        className,
      )}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  TestimonialsSectionTitle — serif heading                            */
/* ------------------------------------------------------------------ */

function TestimonialsSectionTitle({
  className,
  ...props
}: React.ComponentProps<"h2">) {
  return (
    <h2
      data-slot="testimonials-section-title"
      className={cn(
        "font-serif text-3xl md:text-4xl lg:text-5xl font-medium leading-tight text-balance",
        className,
      )}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  TestimonialsSectionGrid — responsive 3-column grid                 */
/* ------------------------------------------------------------------ */

function TestimonialsSectionGrid({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="testimonials-section-grid"
      className={cn("grid md:grid-cols-3 gap-6", className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/*  Exports                                                            */
/* ------------------------------------------------------------------ */

export {
  TestimonialsSection,
  TestimonialsSectionContainer,
  TestimonialsSectionHeader,
  TestimonialsSectionLabel,
  TestimonialsSectionTitle,
  TestimonialsSectionGrid,
}

/* Re-export the card sub-components for convenience */
export {
  TestimonialCard,
  TestimonialCardContent,
  TestimonialCardHeader,
  TestimonialCardStars,
  TestimonialCardQuoteIcon,
  TestimonialCardQuote,
  TestimonialCardFooter,
  TestimonialCardAvatar,
  TestimonialCardAuthor,
  TestimonialCardAuthorName,
  TestimonialCardAuthorSubtitle,
} from "@/components/ui/testimonial-card"
Installation

Examples

Default
