{{--
  Template Name: Impact Report 2022 Planet Pillar 2
--}}

@php


  $data_articles = array(
    (object) [
      'cover' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/Planet_Pillar_2_1.jpg',
      'coverMobile' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/mobile/Planet_Pillar_2_1.jpg',
      'title' => 'ORGANIC FIBRES',
      'url' => 'https://equilibrium.gucci.com/organic-fibres/'
    ],
    (object) [
      'cover' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/Planet_Pillar_2_2.jpg',
      'coverMobile' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/mobile/Planet_Pillar_2_2.jpg',
      'title' => 'SUSTAINABLE PRECIOUS METALS',
      'url' => 'https://equilibrium.gucci.com/sustainable-precious-metals/'
    ],
    (object) [
      'cover' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/Planet_Pillar_2_3.jpg',
      'coverMobile' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/mobile/Planet_Pillar_2_3.jpg',
      'title' => 'VISCOSE',
      'url' => 'https://equilibrium.gucci.com/viscose/'
    ],
    (object) [
      'customFontSize' => true,
      'cover' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/Planet_Pillar_2_4.jpg',
      'coverMobile' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/Planet/mobile/Planet_Pillar_2_4.jpg',
      'title' => 'GUCCI INTRODUCES DEMETRA: A LUXURY INNOVATIVE MATERIAL',
      'url' => 'https://equilibrium.gucci.com/gucci-introduces-demetra-a-luxury-innovative-material/'
    ],
  );


  $data_graph_chart_1 = array(
    array(
      (object) [
        'ariaLabel' => "Overall traceability: 2021 95%, 2022 97%",
        'title' => "Overall traceability",
        'firstData' => '97%',
        'secondData' => '95%',
        'classGraph' => 'graph1'
      ],
      (object) [
        'ariaLabel' => "Leather: 2021 99%, 2022 99%",
        'title' => "Leather",
        'firstData' => '99%',
        'secondData' => '99%',
        'classGraph' => 'graph2'
      ],
    ),
    array(
      (object) [
        'ariaLabel' => "Precious skins: 2021 100%, 2022 100%",
        'title' => "Precious skins",
        'firstData' => '100%',
        'secondData' => '100%',
        'classGraph' => 'graph3'
      ],
      (object) [
        'ariaLabel' => "Cellulose-based fibres: 2021 99%, 2022 99%",
        'title' => "Cellulose-based<br> fibres",
        'firstData' => '77%',
        'secondData' => '44%',
        'classGraph' => 'graph4'
      ],
    )
  );

  $data_graph_chart_2 = array(
    array(
      (object) [
        'ariaLabel' => "Responsibly Sourced precious metals (recycled silver, recycled palladium leather and ethical gold): 2021 100%, 2022 100%",
        'title' => "Responsibly Sourced<br> precious metals<br> (recycled silver, recycled<br> palladium leather<br> and ethical gold)",
        'firstData' => '100%',
        'secondData' => '100%',
        'classGraph' => 'graph7'
      ],
      (object) [
        'ariaLabel' => "Organic or recycled cotton: 2021 61%, 2022 74%",
        'title' => "Organic or
              <br>recycled cotton",
        'firstData' => '74%',
        'secondData' => '61%',
        'classGraph' => 'graph8'
      ],
      (object) [
        'ariaLabel' => "Organic silk: 2021 24%, 2022 46%",
        'title' => "Organic silk",
        'firstData' => '46%',
        'secondData' => '24%',
        'classGraph' => 'graph9'
      ],
    ),
    array(
      (object) [
        'ariaLabel' => "Organic, recycled or responsibly sourced wool and cashmere: 2021 47%, 2022 60%",
        'title' => "Organic, recycled<br> or responsibly<br> sourced wool and<br> cashmere",
        'firstData' => '60%',
        'secondData' => '47%',
        'classGraph' => 'graph10'
      ],
      (object) [
        'ariaLabel' => "Recycled nylon and polyester: 2021 24%, 2022 29%",
        'title' => "Recycled nylon<br> and polyester",
        'firstData' => '29%',
        'secondData' => '24%',
        'classGraph' => 'graph11'
      ],
      (object) [
        'ariaLabel' => "Recycled viscose or from responsibly managed forests: 2021 82%, 2022 74%",
        'title' => "Recycled viscose<br> or from responsibly<br> managed forests",
        'firstData' => '74%',
        'secondData' => '82%',
        'classGraph' => 'graph12'
      ],
    ),
    array(
      (object) [
        'ariaLabel' => "Metal-free leather: 2021 40%, 2022 49%",
        'title' => "Metal-free leather",
        'firstData' => '49%',
        'secondData' => '40%',
        'classGraph' => 'graph13'
      ],
      (object) [
        'ariaLabel' => "Paper from responsibly managed forest sources: 2021 100%, 2022 100%",
        'title' => "Paper from<br> responsibly<br> managed forest<br> sources",
        'firstData' => '100%',
        'secondData' => '100%',
        'classGraph' => 'graph14'
      ],
    )
  );

