import { Meta } from "@storybook/blocks";

import TopPageKv from "./assets/storybookTopKv.png";
import ImgFigma from "./assets/image_figma.png";
import ImgCSS from "./assets/image_css.png";
import ImgStorybook from "./assets/image_storybook.png";
import ImgDesignSystem from "./assets/image_designsystem.png";


<Meta title="INTRODUCTION" />

<div className="">
  <section className="c-section" data-section="root">
    <figure className="c-image">
      <picture className="picture"><img className="image" src={TopPageKv} alt="INTRODUCTION" data-image-simple="root"/></picture>
    </figure>
    <p className="c-textBody">デンソーらしいブランドアイデンティティの担保と開発効率化の両立を目指して作られた、サービス・プロダクト向けのUIデザイン指針におけるコンポーネントをまとめたライブラリです。</p>
  </section>
  <section className="c-section" data-section="root">
    <h2 className="c-headingLevel2" data-heading-level2="root" id="headings">コンポーネント利用に関して</h2>
    <ul className="c-linkNavPanels">
      <li className="c-linkNavPanels-item" data-link-nav-panels="root"><a href="https://www.figma.com/design/cya2vDROeUXZ860XdJtVXU/DNUI_ver1.03?node-id=11102-6100&t=C8rI79U0uIz6TC9v-1" target="_blank">
          <div className="c-linkNavPanels-item-wrapText">
            <h3 className="c-headingLevel3" data-heading-level3="root">コンポーネントの使用方法を詳しく見る （Figma）</h3>
            <p className="c-textBody">コンポーネントの使用ルール詳細を記載しています。Figma内の「コンポーネント」ページをご覧ください。</p>
          </div>
          <picture className="c-imagePicture" data-image-picture="root"><img className="c-imagePicture-img" src={ImgFigma} width="450" height="250" alt="Figma" data-image-picture="img"/></picture></a></li>
    </ul>
    <ul className="c-linkNavPanels">
      <li className="c-linkNavPanels-item" data-link-nav-panels="root"><a href='./assets/cssfiles.zip' download>
          <div className="c-linkNavPanels-item-wrapText">
            <h3 className="c-headingLevel3" data-heading-level3="root">CSSダウンロード</h3>
            <p className="c-textBody">コンポーネントを利用する際はこちらのCSSファイルをダウンロードしてください。</p>
          </div>
          <picture className="c-imagePicture" data-image-picture="root"><img className="c-imagePicture-img" src={ImgCSS} width="450" height="250" alt="CSS" data-image-picture="img"/></picture></a></li>
    </ul>
    <ul className="c-linkNavPanels">
      <li className="c-linkNavPanels-item" data-link-nav-panels="root"><a href='./assets/librarydata.zip' download>
          <div className="c-linkNavPanels-item-wrapText">
            <h3 className="c-headingLevel3" data-heading-level3="root">ライブラリデータダウンロード (ver 1.0.3)</h3>
            <p className="c-textBody">社外へこのライブラリを展開したい場合はファイルをダウンロードして展開してください。</p>
          </div>
          <picture className="c-imagePicture" data-image-picture="root"><img className="c-imagePicture-img" src={ImgStorybook} width="450" height="250" alt="Storybook" data-image-picture="img"/></picture></a></li>
    </ul>
  </section>
  <section className="c-section" data-section="root">
    <h2 className="c-headingLevel2" data-heading-level2="root" id="headings">関連リンク</h2>
    <ul className="c-linkNavPanels">
      <li className="c-linkNavPanels-item" data-link-nav-panels="root"><a href="/" target="_blank">
          <div className="c-linkNavPanels-item-wrapText">
            <h3 className="c-headingLevel3" data-heading-level3="root">DENSO UI Design System</h3>
            <p className="c-textBody">UIの表現要素や心構えについて記載しています。コンポーネントを使用する際はぜひご一読ください。</p>
          </div>
          <picture className="c-imagePicture" data-image-picture="root"><img className="c-imagePicture-img" src={ImgDesignSystem} width="450" height="250" alt="DesignSystem" data-image-picture="img"/></picture></a></li>
    </ul>
  </section>
</div>

<style>
  {`
    .c-section {
      margin-bottom: 80px ;
    }

    .c-section:last-of-type {
      padding-bottom: 80px ;
      margin-bottom: 336px ;
    }

    .c-section:first-of-type {
      margin-top: 40px;
    }

    .c-image {
      text-align: center ;
      display: block ;
    }

    .c-image .picture {
      display: block ;
      font-size: 0 ;
      overflow: hidden ;
    }

    .c-image .picture .image {
      width: 100% ;
      height: auto ;
    }

    .c-textBody {
      font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif ;
      font-weight: 400 ;
      font-size: 16px ;
      line-height: 1.7 ;
      letter-spacing: 0.64px ;
    }

    .c-headingLevel2{
      font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif ;
      font-size: 32px ;
      font-weight: 700 ;
      line-height: 48px ;
      letter-spacing: 0.04em ;
      text-align: left ;
      color: #333 ;
      margin-top: 80px ;
      border: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .c-linkNavPanels {
      margin-bottom: 32px ;
      height: 100% ;
      padding-left: 0;
      margin-top: 0;
    }

    .c-linkNavPanels:first-of-type{
      margin-top: 32px;
    }

    .c-linkNavPanels-item {
      display: block ;
      flex-grow: 1 ;
    }

    .c-linkNavPanels-item a {
      display: flex ;
      width: 100% ;
      height: 100% ;
      min-height: 180px ;
      background-color: #fff ;
      box-shadow: 0 1px 10px 0 #e0e0e0 ;
      border: 1px solid #D2D2D2 ;
      transition: all 0.1s ;
      position: relative ;
    }

    .c-linkNavPanels-item a::before {
      content: "" ;
      display: block ;
      width: 100% ;
      height: 100% ;
      background-color: rgba(0, 0, 0, 0.08) ;
      position: absolute ;
      top: 0 ;
      right: 0 ;
      z-index: 1 ;
      opacity: 0 ;
      transition: all 0.1s ;
    }

    .c-linkNavPanels-item a:hover::before {
      opacity: 1 ;
    }

    .c-linkNavPanels-item-wrapText {
      flex: 1 ;
      padding: 32px ;
    }

    .c-imagePicture {
      display: block ;
    }

    .c-linkNavPanels-item .c-imagePicture {
      width: 270px ;
      flex-basis: 270px ;
    }

    .c-imagePicture-img {
      display: block ;
      width: 100% ;
      height: auto ;
    }

    .c-linkNavPanels-item .c-imagePicture-img {
      height: 100% ;
      object-fit: cover;
    }

    .c-headingLevel3 {
      margin-top: 80px ;
      font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif ;
      color: #333 ;
      font-size: 20px ;
      font-weight: 700 ;
      line-height: 30px ;
      letter-spacing: 0.04em ;
      text-align: left ;
    }
    .dark{
      .c-headingLevel2{
        color: #C9CDCF ;
      }
      .c-linkNavPanels-item{
        .c-textBody{
          color: #2E3438 ;
        }
      }
      .c-linkNavPanels-item a{
        box-shadow:none;
      }
    }
  `}
</style>
