/* Logo Marquee — "Built and backed by professionals from" scrolling strip */

/* Inline SVG icon marks for companies with distinctive logos */
function IconReddit() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="lm-icon">
      {/* Snoo head */}
      <circle cx="12" cy="14" r="9.5" />
      {/* Ears */}
      <circle cx="3" cy="11.5" r="2.5" />
      <circle cx="21" cy="11.5" r="2.5" />
      {/* Antenna tip */}
      <circle cx="16.5" cy="3.5" r="2" />
      {/* Antenna line */}
      <path d="M12 5.5 L15.2 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" fill="none" />
      {/* Eyes (white) */}
      <circle cx="9" cy="13" r="1.6" fill="white" />
      <circle cx="15" cy="13" r="1.6" fill="white" />
      {/* Smile (white) */}
      <path d="M9 16.5 Q12 18.8 15 16.5" stroke="white" strokeWidth="1.4" fill="none" strokeLinecap="round" />
    </svg>
  );
}


function IconShopify() {
  return (
    <svg viewBox="0 0 18 22" fill="currentColor" aria-hidden="true" className="lm-icon">
      {/* Bag body */}
      <path d="M15.6 5.3L14.3 5.2C14.2 4.5 13.9 3.8 13.5 3.2 12.9 2.3 12 1.8 11 1.8 10.9 1.8 10.8 1.8 10.7 1.8 10.4 1.4 10 1.1 9.5 1.1 7.5 1.1 6.6 3.5 6.3 4.8L5.3 5.1C4.7 5.3 4.6 5.4 4.5 6L3.2 17.6C3.1 18.3 3.6 18.9 4.3 18.9H13.7C14.4 18.9 14.9 18.3 14.8 17.6L13.5 6C13.4 5.4 13.3 5.3 13.1 5.2L15.6 5.3ZM9.5 2.1C9.8 2.1 10 2.2 10.2 2.4 9.5 2.5 8.9 3.1 8.5 3.9H7C7.4 2.8 8.3 2.1 9.5 2.1ZM10.7 3.1C10.9 3.5 11 3.9 11.1 4.4L8.5 4.2C8.8 3.5 9.3 2.8 10 2.5 10.3 2.7 10.5 2.9 10.7 3.1ZM11.7 2.7C12.4 3.3 12.9 4.2 13.1 5.2L11.4 5C11.3 4.3 11.1 3.7 10.8 3.2 11.1 3 11.4 2.8 11.7 2.7Z" />
    </svg>
  );
}

function IconSalesforce() {
  return (
    <svg viewBox="0 0 28 20" fill="currentColor" aria-hidden="true" className="lm-icon">
      {/* Cloud shape using overlapping circles approximation */}
      <path d="M11.5 18H5C2.2 18 0 15.8 0 13c0-2.1 1.3-3.9 3.2-4.7-.1-.4-.2-.8-.2-1.3C3 5 4.8 3.2 7 3.2c.8 0 1.5.2 2.1.6C10 2.7 11.5 2 13.2 2c3.2 0 5.8 2.5 5.9 5.7h.4C22 7.7 24 9.7 24 12.2S22 16.7 19.5 16.7h-8z" />
    </svg>
  );
}


const MARQUEE_LOGOS = [
  {
    id: 'carta',
    label: 'Carta',
    img: window.__assets('logos/carta.png'),
    imgH: 44,
  },
  {
    id: 'uber',
    label: 'Uber',
    icon: null,
    text: 'Uber',
    fw: 800, fs: 36, ls: '-0.04em', italic: false,
  },
  {
    id: 'reddit',
    label: 'Reddit',
    img: window.__assets('logos/reddit.png'),
    imgH: 44,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'zendesk',
    label: 'Zendesk',
    img: window.__assets('logos/zendesk.png'),
    imgH: 44,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'salesforce',
    label: 'Salesforce',
    img: window.__assets('logos/salesforce.png'),
    imgH: 44,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'lendingclub',
    label: 'LendingClub',
    img: window.__assets('logos/lendingclub.png'),
    imgH: 60,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'shopify',
    label: 'Shopify',
    img: window.__assets('logos/shopify.png'),
    imgH: 44,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'barclays',
    label: 'Barclays',
    img: window.__assets('logos/barclays.png'),
    imgH: 32,
    imgFilter: 'grayscale(1)',
  },
  {
    id: 'ebay',
    label: 'eBay',
    img: window.__assets('logos/ebay.svg'),
    imgH: 40,
    imgFilter: 'grayscale(1)',
  },
];

function LogoMarquee() {
  const items = [...MARQUEE_LOGOS, ...MARQUEE_LOGOS, ...MARQUEE_LOGOS];
  return (
    <section className="lm-section" aria-label="Built and backed by professionals from leading companies">
      <p className="lm-eyebrow">
        <span className="lm-eb-a">Built and backed</span> <span className="lm-eb-b">by professionals <span className="lm-eb-from">from</span><span className="lm-eb-at">at</span></span>
      </p>
      <div className="lm-outer">
        <div className="lm-track">
          {items.map((logo, i) => (
            <span key={i} className="lm-item" title={logo.label}>
              {logo.img ? (
                <img
                  src={logo.img}
                  alt={logo.label}
                  className={'lm-img' + (logo.imgFilter ? ' lm-img-gray' : '')}
                  style={{ height: logo.imgH, width: 'auto', display: 'block', mixBlendMode: 'multiply' }}
                />
              ) : (
                <>
                  {logo.icon && <span className="lm-icon-wrap">{logo.icon}</span>}
                  <span className="lm-text" style={{
                    fontSize: logo.fs,
                    fontWeight: logo.fw,
                    letterSpacing: logo.ls,
                    fontStyle: logo.italic ? 'italic' : 'normal',
                  }}>{logo.text}</span>
                </>
              )}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LogoMarquee = LogoMarquee;