// Brands.jsx — Snoozetail + Nousu portfolio tiles (NL)
function BrandTile({ kind, name, tag, blurb, metrics, glyph, href = "#" }) {
  return (
    <a className={"brand-tile " + kind} href={href}>
      <div className="row1">
        <span className="badge">{tag}</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" style={{ width: 22, height: 22, opacity: 0.6 }}><path d="M7 17 17 7M7 7h10v10"/></svg>
      </div>
      <div>
        <div className="name">{name}</div>
        <p style={{ marginTop: 12 }}>{blurb}</p>
      </div>
      <div className="meta">
        {metrics.map((m, i) => (
          <div key={i}>
            <span className="num">{m.v}</span>
            <span className="lbl">{m.l}</span>
          </div>
        ))}
      </div>
      {glyph}
    </a>
  );
}

function Brands() {
  return (
    <section className="section container" id="werk">
      <div className="section-head">
        <div>
          <span className="eyebrow">lptrdigital.</span>
          <h2>Wat we zelf doen.</h2>
        </div>
        <p className="right">Snoozetail is het bewijs. Nousu is het product. Beide worden door ons gebouwd en gerund.</p>
      </div>
      <div className="brands">
        <BrandTile
          kind="snooze"
          name="Snoozetail"
          tag="Eigen merk"
          blurb="Een online dierenwinkel, meestal morgen bezorgd. De plek waar we testen wat we aan andere webshops leveren."
          metrics={[
            { v: "4.2k", l: "bestellingen / mnd" },
            { v: "€ 1,42M", l: "ARR" },
            { v: "97%", l: "op voorraad" },
          ]}
          href="https://snoozetail.nl"
          glyph={
            <svg className="glyph" viewBox="0 0 64 64"><g stroke="#7E9171" strokeWidth="5" strokeLinecap="round" fill="none"><path d="M14 20 L34 20 L14 38 L34 38"/><path d="M36 36 L48 36 L36 48 L48 48" opacity="0.7"/></g></svg>
          }
        />
        <BrandTile
          kind="nousu"
          name="Nousu"
          tag="AI-product"
          blurb="Klantenservice-AI voor Nederlandse e-commerce. Leest je shop, leert je retourbeleid, antwoordt in begrijpelijk Nederlands."
          metrics={[
            { v: "78%", l: "automatisch opgelost" },
            { v: "12s", l: "gem. antwoordtijd" },
            { v: "11", l: "live webshops" },
          ]}
          href="https://nousu.nl"
          glyph={
            <svg className="glyph" viewBox="0 0 64 64"><g fill="none" stroke="#FF6F5C" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 46 L26 32 L34 38 L50 18"/><path d="M40 18 L50 18 L50 28"/></g></svg>
          }
        />
      </div>
    </section>
  );
}

Object.assign(window, { Brands, BrandTile });