import React from 'react';
import {
  SprkStack,
  SprkStackItem,
  SprkCard,
  SprkButton,
} from '@sparkdesignsystem/spark-react';
import Layout from '../components/layouts/Layout';
import componentsMedia from '../images/components.svg';
import developersMedia from '../images/developers.svg';
import designersMedia from '../images/designers.svg';
import foundationsMedia from '../images/foundations.svg';
import newsMedia from '../images/news-and-updates.svg';
import utilitiesMedia from '../images/utilities.svg';

const teaserDesigners = {
  bodyText: `
    Get started with Design by reading the principles
    that we use in Spark Design System.
  `,
  cta: {
    text: 'Go To Designer Basics',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: '/principles/design-principles',
  },
  media: {
    href: '/principles/design-principles',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: designersMedia,
    mediaVariant: 'img',
  },
  title: 'Designer Basics',
  titleFirst: false,
};

const teaserDevelopers = {
  bodyText: `
    Learn how to install Spark’s
    npm packages into the build
    of your application. You’ll
    also find support for setting
    up Sass, React, Angular, and more.
  `,
  cta: {
    text: 'Go To Developer Basics',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: '/installing-spark',
  },
  media: {
    href: '/installing-spark',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: developersMedia,
    mediaVariant: 'img',
  },
  title: 'Developer Basics',
  titleFirst: false,
};

const teaserComponents = {
  bodyText: `
    Explore the library of Spark
    components and supporting
    documentation, including
    design guidelines, code
    samples, and configuration
    options.
  `,
  cta: {
    text: 'Go To Components',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: '/using-spark/components/button',
  },
  media: {
    href: '/using-spark/components/button',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: componentsMedia,
    mediaVariant: 'img',
  },
  title: 'Components',
  titleFirst: false,
};

const teaserFoundations = {
  bodyText: `
   Looking for our brand color palette,
   typography guidelines, element spacing,
    and other foundational style elements?
    Start here.
  `,
  cta: {
    text: 'Go To Foundations',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: '/using-spark/foundations/color',
  },
  media: {
    href: '/using-spark/foundations/color',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: foundationsMedia,
    mediaVariant: 'img',
  },
  title: 'Foundations',
  titleFirst: false,
};

const teaserUtils = {
  bodyText: `
    CSS class utilities for overriding
    values, enhancing accessibility,
    theming, and more.
  `,
  cta: {
    text: 'Go To Utilities',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: '/using-spark/foundations/css-utilities',
  },
  media: {
    href: '/using-spark/foundations/css-utilities',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: utilitiesMedia,
    mediaVariant: 'img',
  },
  title: 'Utilities',
  titleFirst: false,
};

const teaserNews = {
  bodyText: `
    Get the latest release notes
    and updates, as well as previous news and notes
  `,
  cta: {
    text: 'Go To News',
    ctaVariant: 'button',
    buttonVariant: 'secondary',
    href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
  },
  media: {
    href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
    mediaLinkElement: 'a',
    imgAlt: 'placeholder image',
    imgSrc: newsMedia,
    mediaVariant: 'img',
  },
  title: 'News And Updates',
  titleFirst: false,
};

const spacingBtwSections = 'huge';
const spacingBtwHeadingAndContent = 'large';

const IndexPage = () => (
  <Layout hasSideBar={false}>
    <SprkStack itemSpacing={spacingBtwSections}>
      <SprkStackItem>
        <SprkStack
          itemSpacing={spacingBtwHeadingAndContent}
        >
          <SprkStackItem>
            <h1 className="sprk-b-TypeDisplayOne sprk-u-Color--red">
              Spark Design System
            </h1>
          </SprkStackItem>

          <SprkStackItem>
            <p className="sprk-b-TypeBodyTwo sprk-u-Measure">
              Spark Design System is where we collect our best
              solutions for how to design and build unified
              digital experiences for the Rocket brands.
            </p>
          </SprkStackItem>
        </SprkStack>
      </SprkStackItem>

      <SprkStackItem>
        <div className="docs-o-Grid docs-o-Grid--three-col docs-o-Grid--large">
          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserDesigners}
          />

          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserDevelopers}
          />

          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserComponents}
          />

          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserFoundations}
          />

          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserUtils}
          />

          <SprkCard
            additionalClasses="docs-c-Card"
            variant="teaser"
            teaserConfig={teaserNews}
          />
        </div>
      </SprkStackItem>

      <SprkStackItem>
        <SprkStack itemSpacing={spacingBtwHeadingAndContent}>
          <SprkStackItem>
            <h2 className="sprk-b-TypeDisplayTwo sprk-u-Color--red">
              Want To Contribute?
            </h2>
          </SprkStackItem>

          <SprkStackItem>
            <SprkButton
              href="https://github.com/sparkdesignsystem/spark-design-system/blob/master/CONTRIBUTING.md"
              variant="secondary"
            >
              Learn More
            </SprkButton>
          </SprkStackItem>
        </SprkStack>
      </SprkStackItem>
    </SprkStack>
  </Layout>
);

export default IndexPage;

@@ -895,33 +895,64 @@
 mgAlt: '
-placeholder image
+An illustration of a computer with a paintbrush.
 ',%0A    i
@@ -1494,33 +1494,66 @@
 mgAlt: '
-placeholder image
+An illustration of a computer with code displayed.
 ',%0A    i
@@ -2111,33 +2111,72 @@
 mgAlt: '
-placeholder image
+An illustration of a graph paper and a magnifying glass.
 ',%0A    i
@@ -2708,33 +2708,59 @@
 mgAlt: '
-placeholder image
+Decorative illustrations of type and color.
 ',%0A    i
@@ -3259,33 +3259,50 @@
 mgAlt: '
-placeholder im
+Decorative illustrations of p
 age
+s.
 ',%0A    i
@@ -3835,25 +3835,47 @@
 t: '
-placeholder image
+Decorative illustration of a clipboard.
 ',%0A 

update alt attrs on homepage