import { Star } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

const defaultStats = [
  {
    value: '+500',
    label: 'chantiers réalisés',
    sub: 'depuis 2012',
  },
  {
    value: '+2 M',
    label: 'm² traités',
    sub: 'en France',
  },
  {
    value: '14 ans',
    label: "de R&D",
    sub: 'résines haute performance',
  },
];

interface SocialProofSectionProps {
  ratingValue?: string;
  ratingLabel?: string;
  stats?: { value: string; label: string; sub: string }[];
}

const SocialProofSection = ({
  ratingValue = '5 / 5',
  ratingLabel = 'Note Google · Clients vérifiés',
  stats = defaultStats,
}: SocialProofSectionProps = {}) => (
  <section className="bg-foreground py-16 lg:py-20">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-0">

          {/* Rating block : left anchor */}
          <div className="flex flex-col items-center lg:items-start lg:w-[30%] lg:pr-12 lg:border-r lg:border-white/10">
            <div className="flex items-center gap-1 mb-3">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-5 h-5 text-[#70bfc6] fill-[#70bfc6]" />
              ))}
            </div>
            <p
              className="font-satoshi font-black text-white leading-none mb-1"
              style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}
            >
              {ratingValue}
            </p>
            <p className="text-white/70 text-sm font-body font-medium">
              {ratingLabel}
            </p>
          </div>

          {/* Stats : right side */}
          <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-around gap-8 sm:gap-0 lg:w-[70%] w-full">
            {stats.map((s, i) => (
              <div
                key={s.label}
                className={`flex flex-col items-center text-center sm:flex-1 ${
                  i < stats.length - 1 ? 'sm:border-r sm:border-white/10' : ''
                }`}
              >
                <p
                  className="font-satoshi font-black text-white leading-none mb-1"
                  style={{ fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', letterSpacing: '-0.04em' }}
                >
                  {s.value}
                </p>
                <p className="text-white/60 text-sm font-semibold font-body">{s.label}</p>
                <p className="text-white/50 text-sm font-body mt-0.5">{s.sub}</p>
              </div>
            ))}
          </div>

        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default SocialProofSection;