/* burp.agency homepage — Testimonials (Section 05)
   Featured quote on pale-orange. Grid cards on cream. Photos for every voice;
   Malcare gets an "MC" initials avatar. */

const FEATURED = {
  quote: 'We had a great product and a terrible content problem. Nobody outside our engineering team knew what we were building or why it mattered. Burp fixed both — the SEO baseline and the story. Within three months our organic traffic had a direction for the first time.',
  name: 'Siara',
  role: 'Head of Marketing, Memfault',
  industry: 'IoT reliability platform for embedded software teams',
  photo: 'assets/people/siara.jpeg',
};

const CARDS = [
  {
    quote: 'We needed ad campaigns that could explain AI code review to developers without sounding like every other dev tool ad. Burp got the audience immediately — the copy didn\'t explain what we do, it explained what developers hate about code review and why that\'s exactly our problem to solve.',
    name: 'Annika Major', role: 'Head of Growth, Coderabbit',
    photo: 'assets/people/annika-major.jpeg',
  },
  {
    quote: 'SRE and DevOps audiences are allergic to marketing. They know when something is written by someone who\'s never been on-call at 3am. Burp wrote like they had. The SEO content ranked, but more importantly it was the kind of content our audience actually shared.',
    name: 'Vishwa', role: 'CEO, Zenduty',
    photo: 'assets/people/vishwa.jpeg',
  },
  {
    quote: 'GTM strategy at this scale requires someone who can hold the complexity without losing the clarity. Burp mapped the full funnel from ICP to acquisition channel before writing a single word of copy. The output was a plan we could actually execute, not a deck to present.',
    name: 'Ziwei Chen', role: 'GTM Lead, Alibaba',
    photo: 'assets/people/ziwei.jpeg',
  },
  {
    quote: 'WordPress security is a crowded, noisy space. Getting developers and agency owners to show up to a seminar — and stay — requires content that teaches, not sells. Burp built the seminar content from scratch. Attendance was three times what we\'d expected.',
    name: 'Marketing Team', role: 'MalCare Security',
    initials: 'MC',
  },
  {
    quote: 'Commodity price data is not a natural content marketing subject. Burp found the angle — the people making margin decisions every day on recycled metals, and what they actually need to know. The content we shipped spoke to them directly. First time that had happened.',
    name: 'Sean Davidson', role: 'CEO, Davis Index',
    photo: 'assets/people/sean-davidson.jpg',
  },
];

/* Avatar: photo if we have one, otherwise initials on pale orange. */
const Avatar = ({ photo, initials, size = 56 }) => {
  const base = {
    width: size, height: size,
    borderRadius: '50%',
    flexShrink: 0,
    border: '1px solid var(--color-warm-gray)',
    overflow: 'hidden',
    background: 'var(--color-pale-orange)',
  };
  if (photo) {
    return (
      <img src={photo} alt=""
           style={{ ...base, objectFit: 'cover', display: 'block' }} />
    );
  }
  return (
    <div style={{
      ...base,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'Georgia, serif', fontWeight: 400,
      fontSize: size * 0.4,
      letterSpacing: '-0.02em',
      color: 'var(--color-ink)',
    }}>{initials}</div>
  );
};

const TestimonialCard = ({ t, i }) => {
  const [ref, style] = useReveal({ delay: i * 80 });
  return (
    <div ref={ref} style={{
      ...style,
      background: '#fff',
      border: '1px solid var(--color-warm-gray)',
      padding: 28,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        fontFamily: 'Georgia, serif', fontSize: 40,
        color: 'var(--color-orange)', lineHeight: 0.6,
        marginBottom: 14, marginTop: 4,
      }}>"</div>
      <p style={{
        fontFamily: 'Georgia, serif', fontStyle: 'italic',
        fontSize: 15, lineHeight: 1.55,
        color: 'var(--color-ink)',
        margin: '0 0 24px', flex: 1,
      }}>{t.quote}</p>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        paddingTop: 16,
        borderTop: '1px solid var(--color-warm-gray)',
      }}>
        <Avatar photo={t.photo} initials={t.initials} size={44} />
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
            color: 'var(--color-ink)', lineHeight: 1.3,
          }}>{t.name}</div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 12,
            color: 'var(--color-mid-gray)', lineHeight: 1.4,
          }}>{t.role}</div>
        </div>
      </div>
    </div>
  );
};

const Testimonials = () => {
  return (
    <>
      {/* Featured quote — pale-orange */}
      <section data-screen-label="05 Featured quote"
               style={{
                 background: 'var(--color-pale-orange)',
                 borderTop: '1px solid var(--color-warm-gray)',
                 borderBottom: '1px solid var(--color-warm-gray)',
                 paddingTop: 120, paddingBottom: 120,
               }}>
        <Container>
          <div className="featured-quote-grid" style={{
            display: 'grid',
            gridTemplateColumns: '0.5fr 2fr',
            gap: 64,
            alignItems: 'flex-start',
          }}>
            <Reveal>
              <div>
                <Label>WHAT CLIENTS SAY</Label>
                <div style={{
                  marginTop: 24,
                  fontFamily: 'Georgia, serif', fontWeight: 400,
                  fontSize: 'clamp(120px, 14vw, 200px)',
                  color: 'var(--color-orange)',
                  lineHeight: 0.6,
                }}>“</div>
              </div>
            </Reveal>

            <Reveal delay={150}>
              <div>
                <p style={{
                  fontFamily: 'Georgia, serif', fontWeight: 400,
                  fontSize: 'clamp(24px, 2.8vw, 40px)',
                  lineHeight: 1.3, color: 'var(--color-ink)',
                  margin: 0, textWrap: 'pretty',
                  maxWidth: '24ch',
                }}>{FEATURED.quote}</p>

                <div style={{
                  marginTop: 40,
                  paddingTop: 24,
                  borderTop: '1px solid var(--color-warm-gray)',
                  display: 'flex', alignItems: 'center', gap: 16,
                  flexWrap: 'wrap',
                }}>
                  <Avatar photo={FEATURED.photo} size={64} />
                  <div>
                    <div style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 600,
                      color: 'var(--color-ink)',
                    }}>{FEATURED.name}</div>
                    <div style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 14,
                      color: 'var(--color-mid-gray)',
                    }}>{FEATURED.role}</div>
                  </div>
                  <span style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 12,
                    color: 'var(--color-mid-gray)', fontStyle: 'italic',
                    marginLeft: 'auto',
                  }}>{FEATURED.industry}</span>
                </div>
              </div>
            </Reveal>
          </div>
        </Container>
      </section>

      {/* 3 + 2 grid on cream */}
      <section data-screen-label="05 Testimonial grid"
               style={{
                 background: 'var(--color-cream)',
                 paddingTop: 96, paddingBottom: 120,
               }}>
        <Container>
          <Reveal><Label>ALSO ON THE RECORD</Label></Reveal>
          <div className="testi-grid" style={{
            marginTop: 40,
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 24,
          }}>
            {CARDS.map((t, i) => <TestimonialCard key={i} t={t} i={i} />)}
          </div>
        </Container>
      </section>
    </>
  );
};

Object.assign(window, { Testimonials });