const Testimonials = () => {
  const quotes = [
    {
      quote: '以前補給品就是堆在角落吃灰，現在變成會員每月固定會來續購的品項。QR Code 模式對我這種單人工作室太友善。',
      name: '陳教練',
      role: 'FORGE 私人訓練工作室 · 台北',
      metric: '月分潤 NT$ 18,000+',
    },
    {
      quote: '小禎的背書是真的有用，很多媽媽會員看到代言人就安心了。試飲包拿來辦減脂班獎品，報名率直接翻倍。',
      name: '林館長',
      role: 'Ironworks 健身中心 · 台中',
      metric: '減脂班報名 ×2.3',
    },
    {
      quote: 'WEDAR 派團隊來拍場館形象片那次，我們 IG 粉絲一週漲 800。這種行銷資源我們自己根本做不來。',
      name: 'Kevin',
      role: 'Pulse Strength Lab · 高雄',
      metric: 'IG 粉絲 +800 / 週',
    },
  ];

  return (
    <section id="testimonials" className="relative bg-wedar-bone py-24 lg:py-32">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 mb-16">
          <div className="lg:col-span-7 reveal">
            <SectionLabel>Partner Voices</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,5.6vw,88px)] leading-[0.92] text-wedar-primary tracking-hyper">
              不是我們說厲害，<br/>是老闆們自己講的。
            </h2>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-5 reveal">
          {quotes.map((q, i) => (
            <div key={i} className="bg-white rounded-[28px] p-8 border border-wedar-primary/10 flex flex-col min-h-[380px] relative hover:border-wedar-primary transition-colors">
              <div className="font-black-display text-6xl text-wedar-green leading-none mb-4">"</div>
              <p className="text-[15.5px] leading-[1.85] text-wedar-primary/85 flex-1">{q.quote}</p>
              <div className="mt-6 pt-6 border-t border-wedar-primary/10 flex items-end justify-between gap-4">
                <div>
                  <div className="font-black text-wedar-primary">{q.name}</div>
                  <div className="text-xs text-wedar-primary/60 mt-1">{q.role}</div>
                </div>
                <div className="text-right shrink-0">
                  <div className="text-[10px] tracking-[0.2em] uppercase text-wedar-primary/50">Outcome</div>
                  <div className="font-black-display text-sm mt-1 text-wedar-green tracking-ultra">{q.metric}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* logo wall */}
        <div className="mt-16 pt-10 border-t border-wedar-primary/15 reveal">
          <div className="text-[10px] tracking-[0.3em] uppercase text-wedar-primary/50 mb-6">合作夥伴 · 部分場館</div>
          <div className="flex flex-wrap items-center gap-x-10 gap-y-4 font-black-display text-wedar-primary/40 text-xl tracking-hyper">
            {['FORGE', 'IRONWORKS', 'PULSE LAB', 'CORE 24', 'ATHLETIC/CO', 'ROUTINE GYM', 'MOVE STUDIO', 'UPLIFT', 'HEAVY MTL'].map(n => (
              <span key={n} className="hover:text-wedar-primary transition-colors cursor-default">{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Testimonials });