/* Social Proof Wall - 1,232 Google Reviews Display */

function SocialProofWall() {
  const reviews = [
    { quote: "If I could give more stars I would. Big Al's team fought for me when I thought all hope was lost. They recovered way more than I expected.", name: 'Howard Marshall', stars: 5 },
    { quote: "After my accident on I-695, I was overwhelmed. Big Al's office handled everything. The settlement covered all my medical bills and then some.", name: 'Lakisha Johnson', stars: 5 },
    { quote: "Richard Klein is the real deal. No fancy talk, just results. Got me $180K for my truck accident case.", name: 'Marcus Williams', stars: 5 },
    { quote: "They took my call at 11pm on a Sunday. That tells you everything about how they treat their clients.", name: 'Jennifer Adams', stars: 5 },
    { quote: "I was hit by an uninsured driver and thought I was out of luck. Big Al found coverage I didn't even know existed.", name: 'Robert Chen', stars: 5 },
    { quote: "Three other lawyers turned me down. Big Al took my case and won. Period.", name: 'David Thompson', stars: 5 },
    { quote: "The whole team is incredible. They kept me updated every step, never made me chase them for info.", name: 'Angela Martinez', stars: 5 },
    { quote: "I was rear-ended on I-95 and Big Al got me 4x what the insurance company first offered. Don't settle without calling them.", name: 'Thomas Wright', stars: 5 },
    { quote: "Professional, aggressive when they need to be, and genuinely caring. Rare combination in a law firm.", name: 'Patricia Okafor', stars: 5 },
    { quote: "My motorcycle accident case seemed impossible. Big Al proved me wrong. Forever grateful.", name: 'James Sullivan', stars: 5 },
    { quote: "They handle the insurance companies so you don't have to. Worth every penny and you don't pay unless you win.", name: 'Christina Park', stars: 5 },
    { quote: "Bilingual staff, flexible hours, and they actually return your calls. Big Al's office is top notch.", name: 'Maria Gonzalez', stars: 5 },
  ];

  return (
    <section style={{
      background: 'var(--ink)',
      padding: '88px 28px',
      textAlign: 'center',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Main number */}
        <div style={{
          fontSize: 'clamp(5rem, 12vw, 10rem)',
          fontFamily: 'var(--font-display)',
          fontWeight: 900,
          color: 'var(--red)',
          lineHeight: 1,
          marginBottom: 6
        }}>
          1,232<span style={{ fontSize: '0.6em' }}>+</span>
        </div>

        {/* Subheading */}
        <div style={{
          fontSize: 'clamp(1.4rem, 3vw, 2.2rem)',
          fontFamily: 'var(--font-headline)',
          fontWeight: 700,
          letterSpacing: '.05em',
          textTransform: 'uppercase',
          marginBottom: 24,
          color: '#fff'
        }}>
          Five-Star Google Reviews
        </div>

        {/* Stars */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          gap: 12,
          marginBottom: 24
        }}>
          {Array.from({ length: 5 }).map((_, i) => (
            <i key={i} data-lucide="star" style={{
              width: 44,
              height: 44,
              fill: '#FDB022',
              color: '#FDB022',
              display: 'inline-block'
            }}></i>
          ))}
        </div>

        {/* Google G Logo */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          marginBottom: 42
        }}>
          <svg width="48" height="48" viewBox="0 0 24 24" style={{ display: 'block' }}>
            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
          </svg>
        </div>

        {/* Review cards grid - readable, not scrolling */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 20,
          marginBottom: 48,
          textAlign: 'left'
        }}>
          {reviews.map((review, i) => (
            <div key={i} style={{
              background: 'rgba(255, 255, 255, 0.07)',
              borderRadius: 10,
              border: '1px solid rgba(255, 255, 255, 0.12)',
              padding: '24px 26px',
              display: 'flex',
              flexDirection: 'column',
              gap: 12
            }}>
              <div style={{ display: 'flex', gap: 4 }}>
                {Array.from({ length: review.stars }).map((_, s) => (
                  <i key={s} data-lucide="star" style={{
                    width: 18,
                    height: 18,
                    fill: '#FDB022',
                    color: '#FDB022'
                  }}></i>
                ))}
              </div>
              <p style={{
                fontFamily: 'var(--font-body)',
                fontSize: 17,
                lineHeight: 1.6,
                margin: 0,
                color: '#fff',
                fontStyle: 'italic'
              }}>
                "{review.quote}"
              </p>
              <p style={{
                fontFamily: 'var(--font-headline)',
                fontSize: 14,
                fontWeight: 700,
                letterSpacing: '.04em',
                textTransform: 'uppercase',
                margin: 0,
                color: 'rgba(255, 255, 255, 0.7)'
              }}>
                {review.name}
              </p>
            </div>
          ))}
        </div>

        {/* Stats row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 24,
          padding: '32px 0',
          borderTop: '1px solid rgba(255, 255, 255, 0.15)',
          borderBottom: '1px solid rgba(255, 255, 255, 0.15)'
        }}>
          <div>
            <div style={{
              fontSize: 20,
              fontFamily: 'var(--font-display)',
              fontWeight: 900,
              color: 'var(--red)',
              marginBottom: 4
            }}>
              4.6<span style={{ fontSize: '0.6em' }}>★</span>
            </div>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 13,
              color: 'rgba(255, 255, 255, 0.8)',
              margin: 0,
              letterSpacing: '.02em'
            }}>
              Average Rating
            </p>
          </div>
          <div>
            <div style={{
              fontSize: 20,
              fontFamily: 'var(--font-display)',
              fontWeight: 900,
              color: 'var(--red)',
              marginBottom: 4
            }}>
              $250M+
            </div>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 13,
              color: 'rgba(255, 255, 255, 0.8)',
              margin: 0,
              letterSpacing: '.02em'
            }}>
              Recovered
            </p>
          </div>
          <div>
            <div style={{
              fontSize: 20,
              fontFamily: 'var(--font-display)',
              fontWeight: 900,
              color: 'var(--red)',
              marginBottom: 4
            }}>
              10,000+
            </div>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 13,
              color: 'rgba(255, 255, 255, 0.8)',
              margin: 0,
              letterSpacing: '.02em'
            }}>
              Cases
            </p>
          </div>
          <div>
            <div style={{
              fontSize: 20,
              fontFamily: 'var(--font-display)',
              fontWeight: 900,
              color: 'var(--red)',
              marginBottom: 4
            }}>
              30+
            </div>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 13,
              color: 'rgba(255, 255, 255, 0.8)',
              margin: 0,
              letterSpacing: '.02em'
            }}>
              Years
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}