@extends('layouts.app')

@php
    $canonical = url()->current(); // Or a custom URL if needed
@endphp

@section('title', 'Image Tools – Compress, Remove Background & More | Pixxx')
@section('meta_description', 'Explore all Pixxx tools: image compression, background remover, and more. Boost image performance and presentation easily.')
@section('meta_keywords', 'image tools, compress images, remove background, optimize images, Pixxx tools')

@section('content')

  <!-- Main Content -->
  <main class="flex-grow py-12 bg-sky-50 px-4">
    <div class="max-w-7xl mx-auto">
      <!-- Hero Section -->
      <div class="text-center mb-16">
        <h1 class="text-4xl font-extrabold text-gray-900 mb-4">Powerful Image Editing Tools</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">Enhance, convert, and optimize your images with our comprehensive suite of free online tools</p>
      </div>

      <!-- Tools Grid -->
      <div class="mb-16">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- Compress Image -->
          <a href="/compress_image" class="tool-card bg-white border border-gray-200 rounded-lg p-2 text-center hover:border-sky-400 shadow-sm
           flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-arrows-angle-contract text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Compress Image</h3>
            <p class="text-gray-600">Reduce file size without losing quality</p>
          </a>
          
          <!-- Resize Image -->
          <a href="/resize_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-arrows-angle-expand text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Resize Image</h3>
            <p class="text-gray-600">Change dimensions to fit any need</p>
          </a>
          
          <!-- Crop Image -->
          <a href="/crop_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-crop text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Crop Image</h3>
            <p class="text-gray-600">Trim edges to focus on what matters</p>
          </a>
          
          <!-- Convert to JPG -->
          <a href="/convert_jpg" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-file-earmark-image text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Convert to JPG</h3>
            <p class="text-gray-600">Transform any image to JPG format</p>
          </a>
          
          <!-- Convert from JPG -->
          <a href="/convert_from_jpg" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-file-earmark-arrow-down text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Convert from JPG</h3>
            <p class="text-gray-600">Convert JPG to PNG, WEBP, and more</p>
          </a>
          
          <!-- Photo Editor -->
          <a href="/image_editor" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-sliders text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Photo Editor</h3>
            <p class="text-gray-600">Advanced editing at your fingertips</p>
          </a>
          
          <!-- Upscale Image -->
          <a href="/upscale_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-zoom-in text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Upscale Image</h3>
            <p class="text-gray-600">Enlarge without losing quality</p>
          </a>
          
          <!-- Remove Background -->
          <a href="/removebackground_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-backspace-reverse text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Remove Background</h3>
            <p class="text-gray-600">Instant background removal</p>
          </a>
          
          <!-- Watermark Image -->
          <a href="/watermark_text" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-type text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Watermark </h3>
            <p class="text-gray-600">Protect your images with watermarks</p>
          </a>
          
          <!-- Meme Generator -->
          <a href="/meme_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-chat-square-quote text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Meme Generator</h3>
            <p class="text-gray-600">Create viral memes in seconds</p>
          </a>
          
          <!-- Rotate Image -->
          <a href="/rotate_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-arrow-clockwise text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Rotate Image</h3>
            <p class="text-gray-600">Flip and rotate any direction</p>
          </a>
          
          <!-- HTML to Image -->
          <a href="/html_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-filetype-html text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">HTML to Image</h3>
            <p class="text-gray-600">Convert HTML to PNG/JPG</p>
          </a>

          <!-- GIF Frame Extractor -->
          <a href="/gif_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <!-- GIF icon (e.g., play button or frames) -->
              <i class="bi bi-film text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Extract GIF Frames</h3>
            <p class="text-gray-600">Break down animated GIFs into individual frames</p>
          </a>

          <!-- Face Blur Tool -->
          <a href="/face_blur_image" class="tool-card bg-white border border-gray-200 rounded-lg p-6 text-center hover:border-sky-400 shadow-sm flex flex-col items-center justify-center">
            <div class="w-10 h-10 bg-sky-50 rounded-lg flex items-center justify-center mb-4 shadow-sm">
              <i class="bi bi-eyeglasses text-sky-700 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Blur Faces</h3>
            <p class="text-gray-600">Manually blur faces for privacy</p>
          </a>


        </div>
      </div>

    </div>
  </main>

@endsection