@extends('layouts.app')

@section('title', 'Free Web Proxy Scanner & Tools')
@section('description', 'Access our suite of free proxy tools including web proxy scanner, port scanner, and proxy testing. Check proxy availability, scan ports, and test proxy servers with our comprehensive tools.')

@section('content')
    <!-- Hero Section -->
    <div class="position-relative bg-light">
        <!-- Background Image -->
        <div class="position-absolute w-100 h-100">
            <img class="w-100 h-100 object-fit-cover opacity-25" src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&auto=format&fit=crop&w=2074&q=80" alt="Network background">
        </div>
        
        <div class="container position-relative py-5">
            <div class="text-center">
                <h1 class="display-4 fw-bold mb-4">
                    <span class="d-block">Free Web Proxy Scanner</span>
                    <span class="d-block text-primary mt-2">& Network Tools</span>
                </h1>
                <p class="lead mb-5">
                    Access our comprehensive suite of free proxy tools. Scan ports, check proxy availability, and test proxy servers with ease.
                </p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ route('register') }}" class="btn btn-primary btn-lg px-5 py-3 shadow">
                        Get Started
                    </a>
                    <a href="{{ route('proxies.index') }}" class="btn btn-outline-primary btn-lg px-5 py-3 shadow">
                        Try Free Tools
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Feature Section -->
    <div class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-subtle text-primary fs-6 px-3 py-2 mb-3">Features</span>
                <h2 class="display-5 fw-bold mb-4">Everything you need to work with proxies</h2>
                <p class="lead text-muted">
                    Our comprehensive suite of tools helps you scan, test, and manage proxy servers efficiently.
                </p>
            </div>

            <div class="row g-4">
                <!-- Web Proxy Scanner -->
                <div class="col-md-6">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 bg-primary text-white rounded-3 p-3 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
                                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67-.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552-1.035 1.218-2.058 1.887-1.855V12H5.145zm1.666 2.533a6.761 6.761 0 0 1-1.049-1.533H7.5V12h-1.674a5.957 5.957 0 0 1-.656-2.5H2.255c0 .71.083 1.4.25 2.05a7.983 7.983 0 0 0 4.556-0.567zm2.988-1.03c.048-.65.119-1.287.19-1.918H8.5v2.5h.168a6.495 6.495 0 0 1-.168-0.582zm3.082 0.582a7.472 7.472 0 0 1-.168.582h.168c-.022-.207-.048-.414-.072-.62a6.81 6.81 0 0 0-.19-1.918h2.49a6.958 6.958 0 0 1-.656 2.5H14.5a6.249 6.249 0 0 1-2.489 1.336z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="h4 fw-bold mb-3">Web Proxy Scanner</h3>
                            <p class="text-muted mb-0">
                                Scan and find available web proxies from multiple sources. Check their availability and performance in real-time.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Port Scanner -->
                <div class="col-md-6">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 bg-primary text-white rounded-3 p-3 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">
                                <path d="M5.338 1.59a61.562 61.562 0 0 0-2.168.377A2 2 0 0 0 1 3.951V9.18a3 3 0 0 0 2.276 2.877l1.32.377a4.002 4.002 0 0 0 2.848 0l1.32-.377A3 3 0 0 0 15 9.18V3.951a2 2 0 0 0-1.17-1.984l-1.17-.377a61.562 61.562 0 0 0-2.168-.377z"/>
                                <path d="M9.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L6.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="h4 fw-bold mb-3">Port Scanner</h3>
                            <p class="text-muted mb-0">
                                Check port availability and status. Scan multiple ports simultaneously for efficient network diagnostics.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Proxy Testing -->
                <div class="col-md-6">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 bg-primary text-white rounded-3 p-3 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-lightning" viewBox="0 0 16 16">
                                <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2-7a.5.5 0 0 1 .52-.359zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1H6.374z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="h4 fw-bold mb-3">Proxy Testing</h3>
                            <p class="text-muted mb-0">
                                Test proxy servers for speed, reliability, and anonymity. Get detailed performance metrics and recommendations.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Premium Features -->
                <div class="col-md-6">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 bg-primary text-white rounded-3 p-3 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
                                <path d="M2.866 14.85l-.31.17a1 1 0 0 1-1.451-1.31l.472-2.754a1 1 0 0 0-.287-1.757L1.05 8.565a1 1 0 0 1 .59-1.71l2.69-.766a1 1 0 0 0 .757-.563l1.483-3.024a1 1 0 0 1 1.794 0l1.483 3.024a1 1 0 0 0 .757.563l2.69.766a1 1 0 0 1 .59 1.71l-2.31 1.242a1 1 0 0 0-.287 1.757l.472 2.754a1 1 0 0 1-1.45 1.31l-.31-.17a1 1 0 0 0-.94 0l-.31.17a1 1 0 0 1-1.451-1.31l.472-2.754a1 1 0 0 0-.287-1.757L1.05 8.565a1 1 0 0 1 .59-1.71l2.69-.766a1 1 0 0 0 .757-.563l1.483-3.024a1 1 0 0 1 1.794 0l1.483 3.024a1 1 0 0 0 .757.563l2.69.766a1 1 0 0 1 .59 1.71l-2.31 1.242a1 1 0 0 0-.287 1.757l.472 2.754a1 1 0 0 1-1.45 1.31l-.31-.17a1 1 0 0 0-.94 0z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="h4 fw-bold mb-3">Premium Features</h3>
                            <p class="text-muted mb-0">
                                Upgrade to access advanced features like bulk scanning, API access, and priority support.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="bg-light py-5">
        <div class="container text-center">
            <h2 class="display-5 fw-bold mb-4">
                <span class="d-block">Ready to get started?</span>
                <span class="d-block mt-2">Start using our free proxy tools today.</span>
            </h2>
            <p class="lead text-muted mb-5">
                Join thousands of users who trust our tools for their proxy scanning needs.
            </p>
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg px-5 py-3 shadow">
                Get Started
            </a>
        </div>
    </div>

    <!-- Footer Section -->
    <footer class="bg-white py-4">
        <div class="container text-center">
            <p class="text-muted mb-0">
                &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
            </p>
        </div>
    </footer>
@endsection