/* global React, Section, SectionHeader */

const BRANDS = [
  { name: "HiNoter",                          tier: "default" },
  { name: "HixAI",                            tier: "default" },
  { name: "Dibimbing",                        tier: "default" },
  { name: "DSArea",                           tier: "default" },
  { name: "Microsoft",                        tier: "featured" },
  { name: "Belajar Lagi",                     tier: "default" },
  { name: "Power BI Community ID",            tier: "default" },
  { name: "Sipaling Logistic",                tier: "default" },
  { name: "Telkom Indonesia Internasional",   tier: "default" },
  { name: "XL Smart Indonesia",               tier: "default" },
  { name: "SiCepat Ekspres Indonesia",        tier: "default" },
  { name: "Insignia",                         tier: "default" },
  { name: "Unilever Global",                  tier: "featured" },
  { name: "3IT Chile",                        tier: "default" },
  { name: "Harita Group",                     tier: "default" },
];

function Partners() {
  return (
    <Section id="partners" className="section--partners">
      <SectionHeader
        eyebrow="Brands & platforms I've worked with"
        title="15++ partners — from Indonesian unicorns to global brands."
        subtitle="Education platforms, SaaS, AI tools, telco, logistics, and global consumer brands. Each collaboration shipped on-brand and on-time."
      />

      <div className="brands-strip">
        <div className="brands-row">
          {BRANDS.map((b) => (
            <span key={b.name} className={`brand-logo brand-logo--${b.tier}`}>
              {b.name}
            </span>
          ))}
          <span className="brand-logo brand-logo--more">+ many more</span>
        </div>
      </div>
    </Section>
  );
}

window.Partners = Partners;