const brands = [
  { src: "site/trimmed-brand-afsar.png", name: "Afsar" },
  { src: "site/trimmed-brand-fuchsia.png", name: "Fuchsia" },
  { src: "site/trimmed-brand-movement.png", name: "Movement" },
  { src: "site/trimmed-brand-qistbazaar.png", name: "QistBazaar.pk" },
  { src: "site/trimmed-brand-safwan.png", name: "Safwan Ghani" },
  { src: "site/trimmed-brand-zareen.png", name: "Zareen by Sara" },
  { src: "site/trimmed-brand-feenie.png", name: "Feenie's Table" },
];

function Bus() {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="vb-bus" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      display: "flex", alignItems: "center", gap: "14px", flexShrink: 0, cursor: "default",
      transform: hover ? "translateY(-3px) scale(1.045)" : "translateY(0) scale(1)",
      filter: hover ? "drop-shadow(0 0 14px rgba(217,119,6,0.35))" : "none",
      transition: "transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.35s ease",
    }}>
      <svg width="46" height="30" viewBox="0 0 34 22" fill="none" style={{ flexShrink: 0 }}>
        <rect x="1" y="3" width="28" height="14" rx="3" stroke="var(--accent-primary)" strokeWidth="1.5" />
        <rect x="4" y="6" width="6" height="5" rx="1" stroke="var(--accent-primary)" strokeWidth="1.2" />
        <rect x="12" y="6" width="6" height="5" rx="1" stroke="var(--accent-primary)" strokeWidth="1.2" />
        <rect x="20" y="6" width="6" height="5" rx="1" stroke="var(--accent-primary)" strokeWidth="1.2" />
        <circle cx="8" cy="19" r="2" stroke="var(--accent-primary)" strokeWidth="1.3" />
        <circle cx="24" cy="19" r="2" stroke="var(--accent-primary)" strokeWidth="1.3" />
        <line x1="29" y1="9" x2="33" y2="9" stroke="var(--accent-primary)" strokeWidth="1.3" />
      </svg>
      <span style={{
        fontFamily: "var(--font-body)", fontSize: "13px", letterSpacing: "1.5px", textTransform: "uppercase",
        color: "var(--accent-primary)", fontWeight: 600, whiteSpace: "nowrap",
      }}>This spot is waiting for you</span>
    </div>
  );
}

function LogoGroup({ groupKey }) {
  return (
    <div className="vb-brand-group" style={{ display: "flex", alignItems: "center", gap: "56px", flexShrink: 0 }}>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[0].src} alt={brands[0].name} title={brands[0].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[1].src} alt={brands[1].name} title={brands[1].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[2].src} alt={brands[2].name} title={brands[2].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <Bus />
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[3].src} alt={brands[3].name} title={brands[3].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[4].src} alt={brands[4].name} title={brands[4].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[5].src} alt={brands[5].name} title={brands[5].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
      <div className="vb-brand-logo" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
        <img src={brands[6].src} alt={brands[6].name} title={brands[6].name} style={{ height: "100%", width: "auto", opacity: 0.9 }} />
      </div>
    </div>
  );
}

function BrandStrip() {
  return (
    <section aria-label="Brands we've worked with" style={{
      background: "var(--slate-900)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)",
      padding: "36px 0", overflow: "hidden", position: "relative",
    }}>
      <div className="vb-brandstrip-track" style={{ display: "flex", alignItems: "center", gap: "56px", width: "max-content" }}>
        <LogoGroup groupKey="a" />
        <LogoGroup groupKey="b" />
      </div>
    </section>
  );
}

window.BrandStrip = BrandStrip;