// ResultsSection.jsx — Client love, card grid in the editorial style

const ResultsSection = ({ onNavigate }) => {
  const featured = [
  {
    slug: 'charlotte',
    name: 'Charlotte Beaulat-Clément',
    role: 'Marketing for health + wellness companies',
    result: 'Made 10× her investment',
    quote: "I was super skeptical about coaching before meeting Diara and Jan. I thought I could do everything myself.  I've signed more than 10 contracts and it keeps growing. Working with you was the best decision I made this year."
  },
  {
    slug: 'patrick',
    name: 'Patrick Fanning',
    role: 'Medical device engineering',
    result: '$18K contract, $70K client, 6-figure contract in negotiation',
    quote: "You made it easy to work with me on my terms while still holding the boundary of \"we've got work to do.\" I feel more confident in who I am, what my business stands for, and where we're going."
  },
  {
    slug: 'lindsey',
    name: 'Lindsey Vontz',
    role: 'Growth Partner for Third Spaces',
    result: 'Signed 5-figure client, 2 more on the way',
    quote: "My business has become much more visible. People are coming out of the woodwork and I'm getting more organic leads. This has been life-changing."
  },
  {
    slug: 'jeff',
    name: 'Jeff Jewell',
    role: 'Executive coaching for financial leaders',
    result: 'Signed 3 new clients, now has a waitlist',
    quote: "It feels like I can accomplish my dreams at this point."
  }];


  return (
    <section style={{ background: '#fafaf7', padding: '64px 32px 48px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'end', marginBottom: 48
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="eyebrow tag">CASE STUDIES</div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.4vw, 80px)',
              margin: 0, maxWidth: 540
            }}>What our clients <em>say</em> about us.</h2>
          </div>
        </div>

        {/* Card grid */}
        <div className="love-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(26,26,26,0.10)',
          borderBottom: '1px solid rgba(26,26,26,0.10)'
        }}>
          {featured.map((c, i) =>
          <article key={c.slug} style={{
            display: 'flex', flexDirection: 'column',
            padding: '32px 28px 20px',
            borderLeft: i === 0 ? 'none' : '1px solid rgba(26,26,26,0.10)',
            gap: 20,
            background: '#fafaf7',
            minHeight: 380
          }} className="love-card">
              {/* Result tag */}
              <div className="eyebrow tag" style={{
              alignSelf: 'flex-start'
            }}>{c.result}</div>

              {/* Quote */}
              {c.quote &&
            <blockquote style={{
              fontFamily: "'Fraunces', serif",
              fontStyle: 'italic', fontWeight: 300,
              fontSize: 'clamp(20px, 1.7vw, 24px)',
              color: '#1a1a1a',
              lineHeight: 1.35, letterSpacing: '-0.015em',
              margin: 0
            }}>"{c.quote}"</blockquote>
            }

              {/* Attribution */}
              <div style={{
              paddingTop: 16, borderTop: '1px solid rgba(26,26,26,0.10)'
            }}>
                <div style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 20, color: '#1a1a1a',
                letterSpacing: '-0.02em', lineHeight: 1.1,
                fontWeight: 500
              }}>{c.name}</div>
                <div className="eyebrow" style={{ marginTop: 6 }}>{c.role}</div>
              </div>
            </article>
          )}
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 64 }}>
          <button onClick={() => onNavigate('stories')} className="btn-secondary">
            More case studies →
          </button>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .love-grid { grid-template-columns: 1fr !important; }
          .love-card { border-left: none !important; border-top: 1px solid rgba(26,26,26,0.10) !important; }
          .love-card:first-child { border-top: none !important; }
        }
      `}</style>
    </section>);

};

Object.assign(window, { ResultsSection });