// StatBar.jsx — Faixa de credenciais entre Hero e Especialidades
const StatBar = () => {
  const items = [
    { value: '27551/DF', label: 'CRM' },
    { value: '+19 anos', label: 'Experiência' },
    { value: 'Online & Presencial', label: 'Atendimento' },
  ];

  return (
    <section
      aria-label="Credenciais"
      style={{
        background: '#33395B',
        position: 'relative',
        padding: '28px 40px',
      }}
    >
      {/* Linha dourada decorativa no topo */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: 1,
          background:
            'linear-gradient(90deg, transparent, #B8960C 30%, #C9A84C 60%, transparent)',
        }}
      />
      {/* Linha dourada decorativa na base */}
      <div
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: 1,
          background:
            'linear-gradient(90deg, transparent, rgba(184,150,12,0.4) 50%, transparent)',
        }}
      />

      <div
        style={{
          maxWidth: 1280,
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          alignItems: 'center',
          gap: 0,
        }}
        className="statbar-grid"
      >
        {items.map((item, i) => (
          <div
            key={item.label}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center',
              padding: '8px 16px',
              borderLeft: i > 0 ? '1px solid rgba(184,150,12,0.35)' : 'none',
            }}
            className={`statbar-item statbar-item-${i}`}
          >
            <div
              style={{
                fontFamily: "'Montserrat',sans-serif",
                fontSize: 18,
                fontWeight: 700,
                color: '#fff',
                letterSpacing: '0.02em',
                lineHeight: 1.2,
              }}
            >
              {item.value}
            </div>
            <div
              style={{
                fontFamily: "'Montserrat',sans-serif",
                fontSize: 10,
                fontWeight: 500,
                color: '#B8960C',
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                marginTop: 6,
              }}
            >
              {item.label}
            </div>
          </div>
        ))}
      </div>

      {/* Responsivo: empilha em mobile */}
      <style>{`
        @media (max-width: 768px) {
          .statbar-grid {
            grid-template-columns: 1fr !important;
          }
          .statbar-item {
            border-left: none !important;
            padding: 16px 16px !important;
          }
          .statbar-item-1, .statbar-item-2 {
            border-top: 1px solid rgba(184,150,12,0.35) !important;
          }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { StatBar });