@extends('layouts.app')

@section('title', 'TrustSeal Portal - Build Trust with Verified Website Seals')

@section('content')
<div class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">Build Trust with Verified Website Seals</h1>
                <p class="lead mb-4">Increase customer confidence with our verified trust and security seals. Monitor your website's security daily and display your commitment to safety.</p>
                <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                    <a href="{{ route('register') }}" class="btn btn-light btn-lg px-4 me-md-2">Get Started Free</a>
                    <a href="{{ route('features') }}" class="btn btn-outline-light btn-lg px-4">Learn More</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="seal-preview">
                    <div class="mb-3">
                        <div class="badge bg-success p-3 mb-2">
                            <i class="fas fa-check-circle"></i> TRUSTED WEBSITE
                        </div>
                        <div class="badge bg-primary p-3">
                            <i class="fas fa-lock"></i> SECURITY VERIFIED
                        </div>
                    </div>
                    <small class="text-muted">Sample Trust Seal</small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row text-center mb-5">
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="feature-box">
                <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                <h5>{{ number_format($stats['total_domains']) }}</h5>
                <p class="text-muted">Verified Domains</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="feature-box">
                <i class="fas fa-eye fa-3x text-primary mb-3"></i>
                <h5>{{ number_format($stats['total_seals_displayed']) }}</h5>
                <p class="text-muted">Seals Displayed</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="feature-box">
                <i class="fas fa-chart-line fa-3x text-warning mb-3"></i>
                <h5>{{ number_format($stats['avg_security_score']) }}/100</h5>
                <p class="text-muted">Average Security Score</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="feature-box">
                <i class="fas fa-clock fa-3x text-info mb-3"></i>
                <h5>24/7</h5>
                <p class="text-muted">Security Monitoring</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto text-center">
            <h2 class="mb-4">How It Works</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="feature-box">
                        <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <strong>1</strong>
                        </div>
                        <h5>Verify Your Domain</h5>
                        <p>Choose from DNS, HTML file, or meta tag verification methods.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-box">
                        <div class="rounded-circle bg-success text-white d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <strong>2</strong>
                        </div>
                        <h5>Get Your Seal</h5>
                        <p>Receive your trust seal and security seal (with SSL + email verification).</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-box">
                        <div class="rounded-circle bg-info text-white d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <strong>3</strong>
                        </div>
                        <h5>Monitor Daily</h5>
                        <p>We monitor your website daily for security issues and update your score.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection