import React from "react";
import buildAccelerationIconColor from "../src/icons/build-acceleration-icon.svg";
import buildAccelerationIconWhite from "../src/icons/build-acceleration-icon-white.svg";
import buildAccelerationLogoColor from "../src/icons/build-acceleration-logo.svg";
import buildAccelerationLogoWhite from "../src/icons/build-acceleration-logo-white.svg";
import cloudbeesInfinityColor from "../src/icons/cloudbees-infinity-color.svg";
import cloudbeesInfinityWhite from "../src/icons/cloudbees-infinity-white.svg";
import cloudbeesLogoColor from "../src/icons/cloudbees-logo-color.svg";
import cloudbeesLogoWhite from "../src/icons/cloudbees-logo-white.svg";
import cloudbeesLogoSloganColor from "../src/icons/cloudbees-logo-slogan-color.svg";
import cloudbeesLogoSloganWhite from "../src/icons/cloudbees-logo-slogan-white.svg";
import cloudbeesInfinitySloganColor from "../src/icons/cloudbees-infinity-slogan-color.svg";
import cloudbeesInfinitySloganWhite from "../src/icons/cloudbees-infinity-slogan-white.svg";
import cloudbeesInfinityVerticalColor from "../src/icons/cloudbees-infinity-vertical-color.svg";
import cloudbeesInfinityVerticalWhite from "../src/icons/cloudbees-infinity-vertical-white.svg";
import codeshipIconColor from "../src/icons/codeship-icon.svg";
import codeshipIconWhite from "../src/icons/codeship-icon-white.svg";
import codeshipLogoColor from "../src/icons/codeship-logo.svg";
import codeshipLogoWhite from "../src/icons/codeship-logo-white.svg";
import ciLogoColor from "../src/icons/ci-logo.svg";
import ciLogoWhite from "../src/icons/ci-logo-white.svg";
import ciIconColor from "../src/icons/ci-icon.svg";
import ciIconWhite from "../src/icons/ci-icon-white.svg";
import valueStreamManagementLogoColor from "../src/icons/value-stream-management-logo.svg";
import valueStreamManagementLogoWhite from "../src/icons/value-stream-management-logo-white.svg";
import valueStreamManagementIconColor from "../src/icons/value-stream-management-icon.svg";
import valueStreamManagementIconWhite from "../src/icons/value-stream-management-icon-white.svg";
import cdLogoColor from "../src/icons/cd-logo.svg";
import cdLogoWhite from "../src/icons/cd-logo-white.svg";
import cdIconColor from "../src/icons/cd-icon.svg";
import cdIconWhite from "../src/icons/cd-icon-white.svg";
import jenkinsSupportLogo from "../src/icons/cloudbees-jenkins-support-logo.svg";
import cloudNativeCICDLogoColor from "../src/icons/cloud-native-cicd-logo.svg";
import cloudNativeCICDLogoWhite from "../src/icons/cloud-native-cicd-logo-white.svg";
import featureFlagsLogoColor from "../src/icons/feature-flags-logo.svg";
import featureFlagsLogoWhite from "../src/icons/feature-flags-logo-white.svg";
import featureFlagsIconColor from "../src/icons/feature-flags-icon.svg";
import featureFlagsIconWhite from "../src/icons/feature-flags-icon-white.svg";
import sdmLogoColor from "../src/icons/sdm-logo.svg";
import sdmLogoWhite from "../src/icons/sdm-logo-white.svg";

