// Testimonials — masonry-style mosaic of quotes from managers/agents

function Testimonials() {
  const quotes = [
    {
      body: "I went from 6 artists to 14 without hiring. The agent runs the inbox at 1am so I don't have to.",
      name: "Lara Bell", role: "Manager · Crush Music",
      tone: "dark",
    },
    {
      body: "First tool that actually understood music context. It knows the difference between a sync brief and a press pitch — and replies to each like a pro.",
      name: "Marco Vidal", role: "Independent · ex-Range",
      tone: "cyan",
      featured: true,
    },
    {
      body: "Splits used to take a full Friday. Now they go out the day royalties land.",
      name: "Priya Shah", role: "Business mgr · Foundations",
      tone: "dark",
    },
    {
      body: "The audit log is what got our label legal team comfortable. Every reply is sourced, every action reversible.",
      name: "Devon Mathers", role: "Day-to-day · Three Six Zero",
      tone: "dark",
    },
    {
      body: "It drafts in the artist's voice, not generic AI tone. My roster doesn't even know.",
      name: "Solenne Park", role: "Manager · Mick Mgmt",
      tone: "dark",
    },
    {
      body: "Sync conversion went from 4% to 19% in two months. The agent submits to every brief that fits — I just approve.",
      name: "Ezra Klein", role: "Sync agent · Wasserman",
      tone: "dark",
    },
  ];

  return (
    <Section pad={120} id="testimonials" label="06 Testimonials">
      <SectionHeader
        eyebrow="What managers say"
        headline="Built for people who"
        accent="hate doing admin work."
      />
      <div style={{
        columnCount: 3,
        columnGap: 16,
      }}>
        {quotes.map((q, i) => (
          <div key={i} style={{ breakInside: 'avoid', marginBottom: 16 }}>
            <BentoCard variant={q.featured ? 'cyanSoft' : 'dark'} style={{ padding: 24 }}>
              <div style={{
                fontSize: q.featured ? 18 : 15,
                lineHeight: 1.55,
                color: '#fff',
                fontWeight: q.featured ? 500 : 400,
                letterSpacing: q.featured ? '-0.01em' : '0',
              }}>
                "{q.body}"
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 18 }}>
                <Avatar initials={q.name.split(' ').map(n => n[0]).join('')} color="#1f2937" size={28} />
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>{q.name}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{q.role}</div>
                </div>
              </div>
            </BentoCard>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Testimonials });