// LogoWall.jsx — Section C · "Trusted by" client logo wall
// Real, approved client logos (provided by Tony, June 2026) in assets/photos/website-logos/.
// Uniform contain-boxes (logos vary wildly in aspect ratio), rendered full color; subtle card hover.
// Note: gourmet-dining.png is the navy lockup — correct for this light background
// (gourmet-dining-white.png is the inverse, for dark sections only). Not a claim of public-festival
// operation or residential service — these are corporate/campus/wedding/large-event clients.
const LOGO_DIR = 'assets/photos/website-logos/';
const LW_LOGOS = [
  { file:'merck.svg',                 name:'Merck' },
  { file:'pfizer.svg',                name:'Pfizer' },
  { file:'novartis.svg',              name:'Novartis' },
  { file:'bristol-myers-squibb.svg',  name:'Bristol Myers Squibb' },
  { file:'metlife.svg',               name:'MetLife' },
  { file:'salesforce.svg',            name:'Salesforce' },
  { file:'pwc.svg',                   name:'PwC' },
  { file:'cbre.svg',                  name:'CBRE' },
  { file:'jll.svg',                   name:'JLL' },
  { file:'mtv.svg',                   name:'MTV' },
  { file:'wyndham.svg',               name:'Wyndham' },
  { file:'konica-minolta.svg',        name:'Konica Minolta' },
  { file:'stanley-black-decker.svg',  name:'Stanley Black & Decker' },
  { file:'adp.svg',                   name:'ADP' },
  { file:'dsv.svg',                   name:'DSV' },
  { file:'compass-group.svg',         name:'Compass Group' },
  { file:'aramark.svg',               name:'Aramark' },
  { file:'sodexo.svg',                name:'Sodexo' },
  { file:'gourmet-dining.png',        name:'Gourmet Dining' },
  { file:'horizon-bcbsnj.png',        name:'Horizon Blue Cross Blue Shield of New Jersey' },
  { file:'provident-bank.svg',        name:'Provident Bank' },
  { file:'brown-and-brown.png',       name:'Brown & Brown' },
  { file:'keller-williams.svg',       name:'Keller Williams' },
  { file:'planet-honda.png',          name:'Planet Honda' },
  { file:'burlington.svg',            name:'Burlington' },
  { file:'shoprite.svg',              name:'ShopRite' },
  { file:'damascus-bakery.png',       name:'Damascus Bakery' },
  { file:'signia.png',                name:'Signia' },
  { file:'easton-coach.png',          name:'Easton Coach' },
  { file:'veris-residential.svg',     name:'Veris Residential' },
  { file:'rutgers.png',               name:'Rutgers University' },
  { file:'fdu.svg',                   name:'Fairleigh Dickinson University' },
  { file:'felician-university.png',   name:'Felician University' },
  { file:'caldwell-university.png',   name:'Caldwell University' },
  { file:'pella.jpg',                 name:'Pella' },
];

const LogoWall = () => (
  <section id="clients" style={{ padding:'clamp(56px, 7vw, 88px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ textAlign:'center', margin:'0 0 8px' }}>Trusted by New Jersey&rsquo;s leading companies and universities</h2>
      <p style={{ textAlign:'center', color: T.inkSoft, fontSize:16, margin:'0 auto 40px', maxWidth:620 }}>
        Corporate, campus, wedding, and large-event clients across the Garden State.
      </p>
      <div className="lw-grid">
        {LW_LOGOS.map(l => (
          <div key={l.file} className="lw-cell">
            <img className="lw-logo" src={LOGO_DIR + l.file} alt={l.name} title={l.name}
                 loading="lazy" width="140" height="60" />
          </div>
        ))}
      </div>
    </div>
    <style>{`
      .lw-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
      }
      .lw-cell {
        display: flex; align-items: center; justify-content: center;
        padding: 18px 22px; min-height: 92px;
        background: ${T.white};
        border: 1px solid ${T.border};
        border-radius: 10px;
      }
      .lw-logo {
        width: 100%; height: 60px;
        object-fit: contain;
      }
      .lw-cell { transition: border-color .2s ease, box-shadow .2s ease; }
      .lw-cell:hover {
        border-color: ${T.sky};
        box-shadow: 0 4px 14px rgba(9,33,79,0.08);
      }
      @media (max-width: 560px) {
        .lw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .lw-cell { padding: 14px 16px; min-height: 80px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .lw-logo { transition: none; }
      }
    `}</style>
  </section>
);

Object.assign(window, { LogoWall });