import Image from "next/image";
import { Reveal, RevealGroup, RevealItem } from "./Reveal";
import type { Testimonial } from "../lib/payload";

// Shared by /todo-cards, /newsletter, and /challenge — all three were
// already pixel-identical (bg-muted filled card, no border, decorative
// quote-mark, quote on top with flex-1 pushing the avatar/name row to the
// bottom, hover-lift + avatar-scale), kept in sync deliberately as one
// visual pattern across pages rather than each page's own (differing)
// Figma spec for this one section. max-w-[1600px] matches Challenge's
// testimonial container cap, the widest of the three original values —
// a deliberate compromise so all three read consistently across viewports
// instead of one looking narrower than the others past ~1440px.
export function TestimonialsGrid({ testimonials }: { testimonials: Testimonial[] }) {
  if (testimonials.length === 0) return null;

  return (
    <section className="w-full bg-bg-base flex flex-col gap-8 items-center py-12 sm:py-16 px-[var(--layout-padding-x)]">
      <div className="max-w-[1600px] mx-auto w-full flex flex-col gap-8 items-center">
        <Reveal
          className="font-semibold text-h-emphasis text-text-primary text-center"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Was andere sagen
        </Reveal>

        <RevealGroup className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
          {testimonials.map((t) => (
            <RevealItem
              key={t.id}
              className="group relative sm:col-span-4 bg-bg-muted rounded-xl p-6 flex flex-col gap-4 transition-transform duration-300 hover:-translate-y-1"
            >
              <span
                aria-hidden
                className="absolute top-4 right-6 font-bold text-[2.5rem] text-[#ccc] leading-none select-none"
              >
                ”
              </span>
              <p className="flex-1 text-body-sm text-text-primary leading-[1.6] pr-8">{t.quote}</p>
              <div className="flex items-center gap-3">
                <div className="relative size-10 shrink-0 rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
                  <Image src={t.avatar} alt={t.name} fill sizes="40px" className="object-cover" />
                </div>
                <div>
                  <p className="font-semibold text-body-sm text-text-primary">{t.name}</p>
                  <p className="text-body-sm text-text-muted">{t.role}</p>
                </div>
              </div>
            </RevealItem>
          ))}
        </RevealGroup>
      </div>
    </section>
  );
}