const icons = [
  {
    category: "CloudBees Logos",
    icons: [
      {
        iconName: "cloudbees-logo-color.svg",
        svg: cloudbeesLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "cloudbees-logo-white.svg",
        svg: cloudbeesLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "cloudbees-logo-slogan-color.svg",
        svg: cloudbeesLogoSloganColor,
        type: "color",
        height: 42
      },
      {
        iconName: "cloudbees-logo-slogan-white.svg",
        svg: cloudbeesLogoSloganWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "cloudbees-infinity-color.svg",
        svg: cloudbeesInfinityColor,
        type: "color",
        height: 140
      },
      {
        iconName: "cloudbees-infinity-white.svg",
        svg: cloudbeesInfinityWhite,
        type: "white",
        height: 140
      },
      {
        iconName: "cloudbees-infinity-slogan-color.svg",
        svg: cloudbeesInfinitySloganColor,
        type: "color",
        height: 140
      },
      {
        iconName: "cloudbees-infinity-slogan-white.svg",
        svg: cloudbeesInfinitySloganWhite,
        type: "white",
        height: 140
      },
      {
        iconName: "cloudbees-infinity-vertical-color.svg",
        svg: cloudbeesInfinityVerticalColor,
        type: "color",
        height: 140
      },
      {
        iconName: "cloudbees-infinity-vertical-white.svg",
        svg: cloudbeesInfinityVerticalWhite,
        type: "white",
        height: 140
      }
    ]
  },
  {
    category: "CloudBees Build Acceleration",
    icons: [
      {
        iconName: "build-acceleration-logo.svg",
        svg: buildAccelerationLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "build-acceleration-logo-white.svg",
        svg: buildAccelerationLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "build-acceleration-icon.svg",
        svg: buildAccelerationIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "build-acceleration-icon-white.svg",
        svg: buildAccelerationIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CodeShip",
    icons: [
      {
        iconName: "codeship-logo.svg",
        svg: codeshipLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "codeship-logo-white.svg",
        svg: codeshipLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "codeship-icon.svg",
        svg: codeshipIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "codeship-icon-white.svg",
        svg: codeshipIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CI",
    icons: [
      {
        iconName: "ci-logo.svg",
        svg: ciLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "ci-logo-white.svg",
        svg: ciLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "ci-icon.svg",
        svg: ciIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "ci-icon-white.svg",
        svg: ciIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Value Stream Management",
    icons: [
      {
        iconName: "value-stream-management-logo.svg",
        svg: valueStreamManagementLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "value-stream-management-logo-white.svg",
        svg: valueStreamManagementLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "value-stream-management-icon.svg",
        svg: valueStreamManagementIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "value-stream-management-icon-white.svg",
        svg: valueStreamManagementIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees CD",
    icons: [
      {
        iconName: "cd-logo.svg",
        svg: cdLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "cd-logo-white.svg",
        svg: cdLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "cd-icon.svg",
        svg: cdIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "cd-icon-white.svg",
        svg: cdIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Jenkins Support",
    icons: [
      {
        iconName: "cloudbees-jenkins-support-logo.svg",
        svg: jenkinsSupportLogo,
        type: "color",
        height: 120
      }
    ]
  },
  {
    category: "CloudBees Cloud Native CI/CD",
    icons: [
      {
        iconName: "cloud-native-cicd-logo.svg",
        svg: cloudNativeCICDLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "cloud-native-cicd-logo-white.svg",
        svg: cloudNativeCICDLogoWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees Feature Flags",
    icons: [
      {
        iconName: "feature-flags-logo.svg",
        svg: featureFlagsLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "feature-flags-logo-white.svg",
        svg: featureFlagsLogoWhite,
        type: "white",
        height: 42
      },
      {
        iconName: "feature-flags-icon.svg",
        svg: featureFlagsIconColor,
        type: "color",
        height: 42
      },
      {
        iconName: "feature-flags-icon-white.svg",
        svg: featureFlagsIconWhite,
        type: "white",
        height: 42
      }
    ]
  },
  {
    category: "CloudBees SDM",
    icons: [
      {
        iconName: "sdm-logo.svg",
        svg: sdmLogoColor,
        type: "color",
        height: 42
      },
      {
        iconName: "sdm-logo-white.svg",
        svg: sdmLogoWhite,
        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>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>
              <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-fluid px-4 mt-5">
      <div>
        {icons.map((iconCategory, i) => (
          <div className="row pb-5" key={i}>
            {iconCategory.icons.map((icon, index) => (
              <div className={`col-3 mt-${index < 4 ? "4" : "5"}`} key={index}>
                <div
                  className={
                    icon.type === "color"
                      ? "p-3"
                      : "p-3 d-inline-block bg-secondary rounded text-white"
                  }
                >
                  <svg height={icon.height} viewBox={`${icon.svg.viewBox}`}>
                    <use xlinkHref={`#${icon.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/{icon.iconName}
                </code>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  </>
);
