@extends('layouts.main')
@section('title', 'Structure')

@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;
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
    }

    .congress-card {
      background: #3a6bc4;
      border-radius: 12px;
      padding: 1rem;
      width: 160px;
      min-width: 160px;
      text-align: center;
      color: white;
    }
    .congress-card h3 {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 0.8rem;
    }
    .congress-rows {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 0.8rem;
    }
    .congress-row {
      display: flex;
      gap: 3px;
      justify-content: center;
    }
    .dot {
      width: 10px;
      height: 10px;
      background: #f5c842;
      border-radius: 50%;
    }
    .congress-card p {
      font-size: 9px;
      color: #cde;
      margin-top: 0.5rem;
      line-height: 1.4;
    }
    .person-icon { font-size: 18px; margin-bottom: 4px; }

    .circle {
      position: absolute;
      border-radius: 50%;
    }
    .c-council      { width: 200px; height: 200px; background: #4a90d9; top: 0; left: 0; }
    .c-exec         { width: 160px; height: 160px; background: #2e73c4; top: 20px; left: 20px; }
    .c-presidential { width: 120px; height: 120px; background: #1a5baa; top: 40px; left: 40px; }
    .c-vp           { width: 82px;  height: 82px;  background: #0e4490; top: 59px; left: 59px; }
    .c-president    { width: 50px;  height: 50px;  background: #062d70; top: 75px; left: 75px; }

    .circle-label {
      position: absolute;
      color: white;
      font-size: 8px;
      font-weight: bold;
      text-align: center;
      width: 100%;
      line-height: 1.2;
      pointer-events: none;
    }
    .label-president { top: 83px;  left: 0; font-size: 7px; }
    .label-vp        { top: 64px;  left: 0; font-size: 7px; }
    .label-pcomm     { top: 47px;  left: 0; font-size: 7px; }
    .label-exec      { top: 112px; left: 0; font-size: 7px; }
    .label-council   { top: 158px; left: 0; font-size: 8px; }

    .tags-column {
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
    }
    .tag {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: bold;
      color: white;
      text-align: center;
      white-space: nowrap;
    }
    .tag-purple { background: #7b4fa6; }
    .tag-orange { background: #e07b20; }
    .tag-teal   { background: #2aa68a; }
    .tag-green  { background: #4caf50; }
    .tag-red    { background: #e53935; }
    .tag-blue   { background: #1976d2; }
    .tag-yellow { background: #c8a000; }
    .tag-gray   { background: #888; }

    .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>Structure</h1>
  </div>

  <div class="page-layout">

    <div class="main">

      <div class="congress-card">
        <h3>Congress</h3>
        <div class="congress-rows">
          <div class="person-icon">👤</div>
          <div class="congress-row">
            <div class="dot"></div><div class="dot"></div><div class="dot"></div>
          </div>
          <div class="congress-row">
            <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
          </div>
          <div class="congress-row">
            <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
          </div>
          <div class="congress-row">
            <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
          </div>
          <div class="congress-row">
            <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
          </div>
        </div>
        <p>General assembly<br>of the affiliated national federations</p>
      </div>

      <div style="position:relative; width:200px; min-width:200px; height:210px;">
        <div class="circle c-council"></div>
        <div class="circle c-exec"></div>
        <div class="circle c-presidential"></div>
        <div class="circle c-vp"></div>
        <div class="circle c-president"></div>
        <span class="circle-label label-president">President</span>
        <span class="circle-label label-vp">3 Vice-Presidents</span>
        <span class="circle-label label-pcomm">Presidential Commission</span>
        <span class="circle-label label-exec">Executive Committee</span>
        <span class="circle-label label-council">Council</span>
      </div>

      <div class="tags-column">
        <div class="tag tag-purple">GFA-C</div>
        <div class="tag tag-orange">MAG-TC</div>
        <div class="tag tag-teal">WAG-TC</div>
        <div class="tag tag-green">RG-TC</div>
        <div class="tag tag-red">TRA-TC</div>
        <div class="tag tag-blue">ACRO-TC</div>
        <div class="tag tag-yellow">AER-TC</div>
        <div class="tag tag-gray">PK-TC</div>
      </div>

    </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