import React from 'react';
import { ShieldCheck, CheckCircle2, Award, FileBadge } from 'lucide-react';
import { motion } from 'framer-motion';

const TrustBar = () => {
  const standards = [
    { icon: <Award size={36} className="text-accent-blue" />, title: 'ISO 9001:2015', sub: 'Менеджмент качества' },
    { icon: <ShieldCheck size={36} className="text-accent-orange" />, title: 'Класс А1/А2/А3', sub: 'Ударопрочность' },
    { icon: <CheckCircle2 size={36} className="text-accent-blue" />, title: 'ГОСТ 30826-2014', sub: 'Защитное остекление' },
    { icon: <FileBadge size={36} className="text-accent-orange" />, title: 'EN 356', sub: 'Европейский стандарт' }
  ];

  return (
    <section style={{ padding: '70px 0', borderTop: '1px solid var(--border-light)', borderBottom: '1px solid var(--border-light)', background: 'var(--bg-lighter)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: '50px' }}>
          <motion.h3 
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            style={{ fontSize: '1.3rem', color: 'var(--text-muted)', letterSpacing: '2px', textTransform: 'uppercase', fontWeight: '700' }}
          >
            СЕРТИФИЦИРОВАНО ПО МЕЖДУНАРОДНЫМ СТАНДАРТАМ БЕЗОПАСНОСТИ
          </motion.h3>
        </div>
        
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '50px' }}>
          {standards.map((std, index) => (
            <motion.div 
              key={index}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: index * 0.1, type: "spring" }}
              whileHover={{ y: -5 }}
              viewport={{ once: true }}
              style={{ display: 'flex', alignItems: 'center', gap: '20px', minWidth: '220px', background: 'var(--bg-light)', padding: '20px', borderRadius: '12px', boxShadow: '0 4px 15px rgba(15,23,42,0.03)', border: '1px solid var(--border-light)' }}
            >
              <div style={{ padding: '12px', background: 'rgba(255,255,255,1)', borderRadius: '50%', boxShadow: '0 2px 10px rgba(15,23,42,0.05)' }}>
                {std.icon}
              </div>
              <div>
                <h4 style={{ fontWeight: 800, margin: 0, fontSize: '1.2rem', color: 'var(--text-main)' }}>{std.title}</h4>
                <span style={{ fontSize: '0.9rem', color: 'var(--text-muted)', textTransform: 'uppercase', fontWeight: '500' }}>{std.sub}</span>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TrustBar;
