@extends('layouts.main')
@section('title', 'Financial Reports')

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

    .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;
    }

    .page-layout {
      display: flex;
      gap: 2rem;
      max-width: 900px;
      margin: 2rem auto;
    }

    .main {
      flex: 1;
      background: #fff;
      padding: 2rem 1.5rem;
    }

    .report-btn {
      display: block;
      width: 100%;
      background: #1a1f5e;
      color: white;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 1px;
      padding: 16px;
      border-radius: 40px;
      text-decoration: none;
      margin-bottom: 14px;
      transition: background 0.2s;
    }
    .report-btn:hover { background: #2e3580; }

    .sidebar {
      width: 220px;
      background: #fff;
      padding: 1.5rem;
    }
    .sidebar h2 { font-size: 20px; font-weight: 500; color: #333; margin-bottom: 1.2rem; }
    .sidebar ul { list-style: none; }
    .sidebar ul li { padding: 10px 0; border-bottom: 1px solid #e0e0e0; }
    .sidebar ul li:last-child { border-bottom: none; }
    .sidebar ul li a { font-size: 15px; color: #5B9BD5; text-decoration: none; }
    .sidebar ul li a:hover { text-decoration: underline; }

    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #1a1a1a;
      color: white;
      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: 200px; }
    .cookie-banner .btn-accept { background: #2e7d32; color: white; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .cookie-banner .btn-deny   { background: #c62828; color: white; 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>Financial Reports</h1>
  </div>

  <div class="page-layout">

    <div class="main">
      <a href="#" class="report-btn">2024 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2023 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2022 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2021 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2020 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2019 FIG FINANCIAL REPORT</a>
      <a href="#" class="report-btn">2018 FIG FINANCIAL REPORT</a>
    </div>

    <div class="sidebar">
      <h2>Governance</h2>
      <ul>
        <li><a href="#">Structure</a></li>
        <li><a href="#">Decisions of FIG authorities</a></li>
        <li><a href="#">Disciplinary Decisions</a></li>
        <li><a href="#">Financial Reports</a></li>
        <li><a href="#">Main events reports</a></li>
        <li><a href="#">Gymnastics Ethics Foundation</a></li>
      </ul>
    </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