@endphp

@extends('layouts.app')
@section('content')
<div class="container__impactreport2022">
  <div class="impactreport2022-wrapper pillar">
    <div class="pillar" id="planet-impactreport2022">
      <h1 class="impactreport-2022-main-title-block">
        MATERIALS DESIGNED<br>
        FOR DISRUPTION 
      </h1>
      <div class="impactreport-2022-text-block">
        <p>Creative sustainable disruption starts with lower impact materials. By sourcing sustainably to ramp up recycled, organic and regenerative alternatives while innovating for manufacturing efficiencies, we’re steps closer to our goals. </p>
      </div>
      <h2 class="impactreport-2022-small-title-block title-sticky">
        MATERIALS TRACEABILITY
      </h2>
      <div class="impactreport-2022-text-block">
        <p>We’ve focused a lot of attention on traceability to make sure our high standards for the materials we use in our collections are followed right from the beginning. Our efforts are illustrated in a year-on-year comparison.</p>
      </div>
      <!-- RECT BARS GRAPH 1 -->
      <div class="rect-graph-block">
        <div class="legend" aria-label="Legend: 2021 black, 2022 green">
          <div>
            <div class="circle black"></div>
            <p aria-hidden="true">2021</p>
          </div>
          <div>
            <div class="circle green"></div>
            <p aria-hidden="true">2022</p>
          </div>
        </div>
        <div data-js="horizontal-carousel">
          @include('partials.horizontal-carousel', [
            "data" => $data_graph_chart_1,
            "desktop" => false,
            "graph_chart" => true
            ])
        </div>
        
        <div class="rect-graphs no-mob">
          <div class="rect-graph fadeInElement" aria-label="Overall traceability: 2021 95%, 2022 97%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph1 border-bottom">
                <div data-value="97"><p>97%</p></div>
              </div>
              <div class="top-bar graph1">
                <div data-value="95"><p>95%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Overall traceability
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Leather: 2021 99%, 2022 99%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph2 border-bottom">
                <div data-value="99"><p>99%</p></div>
              </div>
              <div class="top-bar graph2">
                <div data-value="99"><p>99%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Leather
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Precious skins: 2021 100%, 2022 100%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph3 border-bottom">
                <div data-value="100"><p>100%</p></div>
              </div>
              <div class="top-bar graph3">
                <div data-value="100"><p>100%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Precious skins
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Cellulose-based fibres: 2021 99%, 2022 99%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph4 border-bottom">
                <div data-value="77"><p>77%</p></div>
              </div>
              <div class="top-bar graph4">
                <div data-value="44"><p>44%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Cellulose-based<br> fibres
            </div>
          </div>
        </div>
      </div>
      <h2 class="impactreport-2022-small-title-block title-sticky">
        SUSTAINABLE MATERIALS ACROSS OUR COLLECTIONS
      </h2>
      <div class="impactreport-2022-text-block">
        <p>To help reduce our footprint we’ve been incorporating recycled, organic, regenerated, responsible and certified materials in our collections, as well as innovating lower impact processes for them, as outlined in the graphic.</p>
      </div>
      <!-- RECT BARS GRAPH 2 -->
      <div class="rect-graph-block">
        <div class="legend" aria-label="Legend: 2021 black, 2022 green">
          <div>
            <div class="circle black"></div>
            <p aria-hidden="true">2021</p>
          </div>
          <div>
            <div class="circle green"></div>
            <p aria-hidden="true">2022</p>
          </div>
        </div>
        <div data-js="horizontal-carousel">
          @include('partials.horizontal-carousel', [
            "data" => $data_graph_chart_2,
            "desktop" => false,
            "graph_chart" => true,
            "mobileMarginTop" => true
            ])
        </div>
        <div class="rect-graphs no-mob">
          <div class="rect-graph fadeInElement" aria-label="Responsibly sourced precious metals (recycled silver, recycled palladium leather and ethical gold): 2021 100%, 2022 100%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph7 border-bottom">
                <div data-value="100"><p>100%</p></div>
              </div>
              <div class="top-bar graph7">
                <div data-value="100"><p>100%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Responsibly sourced<br> precious metals<br> (recycled silver, recycled<br> palladium leather<br> and ethical gold)
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Organic or recycled cotton: 2021 61%, 2022 74%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph8 border-bottom">
                <div data-value="74"><p>74%</p></div>
              </div>
              <div class="top-bar graph8">
                <div data-value="61"><p>61%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Organic or
              <br>recycled cotton
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Organic silk: 2021 24%, 2022 46%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph9 border-bottom">
                <div data-value="46"><p>46%</p></div>
              </div>
              <div class="top-bar graph9">
                <div data-value="24"><p>24%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Organic silk
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Organic, recycled or responsibly sourced wool and cashmere: 2021 47%, 2022 60%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph10 border-bottom">
                <div data-value="60"><p>60%</p></div>
              </div>
              <div class="top-bar graph10">
                <div data-value="47"><p>47%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Organic, recycled<br> or responsibly<br> sourced wool and<br> cashmere
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Recycled nylon and polyester: 2021 24%, 2022 29%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph11 border-bottom">
                <div data-value="29"><p>29%</p></div>
              </div>
              <div class="top-bar graph11">
                
                <div data-value="24"><p>24%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Recycled nylon<br> and polyester
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Recycled viscose or from responsibly managed forests: 2021 82%, 2022 74%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph12 border-bottom">
                <div data-value="74"><p>74%</p></div>
              </div>
              <div class="top-bar graph12">
                <div data-value="82"><p>82%</p></div>
                
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Recycled viscose<br> or from responsibly<br> managed forests
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Metal-free leather: 2021 40%, 2022 49%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph13 border-bottom">
                <div data-value="49"><p>49%</p></div>
              </div>
              <div class="top-bar graph13">
                <div data-value="40"><p>40%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Metal-free leather
            </div>
          </div>
          <div class="rect-graph fadeInElement" aria-label="Paper from responsibly managed forest sources: 2021 100%, 2022 100%" role="text">
            <div class="bars" aria-hidden="true">
              <div class="bottom-bar graph14 border-bottom">
                <div data-value="100"><p>100%</p></div>
              </div>
              <div class="top-bar graph14">
                <div data-value="100"><p>100%</p></div>
              </div>
            </div>
            <div class="description" aria-hidden="true">
              Paper from<br> responsibly<br> managed forest<br> sources
            </div>
          </div>
        </div>
      </div>
      <h2 class="impactreport-2022-small-title-block title-sticky">
        AVOIDED IMPACTS AND SAVINGS IN 2022 IN NUMBERS
      </h2>
      <div class="impactreport-2022-text-block">
        <p>To avoid and reduce our environmental impacts, we’ve been focusing on targeted actions like responsible sourcing for lower-impact materials and increasing recycled materials; adopting more efficient processes; using green energy; and innovating through circularity as revealed in the year-on-year table.</p>
      </div>
      <h2 class="impactreport-2022-subtitle-block border-top">
        Gucci's GHG Emissions Avoided Year-on-Year (tCO2e)
      </h2>
      <div class="triple-graph-block">
        <!-- HORIZONTAL HISTOGRAM -->
        <!-- <div class="horizontal-histogram">
          <canvas id="barChart"></canvas>
          <div id="screenReaderText"></div>
        </div> -->
        <!-- TABLE 2 -->
        <div class="separator-1"></div> 
        <div class="table-wrapper">
          <div class="layer"></div>
          <table class="impactreport2022-table-data impactreport2022-table-td-height" aria-label="pillar 2 planet table">
            <tr class="header-row">
              <td colspan="2"></td>
              <td style="text-align: center"><span style="font-weight:800">2021</span></td>
              <td style="text-align: center"><span style="font-weight:800">2022</span></td>
            </tr>
            <tr class="single-row">
              <td class="table-title pos-relative custom-index" rowspan="2">
                <span class="report-cell-title-1">RAW MATERIAL SOURCING</span>
                <button class="plusBtn custom-margin" aria-expanded="false">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/plus.svg">
                </button>
                <button class="minusBtn custom-margin">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/minus.svg">
                  <div class="infoCloud downCloud" role="dialog" aria-modal="true">
                    Certified, organic, bio-based, recycled and regenerative materials<br>
                    <span class="infoClose">Close</span> 
                    <div class="triangle"></div>
                  </div>
                </button>
              </td>
              <td class="table-label bg-gray stroke-top">
                Responsibly sourced 
              </td>
              <td class="table-data bg-gray">-2,973</td>
              <td class="table-data bg-gray">-2,570</td>
            </tr>
            <tr class="single-row">
              <td class="table-label">                
                Recycled
              </td>
              <td class="table-data">-219,041</td>
              <td class="table-data">-243,650</td>
            </tr>
            <tr class="single-row">
              <td class="table-title pos-relative" rowspan="3">
                 <span class="report-cell-title-2">PROCESS EFFICIENCY</span>
                <button class="plusBtn custom-margin" aria-expanded="false">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/plus.svg">
                </button>
                <button class="minusBtn custom-margin">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/minus.svg">
                  <div class="infoCloud upCloud" role="dialog" aria-modal="true">
                    Metal-free tanning, green electricity and Gucci Scrap-less<br>
                    <span class="infoClose">Close</span> 
                    <div class="triangle"></div>
                  </div>
                </button>
              </td>
              <td class="table-label bg-gray">
                Metal-Free Tanning 
              </td>
              <td class="table-data bg-gray">-2,632</td>
              <td class="table-data bg-gray">-3,753</td>
            </tr>
            <tr class="single-row">
              <td class="table-label">              
                Green Electricity
              </td>
              <td class="table-data">-53,306</td>
              <td class="table-data">-60,148</td>
            </tr>
            <tr class="single-row">
              <td class="table-label bg-gray">                
                Gucci Scrap-Less
              </td>
              <td class="table-data bg-gray">-343</td>
              <td class="table-data bg-gray">-451</td>
            </tr>
            
            <tr class="single-row">
              <td class="table-title pos-relative custom-padding custom-height custom-position">
                <span class="report-cell-title-3 center-vertical">CIRCULARITY </span>
                <button class="plusBtn custom-margin center-vertical" aria-expanded="false">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/plus.svg">
                </button>
                <button class="minusBtn custom-margin center-vertical">
                  <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/minus.svg">
                  <div class="infoCloud upCloud" role="dialog" aria-modal="true">
                    Gucci-Up recovers and upcycles leftover materials from manufacturing<br>
                    <span class="infoClose">Close</span> 
                    <div class="triangle"></div>
                  </div>
                </button>
              </td>
              <td class="table-label stroke-top">                
                Gucci-Up
              </td>
              <td class="table-data">-49,808</td>
              <td class="table-data">-59,614</td>
            </tr>
            <tr class="single-row">
              <td class="table-title"></td>
              <td class="table-label stroke-top">                
                TOTAL AVOIDED (tCO2e)
              </td>
              <td class="table-data">-328,103</td>
              <td class="table-data">-370,186</td>
            </tr>
          </table>
        </div>
        <div class="separator-3"></div>
      </div>
      @include('partials.pillar-post-related', [
        'data' => $data_articles,
        'category' => 'planet'
      ])
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart2music"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<!-- <script src="/wp-content/themes/equilibrium/resources/views/impactreport-2022/horizontal-histogram.js"></script>    -->
<script src="/wp-content/themes/equilibrium/resources/views/impactreport-2022/index.js"></script>   

@endsection