import React from "react";

import cloudbeesInfinityColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-color.svg";
import cloudbeesInfinityWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-white.svg";
import cloudbeesLogoColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-logo-color.svg";
import cloudbeesLogoWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-logo-white.svg";
import cloudbeesLogoSloganColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-logo-slogan-color.svg";
import cloudbeesLogoSloganWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-logo-slogan-white.svg";
import cloudbeesInfinitySloganColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-slogan-color.svg";
import cloudbeesInfinitySloganWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-slogan-white.svg";
import cloudbeesInfinityVerticalColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-vertical-color.svg";
import cloudbeesInfinityVerticalWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-infinity-vertical-white.svg";
import cloudbeesPrideLogoColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-pride-logo-color.svg";
import cloudbeesPrideLogoWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-pride-logo-white.svg";
import cloudbeesPrideIcon from "@cloudbees/honeyui-icons/cloudbees/cloudbees-pride-icon.svg";
import cloudbeesUniversityColor from "@cloudbees/honeyui-icons/cloudbees/cloudbees-university-color.svg";
import cloudbeesUniversityWhite from "@cloudbees/honeyui-icons/cloudbees/cloudbees-university-white.svg";

const logos = [
  {
    category: "CloudBees Logos",
    logos: [
      {
        logoName: "cloudbees-logo-color.svg",
        svg: cloudbeesLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cloudbees-logo-white.svg",
        svg: cloudbeesLogoWhite,
        type: "white",
        height: 42
      },
      {
        logoName: "cloudbees-logo-slogan-color.svg",
        svg: cloudbeesLogoSloganColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cloudbees-logo-slogan-white.svg",
        svg: cloudbeesLogoSloganWhite,
        type: "white",
        height: 42
      },
      {
        logoName: "cloudbees-infinity-color.svg",
        svg: cloudbeesInfinityColor,
        type: "color",
        height: 140
      },
      {
        logoName: "cloudbees-infinity-white.svg",
        svg: cloudbeesInfinityWhite,
        type: "white",
        height: 140
      },
      {
        logoName: "cloudbees-infinity-slogan-color.svg",
        svg: cloudbeesInfinitySloganColor,
        type: "color",
        height: 140
      },
      {
        logoName: "cloudbees-infinity-slogan-white.svg",
        svg: cloudbeesInfinitySloganWhite,
        type: "white",
        height: 140
      },
      {
        logoName: "cloudbees-infinity-vertical-color.svg",
        svg: cloudbeesInfinityVerticalColor,
        type: "color",
        height: 140
      },
      {
        logoName: "cloudbees-infinity-vertical-white.svg",
        svg: cloudbeesInfinityVerticalWhite,
        type: "white",
        height: 140
      },
      {
        logoName: "cloudbees-university-color.svg",
        svg: cloudbeesUniversityColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cloudbees-university-white.svg",
        svg: cloudbeesUniversityWhite,
        type: "white",
        height: 42
      },
      {
        logoName: "cloudbees-pride-logo-color.svg",
        svg: cloudbeesPrideLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cloudbees-pride-logo-white.svg",
        svg: cloudbeesPrideLogoWhite,
        type: "white",
        height: 42
      },
      {
        logoName: "cloudbees-pride-icon.svg",
        svg: cloudbeesPrideIcon,
        type: "color",
        height: 140
      }
    ]
  }
];

export default () => (
  <>
    <div className="container">
      <div className="row">
        <div className="col">
          <p className="lead">
            Logos are used to represent the CloudBees brand and its products. They should not be
            used in different colors, angles, and should not be altered in any way. Logos reflect
            the trademarked and copywritten names of a company or a product; altering a logo can
            cause legal problems.
          </p>
          <hr className="pb-3"></hr>
          <div className="row">
            <div className="col p-2">
              <h2>CloudBees Logo</h2>
              <p>
                The CloudBees logos are used to represent the company at large. The name and
                infinity icon should never be separated and the inifinity should not be used
                alongside a product logo; product logos do not use an icon.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="container px-4 mt-5">
      {logos.map((logoCategory, i) => (
        <div className="row pb-5" key={i}>
          {logoCategory.logos.map((logo, index) => (
            <div className={`col-6 mt-${index < 4 ? "4" : "5"}`} key={index}>
              <div
                className={
                  logo.type === "color" ? "p-3" : "p-3 d-inline-block bg-dark rounded text-white"
                }
              >
                <svg height={logo.height} viewBox={`${logo.svg.viewBox}`}>
                  <use xlinkHref={`#${logo.svg.id}`} />
                </svg>
              </div>
              <code
                className="d-block text-muted border p-1 mt-3 mb-0"
                style={{ fontSize: "11px" }}
              >
                https://cdn.cloudbees.com/honeyui/logos/{logo.logoName}
              </code>
            </div>
          ))}
        </div>
      ))}
    </div>
  </>
);
