// Testimonials — short quotes from collaborators.
// TODO(Mikky): swap in real quotes, names and roles.

const TESTIMONIALS = [
  {
    quote:
      "Mikky built our site, shot our launch content, and somehow made both feel like one brand. Rare to find that range in one person.",
    name: "A. Client",
    role: "Founder, small business",
  },
  {
    quote:
      "Gave Mikky a vague idea and got back a working app two weeks later. No jargon, no drama — it just worked.",
    name: "B. Collaborator",
    role: "Product manager",
  },
  {
    quote:
      "The reel series doubled our reach in a month. Every post felt on-brand and none of it felt forced.",
    name: "C. Partner",
    role: "Marketing lead",
  },
];

function Testimonials() {
  const { TiltCard, Reveal, GlowSpot } = window;
  return (
    <section id="testimonials" className="relative overflow-hidden px-8 md:px-16 lg:px-20 py-24">
      <GlowSpot className="-top-32 left-1/3" size={700} opacity={0.05} />

      <Reveal>
        <p className="text-sm font-body text-white/80 mb-6">{"// Kind Words"}</p>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-7xl leading-[0.9] tracking-[-3px]">
          What people
          <br />
          say
        </h2>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={t.name} delay={i * 0.1} className="h-full">
          <TiltCard
            max={7}
            className="liquid-glass rounded-[1.25rem] p-6 flex flex-col min-h-[240px] h-full"
          >
            <p className="font-heading italic text-white text-xl md:text-2xl leading-tight tracking-[-0.5px]">
              “{t.quote}”
            </p>
            <div className="flex-1"></div>
            <div className="mt-6">
              <div className="text-sm text-white font-body font-medium">{t.name}</div>
              <div className="text-xs text-white/60 font-body font-light mt-0.5">{t.role}</div>
            </div>
          </TiltCard>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;