import React from "react";

import buildAccelerationLogoColor from "@cloudbees/honeyui-icons/cloudbees/build-acceleration-logo.svg";
import buildAccelerationLogoWhite from "@cloudbees/honeyui-icons/cloudbees/build-acceleration-logo-white.svg";
import codeshipLogoColor from "@cloudbees/honeyui-icons/cloudbees/codeship-logo.svg";
import codeshipLogoWhite from "@cloudbees/honeyui-icons/cloudbees/codeship-logo-white.svg";
import ciLogoColor from "@cloudbees/honeyui-icons/cloudbees/ci-logo.svg";
import ciLogoWhite from "@cloudbees/honeyui-icons/cloudbees/ci-logo-white.svg";
import valueStreamManagementLogoColor from "@cloudbees/honeyui-icons/cloudbees/value-stream-management-logo.svg";
import valueStreamManagementLogoWhite from "@cloudbees/honeyui-icons/cloudbees/value-stream-management-logo-white.svg";
import cdLogoColor from "@cloudbees/honeyui-icons/cloudbees/cd-logo.svg";
import cdLogoWhite from "@cloudbees/honeyui-icons/cloudbees/cd-logo-white.svg";
import jenkinsSupportLogo from "@cloudbees/honeyui-icons/cloudbees/cloudbees-jenkins-support-logo.svg";
import cloudNativeCICDLogoColor from "@cloudbees/honeyui-icons/cloudbees/cloud-native-cicd-logo.svg";
import cloudNativeCICDLogoWhite from "@cloudbees/honeyui-icons/cloudbees/cloud-native-cicd-logo-white.svg";
import featureManagementLogoColor from "@cloudbees/honeyui-icons/cloudbees/feature-management-logo.svg";
import featureManagementLogoWhite from "@cloudbees/honeyui-icons/cloudbees/feature-management-logo-white.svg";
import sdmLogoColor from "!!@svgr/webpack!@cloudbees/honeyui-icons/cloudbees/sdm-logo.svg";
import sdmLogoWhite from "@cloudbees/honeyui-icons/cloudbees/sdm-logo-white.svg";
import sdaLogoColor from "@cloudbees/honeyui-icons/cloudbees/sda-logo.svg";
import sdaLogoWhite from "@cloudbees/honeyui-icons/cloudbees/sda-logo-white.svg";

const logos = [
  {
    category: "CloudBees Build Acceleration",
    logos: [
      {
        logoName: "build-acceleration-logo.svg",
        svg: buildAccelerationLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "build-acceleration-logo-white.svg",
        svg: buildAccelerationLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CodeShip",
    logos: [
      {
        logoName: "codeship-logo.svg",
        svg: codeshipLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "codeship-logo-white.svg",
        svg: codeshipLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CI",
    logos: [
      {
        logoName: "ci-logo.svg",
        svg: ciLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "ci-logo-white.svg",
        svg: ciLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Value Stream Management",
    logos: [
      {
        logoName: "value-stream-management-logo.svg",
        svg: valueStreamManagementLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "value-stream-management-logo-white.svg",
        svg: valueStreamManagementLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CD",
    logos: [
      {
        logoName: "cd-logo.svg",
        svg: cdLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cd-logo-white.svg",
        svg: cdLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Jenkins Support",
    logos: [
      {
        logoName: "cloudbees-jenkins-support-logo.svg",
        svg: jenkinsSupportLogo,
        type: "color",
        height: 120
      }
    ]
  },
  {
    category: "CloudBees Cloud Native CI/CD",
    logos: [
      {
        logoName: "cloud-native-cicd-logo.svg",
        svg: cloudNativeCICDLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "cloud-native-cicd-logo-white.svg",
        svg: cloudNativeCICDLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Feature Management",
    logos: [
      {
        logoName: "feature-management-logo.svg",
        svg: featureManagementLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "feature-management-logo-white.svg",
        svg: featureManagementLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees SDM",
    logos: [
      {
        logoName: "sdm-logo.svg",
        svg: sdmLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "sdm-logo-white.svg",
        svg: sdmLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees SDA",
    logos: [
      {
        logoName: "sda-logo.svg",
        svg: sdaLogoColor,
        type: "color",
        height: 42
      },
      {
        logoName: "sda-logo-white.svg",
        svg: sdaLogoWhite,
        type: "white",
        height: 42
      }
    ]
  }
];

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>Product Logos</h2>
              <p>
                The product logos are type-only and do not use an icon in any circumstance. These
                logos apply a different type-treatment to the word “CloudBees” to ensure that we are
                not misusing our company logo, which includes the infinity 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"
                }
              >
                {logo.svg.viewBox ? (
                  <svg height={logo.height} viewBox={`${logo.svg.viewBox}`}>
                    <use xlinkHref={`#${logo.svg.id}`} />
                  </svg>
                ) : (
                  <logo.svg height={logo.height} />
                )}
              </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>
  </>
);
