// SocialProof.jsx — stat bar + testimonial strip

const STATS = [
{
  value: '3×',
  label: 'Average conversion lift',
  detail: 'vs. previous site',
  accent: '#ADFF2F'
},
{
  value: '14',
  suffix: ' days',
  label: 'From kickoff to live',
  detail: 'Full delivery sprint',
  accent: '#3B82F6'
},
{
  value: '100%',
  label: 'AI-optimised output',
  detail: 'Cited by LLMs on day one',
  accent: '#ADFF2F'
},
{
  value: '40+',
  label: 'Conversion hubs delivered',
  detail: 'Across B2B and DTC',
  accent: '#3B82F6'
}];


const TESTIMONIALS = [
{
  quote: "Our inbound doubled in the first month. The site just works — visitors become leads without us chasing them.",
  name: "Sarah K.",
  role: "Founder, SaaS Co.",
  accent: '#3B82F6'
},
{
  quote: "ChatGPT started recommending us within 6 weeks. That alone was worth the investment.",
  name: "Marcus T.",
  role: "CEO, B2B Agency",
  accent: '#ADFF2F'
},
{
  quote: "14 days. Done. The fastest strategic website I've ever seen shipped. And it converts.",
  name: "Priya M.",
  role: "CMO, Growth Stage Startup",
  accent: '#3B82F6'
}];


const SocialProofSection = () => {
  const [activeTestimonial, setActiveTestimonial] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => {
      setActiveTestimonial((i) => (i + 1) % TESTIMONIALS.length);
    }, 4000);
    return () => clearInterval(t);
  }, []);

  return (
    <section
      id="social-proof"
      style={{
        background: '#080f1c',
        padding: 'clamp(80px, 12vh, 140px) 5vw',
        position: 'relative',
        overflow: 'hidden'
      }}>
      
      {/* Background glow */}
      <div style={{
        position: 'absolute',
        bottom: '0', left: '50%',
        transform: 'translateX(-50%)',
        width: '800px', height: '400px',
        background: 'radial-gradient(ellipse, rgba(173,255,47,0.04) 0%, transparent 70%)',
        pointerEvents: 'none'
      }} />

      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative' }}>
        {/* Section header */}
        <div style={{ marginBottom: 'clamp(48px, 8vh, 80px)', textAlign: 'center' }}>
          <span style={{
            fontSize: '0.65rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#3B82F6',
            fontFamily: "'DM Sans', sans-serif",
            fontWeight: 500
          }}>
            Results
          </span>
          <h2 style={{
            fontFamily: "'Syne', sans-serif",
            fontSize: 'clamp(2rem, 4.5vw, 3.8rem)',
            fontWeight: 300,
            letterSpacing: '-0.02em',
            color: '#e8e8e8',
            margin: '12px auto 0',
            lineHeight: 1.1,
            maxWidth: '600px'
          }}>
            Numbers that<br />
            <span style={{ color: '#ADFF2F' }}>speak plainly.</span>
          </h2>
        </div>

        {/* Stats bar */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '1px',
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.06)',
          borderRadius: '20px',
          overflow: 'hidden',
          marginBottom: '80px'
        }}>
          {STATS.map((stat, i) =>
          <div
            key={i}
            style={{
              padding: 'clamp(28px, 5vh, 40px) 32px',
              background: '#080f1c',
              textAlign: 'center',
              position: 'relative'
            }}>
            
              <div style={{
              fontFamily: "'Syne', sans-serif",

              fontWeight: 700,
              color: stat.accent,
              lineHeight: 1,
              marginBottom: '10px',
              letterSpacing: '-0.02em',
              textShadow: `0 0 30px ${stat.accent}44`, fontSize: "55.8px"
            }}>
                {stat.value}{stat.suffix || ''}
              </div>
              <div style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.88rem',
              color: '#e8e8e8',
              fontWeight: 500,
              marginBottom: '4px'
            }}>
                {stat.label}
              </div>
              <div style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.75rem',
              color: '#64748B'
            }}>
                {stat.detail}
              </div>
            </div>
          )}
        </div>

        {/* Testimonials */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: '24px'
        }}>
          {TESTIMONIALS.map((t, i) =>
          <div
            key={i}
            onClick={() => setActiveTestimonial(i)}
            style={{
              padding: '32px',
              borderRadius: '16px',
              background: activeTestimonial === i ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.015)',
              border: `1px solid ${activeTestimonial === i ? t.accent + '33' : 'rgba(255,255,255,0.05)'}`,
              cursor: 'pointer',
              transition: 'all 0.4s ease',
              transform: activeTestimonial === i ? 'translateY(-2px)' : 'none'
            }}>
            
              {/* Quote mark */}
              <div style={{
              fontFamily: "'Syne', sans-serif",
              fontSize: '3rem',
              lineHeight: 1,
              color: t.accent,
              opacity: 0.3,
              marginBottom: '8px',
              fontWeight: 700
            }}>
                "
              </div>

              <p style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem',
              color: activeTestimonial === i ? '#d0d8e8' : '#94a3b8',
              lineHeight: 1.7,
              margin: '0 0 24px',
              transition: 'color 0.4s ease',
              fontStyle: 'italic'
            }}>
                {t.quote}
              </p>

              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div style={{
                width: '36px', height: '36px',
                borderRadius: '50%',
                background: `${t.accent}18`,
                border: `1px solid ${t.accent}33`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0
              }}>
                  <span style={{ fontFamily: "'Syne', sans-serif", fontSize: '0.8rem', color: t.accent, fontWeight: 600 }}>
                    {t.name.charAt(0)}
                  </span>
                </div>
                <div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '0.85rem', color: '#e8e8e8', fontWeight: 500 }}>{t.name}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '0.75rem', color: '#64748B' }}>{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { SocialProofSection });