// LogoStrip.jsx — Shopify merchants strip (typographic placeholders)
function LDLogoStrip() {
  const logos = [
    { name: "Florists", style: { fontFamily: "Roboto", fontWeight: 900, fontStyle: "italic", letterSpacing: "-1px" } },
    { name: "BUTCHERS", style: { fontFamily: "Roboto", fontWeight: 700, letterSpacing: "2px" } },
    { name: "Bakeries", style: { fontFamily: "Roboto", fontWeight: 300, fontSize: 22, letterSpacing: "-0.6px" } },
    { name: "GROCERS", style: { fontFamily: "Roboto", fontWeight: 900, letterSpacing: "8px", fontSize: 18 } },
    { name: "meal kits", style: { fontFamily: "Roboto", fontWeight: 700, letterSpacing: "-0.5px" } },
    { name: "Wine & alcohol", style: { fontFamily: "Roboto", fontWeight: 500, fontStyle: "italic" } },
    { name: "PHARMACY", style: { fontFamily: "Roboto", fontWeight: 700, letterSpacing: "1.5px" } },
  ];
  return (
    <section style={{ background: "var(--ld-cream)", padding: "32px 0 56px", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide">
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <span className="ld-mono" style={{ color: "var(--ld-ink-soft)", letterSpacing: "1.6px", textTransform: "uppercase" }}>
            Built for every kind of local Shopify store
          </span>
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 24, flexWrap: "wrap",
          color: "var(--ld-ink-soft)",
          opacity: 0.78,
        }}>
          {logos.map((l) => (
            <span key={l.name} style={{ fontSize: 20, ...l.style }}>{l.name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LDLogoStrip = LDLogoStrip;