// ─────────────────────────────────────────────
//  Partners.jsx — Seção Parceiros
// ─────────────────────────────────────────────

const partnersS = {
  section: {
    padding: '80px 0',
    background: 'var(--bg-surface-1)',
    borderTop:    '1px solid var(--border-subtle)',
    borderBottom: '1px solid var(--border-subtle)',
  },
  inner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
  },
  header: { textAlign: 'center', marginBottom: 48 },
  title: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(28px, 3.5vw, 40px)',
    fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1,
    color: 'var(--fg-1)', margin: '14px auto 12px', maxWidth: 520,
  },
  sub: {
    fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.65,
    maxWidth: 440, margin: '0 auto',
  },
  cardWrap: {
    display: 'flex',
    justifyContent: 'center',
  },
  card: {
    background: 'var(--bg-surface-2)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-xl)',
    width: '100%',
    maxWidth: 320,
    height: 320,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '28px',
    cursor: 'default',
    overflow: 'hidden',
  },
  logo: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
    display: 'block',
  },
};

function Partners() {
  return (
    <section style={partnersS.section} aria-label="Parceiros">

      {/* CSS: grayscale por padrão, cor original no hover */}
      <style>{`
        .partner-card {
          transition:
            border-color 300ms var(--ease-smooth),
            box-shadow   300ms var(--ease-smooth);
        }
        .partner-card .partner-logo {
          filter: grayscale(1) opacity(0.55);
          transition: filter 300ms var(--ease-smooth);
        }
        .partner-card:hover .partner-logo {
          filter: grayscale(0) opacity(1) !important;
        }
        .partner-card:hover {
          border-color: var(--border-accent) !important;
          box-shadow: 0 0 40px rgba(201,169,110,0.12) !important;
        }
      `}</style>

      <div style={partnersS.inner} className="bb-inner">

        {/* Cabeçalho */}
        <div style={partnersS.header}>
          <div className="bb-eyebrow" style={{ justifyContent: 'center' }}>
            Parceiros
          </div>
          <h2 style={partnersS.title}>
            Quem potencializa<br />
            <span className="bb-gold">nossa entrega</span>
          </h2>
          <p style={partnersS.sub}>
            Empresas e especialistas que compõem<br />
            o ecossistema Black Bear AI.
          </p>
        </div>

        {/* Card — Fórmula Digital */}
        <div data-grid="partner-wrap" style={partnersS.cardWrap}>
          <div
            className="partner-card"
            role="img"
            aria-label="Fórmula Digital"
            style={partnersS.card}
          >
            <img
              className="partner-logo"
              src="assets/formula-digital-clean.svg"
              alt="Fórmula Digital"
              style={partnersS.logo}
            />
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Partners });