// Proof / Testimonials — "Creators who stayed". 3 SAMPLE quotes marked as placeholders.

function Proof() {
  const ref = React.useRef(null);

  const quotes = [
    {
      tag: "Growth story",
      q: "I sat at $4K a month for almost a year before Palm. Six months in I'm at $18K. Honestly nothing changed about how hard I was working. I just finally had a team that knew what they were actually doing.",
      who: "A.",
    },
    {
      tag: "Trust story",
      q: "Every other agency wanted full control and to keep me in the dark. With Palm I can literally see what my chatters are saying and what's getting posted. First time I've felt like a partner instead of just a paycheck for someone.",
      who: "M.",
    },
    {
      tag: "Life story",
      q: "I got my weekends back. Sounds dramatic but I was answering DMs at 2am for two years and felt like I was losing it. Now I film, I rest, my income still went up.",
      who: "J.",
    },
  ];

  return (
    <section id="proof" ref={ref} className="relative py-40 md:py-56" data-screen-label="Proof">
      <div className="absolute left-0 top-1/3 w-[600px] h-[600px] rounded-full bg-[rgba(232,160,160,0.02)] blur-[180px]"></div>
      <div className="relative max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8 items-end mb-20">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="05 / 09">Creators who stayed</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.94]" style={{ fontSize: "clamp(44px, 5.6vw, 96px)" }}>
              The ones who've<br/>been with us long enough<br/><GradientText>to tell you the truth.</GradientText>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9 flex flex-col gap-3">
            <p className="text-[#7a7a7a] font-light leading-relaxed text-[15px]">
              Three real creators. Anonymized for their privacy, <span className="text-[#f0ece8]">never edited for ours</span>.
            </p>
            <span className="inline-flex w-fit text-[9px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)] border border-[rgba(232,160,160,0.25)] px-2.5 py-1.5">
              ⚠︎ Sample quotes — awaiting final approval
            </span>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[0.04] border border-white/[0.04]">
          {quotes.map((t, i) => (
            <figure key={i} className="reveal bg-[#060606] p-10 md:p-12 hover:bg-[rgba(232,160,160,0.02)] transition-colors duration-500 flex flex-col justify-between" style={{ transitionDelay: `${i*120}ms` }}>
              <div>
                <div className="flex items-center justify-between mb-8">
                  <span className="text-[10px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— {t.tag}</span>
                  <span className="font-display text-[11px] tracking-[0.3em] text-white/25">0{i+1} / 03</span>
                </div>
                <span className="font-display text-[72px] leading-none text-[#E8A0A0]/40 block mb-2">"</span>
                <blockquote className="font-display text-[19px] md:text-[21px] font-light leading-[1.35] text-[#f0ece8] tracking-tight text-balance">
                  {t.q}
                </blockquote>
              </div>
              <div className="mt-10 pt-6 border-t border-white/[0.06]">
                <div className="flex items-center gap-3">
                  <span className="w-10 h-10 rounded-full avatar-grad flex items-center justify-center font-display text-[14px] font-semibold text-[#060606]">{t.who}</span>
                  <div className="font-display text-[14px] font-semibold">{t.who}</div>
                </div>
              </div>
            </figure>
          ))}
        </div>

        <div className="mt-20 flex flex-col md:flex-row md:items-center justify-between gap-6 pt-10 border-t border-white/[0.05]">
          <p className="text-[13px] text-[#7a7a7a] font-light max-w-xl">
            Want to talk to a current creator before you sign? We'll connect you. That's on the table.
          </p>
          <BtnArrow variant="ghost" href="#cta">Ask for a reference</BtnArrow>
        </div>
      </div>
    </section>
  );
}

window.Proof = Proof;