'use client';

import React from 'react';

interface Stat {
  icon: string;
  value: string;
  label: string;
}

export default function TrustIndicators() {
  const stats: Stat[] = [
    { icon: '🏆', value: '50.000+', label: 'Klien Puas' },
    { icon: '👩‍⚕️', value: '100+', label: 'Dokter Ahli' },
    { icon: '🏥', value: '25+', label: 'Cabang' },
    { icon: '⭐', value: '4.8/5.0', label: 'Rating Google' },
  ];

  return (
    <section className="py-12 md:py-16 bg-white">
      <div className="container-custom">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
          {stats.map((stat, index) => (
            <div
              key={index}
              className="text-center group cursor-pointer"
            >
              <div className="text-3xl md:text-4xl mb-3 group-hover:scale-110 transition-transform duration-300">
                {stat.icon}
              </div>
              <div className="font-cormorant text-3xl md:text-4xl font-bold text-espresso mb-1">
                {stat.value}
              </div>
              <p className="text-sm text-grey tracking-wider uppercase">
                {stat.label}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}