// Brand marks. The NBR logo uses the provided PNG asset.
const BRAND_LINKS = {
  sensen: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=sensen",
  ccl: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=ccl",
  denso: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=denso",
  koyo: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=koyo&dat_field2%5B1%5D=koyo+japan",
  masuma: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=masuma",
  mcb: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=mcb",
  nbr: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=nbr",
  ngk: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=ngk",
  nsk: "https://nbrautoparts.com/online-price/?carfilter=1&dat_field2%5B0%5D=nsk",
};

function getBrandLink(name) {
  return BRAND_LINKS[name.toLowerCase()];
}

function NBRMark({ size = 56, inverse = false }) {
  const src = inverse ? "assets/nbr-logo-footer-white.png" : "assets/nbr-logo.png";
  return (
    <span className={"nbr-logo-shell " + (inverse ? "inverse" : "")} style={{ "--logo-height": size + "px" }}>
      <img className="nbr-logo-img" src={src} alt="NBR Auto Parts" />
    </span>
  );
}

function BrandWord({ label, color = "#0c0c0d", weight = 800, italic = false, family = "Manrope" }) {
  return (
    <div className="brand-wordmark" style={{
      fontFamily: family + ", sans-serif",
      fontWeight: weight,
      color,
      fontStyle: italic ? "italic" : "normal",
      fontSize: 26,
      letterSpacing: "-0.02em",
      lineHeight: 1,
    }}>
      {label}
    </div>
  );
}

function BrandCard({ name, tagline, badge, badgeKind, desc, logo, href, t }) {
  const content = (
    <>
      <div className="brand-card-top">
        <span className="brand-card-name">{name}</span>
        {badge && <span className={"brand-badge " + badgeKind}>{badge}</span>}
      </div>
      <div className="brand-card-logo">{logo}</div>
      <div className="brand-card-desc">{desc}</div>
    </>
  );

  if (href) {
    return (
      <a className={"brand-card " + (badgeKind || "")} href={href}>
        {content}
      </a>
    );
  }

  return (
    <div className={"brand-card " + (badgeKind || "")}>
      {content}
    </div>
  );
}

function OwnBrandSpotlight({ t }) {
  const proof = [t.brands.ownProofA, t.brands.ownProofB, t.brands.ownProofC];

  return (
    <a className="own-brand" href={BRAND_LINKS.nbr} aria-label="Открыть каталог бренда NBR">
      <div className="own-brand-copy">
        <span className="own-brand-badge">{t.brands.ownBadge}</span>
        <h3>{t.brands.ownTitle}</h3>
        <p>{t.brands.ownBody}</p>
        <div className="own-brand-proof">
          {proof.map((item) => (
            <div className="own-brand-proof-item" key={item}>
              <span></span>
              {item}
            </div>
          ))}
        </div>
      </div>
      <div className="own-brand-panel" aria-hidden="true">
        <div className="own-brand-mark">
          <NBRMark size={84} inverse />
        </div>
        <div className="own-brand-lines">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div className="own-brand-products">
          {t.brands.ownProducts.map((product) => (
            <span key={product}>{product}</span>
          ))}
        </div>
      </div>
    </a>
  );
}

function BrandsGrid({ t }) {
  const brands = [
    {
      name: "NBR",
      badge: t.brands.ownBadge,
      badgeKind: "own",
      desc: t.brands.nbrDesc,
      href: BRAND_LINKS.nbr,
      logo: <NBRMark size={32} />,
    },
    {
      name: "SENSEN",
      badge: t.brands.exclusive,
      badgeKind: "exclusive",
      desc: t.brands.sensenDesc,
      href: BRAND_LINKS.sensen,
      logo: <BrandWord label="SENSEN" color="#1d6b3a" />,
    },
    {
      name: "CCL",
      badge: t.brands.official,
      badgeKind: "official",
      desc: t.brands.cclDesc,
      href: BRAND_LINKS.ccl,
      logo: <BrandWord label="CCL" color="var(--accent)" weight={900} />,
    },
    {
      name: "MASUMA",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.masumaDesc,
      href: BRAND_LINKS.masuma,
      logo: <BrandWord label="MASUMA" color="#a8782d" weight={900} />,
    },
    {
      name: "DENSO",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.densoDesc,
      href: BRAND_LINKS.denso,
      logo: <BrandWord label="DENSO" color="var(--accent)" italic weight={900} />,
    },
    {
      name: "NGK",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.ngkDesc,
      href: BRAND_LINKS.ngk,
      logo: <BrandWord label="NGK" color="var(--accent)" weight={900} />,
    },
    {
      name: "KOYO",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.koyoDesc,
      href: BRAND_LINKS.koyo,
      logo: <BrandWord label="Koyo" color="#1a4d8c" weight={900} />,
    },
    {
      name: "NSK",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.nskDesc,
      href: BRAND_LINKS.nsk,
      logo: <BrandWord label="NSK" color="#0c0c0d" weight={900} />,
    },
    {
      name: "MCB",
      badge: t.brands.partner,
      badgeKind: "partner",
      desc: t.brands.mcbDesc,
      href: BRAND_LINKS.mcb,
      logo: <BrandWord label="MCB" color="var(--accent)" italic weight={900} />,
    },
  ];

  return (
    <div className="brands-grid">
      {brands.map((b) => (
        <BrandCard key={b.name} {...b} t={t} />
      ))}
    </div>
  );
}

window.BrandsGrid = BrandsGrid;
window.NBRMark = NBRMark;
window.OwnBrandSpotlight = OwnBrandSpotlight;
window.BRAND_LINKS = BRAND_LINKS;
window.getBrandLink = getBrandLink;