@extends('layout')

@section('title')
  <title>Home Menu</title>
@endsection

@section('content')


<section class="d-flex flex-column justify-content-center align-items-center text-center"
  style="
    min-height:100vh;
    background: url('{{ asset('assets/img/home2_bg.jpeg') }}') center center / cover no-repeat;
  ">

    <style>
        .block-btn {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 220px;
          height: 130px;
          border-radius: 15px;
          text-decoration: none;
          color: #fff; /* 🔹 Text color: white */
          font-size: 1.5rem;
          font-weight: bold;
          background-size: cover;
          background-position: center;
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
          border: 3px solid #fff; /* 🔹 Border color: white */
      }

      .block-btn::before {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.45); /* overlay effect */
          transition: background 0.3s ease;
      }

      .block-btn span {
          position: relative;
          z-index: 2;
      }

      .block-btn:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(255,255,255,0.25); /* subtle white glow */
          border-color: #f8f9fa; /* lighter white border on hover */
      }

      .block-btn:hover::before {
          background: rgba(0, 0, 0, 0.2);
      }
</style>


    <h1 style="
    color: #fff;
    -webkit-text-stroke: 1px black;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  ">
    Please Select Your Block
  </h1>
  
    {{-- <h1 class="mb-4">Please Select Your Block</h1> --}}

    <!-- Block buttons -->
    {{-- <div class="d-flex flex-wrap justify-content-center gap-3 mb-2 mt-4">
        <a href="{{ route('block.gallery', ['block' => 'a']) }}" class="btn btn-primary btn-lg">Block A</a>
        <a href="{{ route('block.gallery', ['block' => 'b']) }}" class="btn btn-primary btn-lg">Block B</a> --}}
        {{-- <a href="{{ route('block.gallery', ['block' => 'c']) }}" class="btn btn-outline-primary btn-lg">Block C</a> --}}
       {{-- <a href="{{ route('block.gallery', ['block' => 'd']) }}" class="btn btn-outline-primary btn-lg">Block D</a> --}}

    {{-- </div> --}}

    
    <div class="d-flex flex-wrap justify-content-center gap-3 mb-2 mt-4">
        <a href="{{ route('block.gallery', ['block' => 'a']) }}" class="block-btn" 
          style="background-image: url('{{ asset('assets/img/gambarA.jpeg') }}');">
            <span>Block A</span>
        </a>
    
        <a href="{{ route('block.gallery', ['block' => 'b']) }}" class="block-btn" 
          style="background-image: url('{{ asset('assets/img/gambarA.jpeg') }}');">
            <span>Block B</span>
        </a>
    </div>
    
  



    {{-- Floor Maps --}}
    {{-- <h2 class="h4 mt-5 mb-3">Floor Maps</h2>
    <div class="d-flex flex-wrap justify-content-center gap-3">
      <a href="{{ route('map.show', 'groundfloor') }}" class="btn btn-primary">Open Ground Floor Map</a>
      <a href="{{ route('map.show', 'floor1') }}" class="btn btn-primary">Open Floor 1 Map</a>
      <a href="{{ route('map.show', 'floor2') }}" class="btn btn-primary">Open Floor 2 Map</a>
      <a href="{{ route('map.show', 'floor3') }}" class="btn btn-primary">Open Floor 3 Map</a>
    </div> --}}

    {{-- Admin-only: tracing helpers --}}
    {{-- @if(app()->environment('local'))
      <h3 class="h6 text-muted mt-4 mb-3">Tracing helpers (admin)</h3>
      <div class="d-flex flex-wrap justify-content-center gap-2">
        <a href="{{ route('map.coords', 'groundfloor') }}" class="btn btn-outline-warning btn-sm">Trace Ground Floor</a>
        <a href="{{ route('map.coords', 'floor1') }}" class="btn btn-outline-warning btn-sm">Trace Floor 1</a>
        <a href="{{ route('map.coords', 'floor2') }}" class="btn btn-outline-warning btn-sm">Trace Floor 2</a>
        <a href="{{ route('map.coords', 'floor3') }}" class="btn btn-outline-warning btn-sm">Trace Floor 3</a>
      </div>
    @endif --}}


    <!-- Back button -->
    {{-- <div class="d-flex flex-wrap justify-content-center gap-2">
    <a href="{{ url('/') }}" class="btn btn-primary btn-lg mt-5">
      Home
    </a>
    <a href="{{ route('admin.qrs') }}" class="btn btn-danger btn-lg mt-5">
      QR PAGE
    </a>
    </div> --}}
    <a href="{{ url('/') }}" class="btn btn-secondary btn-lg mt-5">
      Home
    </a>
    {{-- <a href="{{ route('admin.qrs') }}" class="btn btn-danger btn-lg mt-5">
      QR PAGE
    </a> --}}

</section>
@endsection