@extends('layouts.main')
@section('title', 'Gymnastics Ethics Foundation')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/goverence.css') }}">
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; background: #fff; }

    .image-container {
      position: relative;
      width: 100%;
    }
    .image-container img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }
    .image-container h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2em;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
    }

    /* ── HERO SLIDER ── */
    .hero {
      position: relative;
      width: 100%;
      height: 520px;
      overflow: hidden;
      background: #111;
    }
    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
    }
    .slide.active { opacity: 1; }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.45);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
    }
    .hero-overlay h1 {
      color: #fff;
      font-size: 2rem;
      font-weight: 400;
      max-width: 720px;
      line-height: 1.5;
      margin-bottom: 2.5rem;
    }
    .hero-buttons {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn-report {
      background: #fff;
      color: #1a1a2e;
      padding: 13px 28px;
      border-radius: 3px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: background 0.2s;
    }
    .btn-report:hover { background: #e8e8e8; }
    .btn-whatsapp {
      background: #25d366;
      color: #fff;
      padding: 13px 28px;
      border-radius: 3px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: background 0.2s;
    }
    .btn-whatsapp:hover { background: #1ebe5d; }
    .slide-dots {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }
    .dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      cursor: pointer;
      transition: background 0.2s;
    }
    .dot.active { background: #fff; }

    /* ── 3 SERVICE CARDS ── */
    .services {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      padding: 4rem 2rem;
      background: #fff;
    }
    .service-card {
      width: 240px;
      text-decoration: none;
      color: #333;
      text-align: left;
    }
    .service-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      border-radius: 2px;
      margin-bottom: 1.2rem;
    }
    .service-card h2 {
      font-size: 1.2rem;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 0.6rem;
    }
    .service-card p {
      font-size: 13px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 0.8rem;
    }
    .service-card .learn-more {
      font-size: 13px;
      color: #005a9e;
      font-weight: 600;
      text-decoration: underline;
    }

    /* ── STRATEGY SECTION ── */
    .strategy {
      background: #f4f4f4;
      padding: 4rem 2rem;
    }
    .strategy-inner {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      gap: 3rem;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .strategy-inner img {
      width: 460px;
      max-width: 100%;
      border-radius: 3px;
      object-fit: cover;
    }
    .strategy-text { flex: 1; min-width: 260px; }
    .strategy-text h2 {
      font-size: 1.4rem;
      color: #1a1a2e;
      font-weight: 700;
      margin-bottom: 0.4rem;
    }
    .strategy-text h3 {
      font-size: 1rem;
      color: #555;
      font-weight: 400;
      margin-bottom: 1.4rem;
    }
    .strategy-text p {
      font-size: 14px;
      line-height: 1.8;
      color: #444;
      margin-bottom: 1rem;
    }
    .btn-primary {
      display: inline-block;
      background: #1a1a2e;
      color: #fff;
      padding: 11px 26px;
      border-radius: 3px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      margin-top: 0.5rem;
      transition: background 0.2s;
    }
    .btn-primary:hover { background: #2e3580; }

    /* ── NEWS ── */
    .news-section {
      padding: 4rem 2rem;
      background: #fff;
    }
    .news-section h2 {
      text-align: center;
      font-size: 1.3rem;
      font-weight: 400;
      color: #1a1a2e;
      margin-bottom: 2.5rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .news-grid {
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 1000px;
      margin: 0 auto 2rem;
    }
    .news-card {
      width: 280px;
      text-decoration: none;
      color: #333;
    }
    .news-card img {
      width: 100%;
      height: 195px;
      object-fit: cover;
      display: block;
      border-radius: 2px;
      margin-bottom: 1rem;
    }
    .news-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: #1a1a2e;
      line-height: 1.5;
      margin-bottom: 0.6rem;
    }
    .news-card p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }
    .read-more-wrap {
      text-align: center;
      margin-top: 1.5rem;
    }
    .read-more-wrap a {
      color: #005a9e;
      font-size: 14px;
      font-weight: 600;
      text-decoration: underline;
    }

    /* ── COOKIE BANNER ── */
    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #1a1a1a;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.8rem;
      padding: 0.9rem 1.5rem;
      font-size: 14px;
      z-index: 999;
    }
    .cookie-banner p { flex: 1; min-width: 220px; }
    .cookie-banner .btn-accept      { background: #2e7d32; color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .cookie-banner .btn-deny        { background: #c62828; color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .cookie-banner .btn-personalize,
    .cookie-banner .btn-policy      { background: #e0e0e0; color: #333; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .cookie-banner button:hover { opacity: 0.85; }
</style>
@endsection

@section('content')
  <div class="image-container">
    <img src="{{ asset('img/olym.jpg') }}" alt="Olympic rings photo">
    <h1>Gymnastics Ethics Foundation</h1>
  </div>

  <!-- HERO SLIDER -->
  <div class="hero">
    <div class="slide active">
      <img src="https://static.wixstatic.com/media/454492_4d8936ecd4614e158315ae8e5dd46310~mv2.jpg" alt="Slide 1">
    </div>
    <div class="slide">
      <img src="https://static.wixstatic.com/media/454492_72740e8f97d6425fb7af3c82167a26dd~mv2.jpg" alt="Slide 2">
    </div>
    <div class="slide">
      <img src="https://static.wixstatic.com/media/454492_982669586d5844b7bb4a14ed98946178~mv2.jpg" alt="Slide 3">
    </div>
    <div class="hero-overlay">
      <h1>The Gymnastics Ethics Foundation (GEF) strives to attain a safe, thriving and impactful global gymnastics ecosystem.</h1>
      <div class="hero-buttons">
        <a href="#" class="btn-report">Report an incident anonymously or not</a>
        <a href="#" class="btn-whatsapp">Report an incident via WhatsApp</a>
      </div>
    </div>
    <div class="slide-dots">
      <div class="dot active" onclick="goToSlide(0)"></div>
      <div class="dot" onclick="goToSlide(1)"></div>
      <div class="dot" onclick="goToSlide(2)"></div>
    </div>
  </div>

  <!-- 3 SERVICE CARDS -->
  <div class="services">
    <a href="#" class="service-card">
      <img src="https://static.wixstatic.com/media/992b6c_372ffcc0c00f4e8f85312c7280e5285c~mv2.jpg" alt="Safeguarding">
      <h2>Safeguarding</h2>
      <p>Confidentially takes care of any reports concerning non-accidental violence, harassment, and/or abuse.</p>
      <span class="learn-more">Learn more</span>
    </a>
    <a href="#" class="service-card">
      <img src="https://static.wixstatic.com/media/454492_fc50399d67a545f1af4c8091d3f5c0ef~mv2.jpg" alt="Disciplinary">
      <h2>Disciplinary</h2>
      <p>Investigates reports and prosecutes infringements in front of the Disciplinary Commission.</p>
      <span class="learn-more">Learn more</span>
    </a>
    <a href="#" class="service-card">
      <img src="https://static.wixstatic.com/media/454492_5454a26020434936be084073e68b3e5a~mv2.jpg" alt="Compliance">
      <h2>Compliance</h2>
      <p>Oversees the Fédération Internationale de Gymnastique (FIG) and its members' compliance with all relevant rules.</p>
      <span class="learn-more">Learn more</span>
    </a>
  </div>

  <!-- STRATEGY SECTION -->
  <div class="strategy">
    <div class="strategy-inner">
      <img src="https://static.wixstatic.com/media/992b6c_a84aa71314394734b51c7520cb43d015~mv2.jpg" alt="Gymnasts 2028">
      <div class="strategy-text">
        <h2>Gymnasts 2028</h2>
        <h3>The Gymnastics Ethics Foundation's Strategic Framework 2023 - 2028</h3>
        <p>Gymnasts 2028 is aimed at making the sport of gymnastics safe, thriving and impactful for all. The strategic framework takes a human-centric approach, placing gymnasts and the people that support and serve gymnastics at the heart of its work.</p>
        <p>The timeframe structures the Foundation's work and allows for impactful action leading up to the Paris 2024 and Los Angeles 2028 editions of the Olympic Games.</p>
        <p>Drawing lessons from the Foundation's first four years of operations, Gymnasts 2028 outlines urgent challenges and trends in gymnastics and describes how the Foundation seeks to address them through five strategic priorities.</p>
        <a href="#" class="btn-primary">Find out more</a>
      </div>
    </div>
  </div>

  <!-- NEWS SECTION -->
  <div class="news-section">
    <h2>Recent activity of the Gymnastics Ethics Foundation (GEF):</h2>
    <div class="news-grid">
      <a href="#" class="news-card">
        <img src="https://static.wixstatic.com/media/992b6c_56638187a9884058b36b7c4dde4a3bd3~mv2.jpg" alt="News 1">
        <h3>The Court of Arbitration for Sport confirms the decision of the GEF Disciplinary Commission against Ms Evangelia Trikomiti and European Gymnastics</h3>
        <p>The GEF welcomes the award rendered by the Court of Arbitration for Sport (CAS), which fully confirms the decision of the GEF Disciplinary Commission dated 6 February 2025.</p>
      </a>
      <a href="#" class="news-card">
        <img src="https://static.wixstatic.com/media/992b6c_1e8c5bdc6bb546fcae393a1f295569d8~mv2.jpg" alt="News 2">
        <h3>The Gymnastics Ethics Foundation Appoints Giovanni Maria Fares as its New Executive Director</h3>
        <p>The GEF is pleased to announce the appointment of Mr Giovanni Maria Fares as its new Executive Director, effective 1 November 2025.</p>
      </a>
      <a href="#" class="news-card">
        <img src="https://static.wixstatic.com/media/992b6c_8a76fb62f8e349ce870a578dae79385f~mv2.png" alt="News 3">
        <h3>2024 Annual Report, a year of growth and reform</h3>
        <p>The Gymnastics Ethics Foundation publishes its 2024 Annual Report, highlighting a year of growth, reform, and continued dedication.</p>
      </a>
    </div>
    <div class="read-more-wrap"><a href="#">Read More</a></div>
  </div>

  <div class="cookie-banner" id="cookieBanner">
    <p>This site uses cookies and gives you control over what you want to activate</p>
    <button class="btn-accept"      onclick="document.getElementById('cookieBanner').style.display='none'">OK, accept all</button>
    <button class="btn-deny"        onclick="document.getElementById('cookieBanner').style.display='none'">Deny all cookies</button>
    <button class="btn-personalize" onclick="document.getElementById('cookieBanner').style.display='none'">Personalize</button>
    <button class="btn-policy"      onclick="document.getElementById('cookieBanner').style.display='none'">Privacy policy</button>
  </div>
@endsection

@section('scripts')
<script>
    // Auto slider
    let current = 0;
    const slides = document.querySelectorAll('.slide');
    const dots   = document.querySelectorAll('.dot');

    function goToSlide(n) {
      slides[current].classList.remove('active');
      dots[current].classList.remove('active');
      current = n;
      slides[current].classList.add('active');
      dots[current].classList.add('active');
    }

    setInterval(() => {
      goToSlide((current + 1) % slides.length);
    }, 4000);
</script>
@endsection