// Partners — infinite auto-scrolling logo strip, Supabase-connected

const FALLBACK_LOGOS = [
  "assets/partners/partner-1.png",
  "assets/partners/partner-2.png",
  "assets/partners/partner-3.png",
  "assets/partners/partner-4.png",
  "assets/partners/partner-5.png",
  "assets/partners/partner-6.png",
  "assets/partners/partner-7.png",
  "assets/partners/partner-8.png",
];

const Partners = ({ data }) => {
  const [items, setItems] = React.useState(undefined); // undefined = still loading

  React.useEffect(() => {
    if (data !== undefined) {
      // app.jsx provided a definitive DB value — always authoritative, even if []
      setItems(Array.isArray(data) ? [...data].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) : []);
      return;
    }
    // self-fetch while app.jsx cms is still initialising
    db.from('content_sections')
      .select('content_json')
      .eq('section_name', 'partners')
      .single()
      .then(({ data: res, error }) => {
        if (!error && res) {
          setItems(Array.isArray(res.content_json) ? [...res.content_json].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) : []);
        } else {
          setItems(null); // row not in DB
        }
      });
  }, [data]);

  // undefined = loading → fallback; null = no DB row → fallback; [] = empty section → nothing; [...] = CMS logos
  const sectionInDB = items !== null && items !== undefined;
  const logos = sectionInDB
    ? items.map(p => ({ src: p.logo, url: p.url && p.url !== '#' ? p.url : null }))
    : FALLBACK_LOGOS.map(src => ({ src, url: null }));

  if (sectionInDB && logos.length === 0) return null; // section exists but admin cleared all partners

  const track = [...logos, ...logos]; // duplicate for seamless CSS scroll loop

  return (
    <div className="ag-partners" aria-label="Our partners">
      <div className="ag-partners__track" aria-hidden="true">
        {track.map((item, i) =>
          item.url ? (
            <a key={i} href={item.url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex' }}>
              <img src={item.src} alt="" className="ag-partners__logo" draggable="false"/>
            </a>
          ) : (
            <img key={i} src={item.src} alt="" className="ag-partners__logo" draggable="false"/>
          )
        )}
      </div>
    </div>
  );
};

window.Partners = Partners;