// LogoWall.jsx — Section C
// PLACEHOLDER per handoff: only FDU and Novartis are Tony-approved. The rest of
// the home-page logo wall is NOT confirmed — keep neutral placeholders until Tony
// signs off on each name. (Do not re-add Aramark/Sodexo/Felician without approval.)

const LOGOS = [
  { name: 'CLIENT LOGO', placeholder: true },
  { name: 'NOVARTIS',    anchor: false },
  { name: 'FDU',         anchor: true  },
  { name: 'CLIENT LOGO', placeholder: true },
  { name: 'CLIENT LOGO', placeholder: true },
];

const LogoWall = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ textAlign:'center', margin:'0 0 36px' }}>Trusted by NJ's biggest names</h2>
      <div className="logo-grid" style={{
        display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16,
      }}>
        {LOGOS.map((l, i) => (
          <div key={i} className="logo-cell" style={{
            aspectRatio:'3/1',
            background: T.white,
            border: l.placeholder ? `1px dashed ${T.border}` : `1px solid ${T.border}`,
            borderRadius:8,
            display:'flex', alignItems:'center', justifyContent:'center',
            color: l.placeholder ? T.inkSoft : T.inkMute, fontWeight:700, fontSize:14, letterSpacing:'.02em',
            transition:'color .15s ease-out, background .15s ease-out, border-color .15s ease-out',
            cursor:'pointer',
            position:'relative',
          }}>
            {l.name}
            {l.anchor && (
              <span style={{
                position:'absolute', top:-8, left:12, background: T.teal, color: T.white,
                fontSize:10, padding:'2px 6px', borderRadius:3, letterSpacing:'.06em', fontWeight:600,
              }}>ANCHOR</span>
            )}
          </div>
        ))}
      </div>
      {/* PLACEHOLDER stats — 340 events / 62 venues are unconfirmed. Confirm with Tony before launch. */}
      <p style={{ marginTop:28, textAlign:'center', color: T.inkSoft, fontSize:14 }}>
        Booked over <span className="numeral" style={{ color: T.navy, fontWeight:600 }}>340</span> events across <span className="numeral" style={{ color: T.navy, fontWeight:600 }}>62</span> NJ venues. Numbers updated quarterly.
      </p>
    </div>
    <style>{`
      .logo-cell:hover { color: ${T.teal}; background: ${T.skyTint}; border-color: ${T.sky}; }
    `}</style>
  </section>
);

Object.assign(window, { LogoWall });