@using QRRapidoApp.Services
@using Microsoft.Extensions.Localization
@inject AdDisplayService AdService
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer

@{
    ViewData["Title"] = Localizer["HowToUse"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container py-5">
    <!-- Hero Section -->
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <div class="mb-5">
                <h1 class="display-5 fw-bold text-primary mb-3">
                    <i class="fas fa-book-open me-3"></i>@Localizer["HowToUseTitle"]
                </h1>
                <p class="lead text-muted">@Localizer["HowToUseSubtitle"]</p>
            </div>
        </div>
    </div>

    <!-- Quick Start Guide -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white text-center">
                    <h3 class="mb-0">
                        <i class="fas fa-rocket me-2"></i>@Localizer["QuickStartGuide"]
                    </h3>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 mb-4">
                            <div class="text-center step-card h-100 p-3">
                                <div class="step-number bg-primary text-white rounded-circle mx-auto mb-3">1</div>
                                <i class="fas fa-list fa-2x text-primary mb-3"></i>
                                <h6 class="fw-bold">@Localizer["Step1Title"]</h6>
                                <p class="small text-muted">@Localizer["Step1Description"]</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-4">
                            <div class="text-center step-card h-100 p-3">
                                <div class="step-number bg-success text-white rounded-circle mx-auto mb-3">2</div>
                                <i class="fas fa-edit fa-2x text-success mb-3"></i>
                                <h6 class="fw-bold">@Localizer["Step2Title"]</h6>
                                <p class="small text-muted">@Localizer["Step2Description"]</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-4">
                            <div class="text-center step-card h-100 p-3">
                                <div class="step-number bg-warning text-dark rounded-circle mx-auto mb-3">3</div>
                                <i class="fas fa-bolt fa-2x text-warning mb-3"></i>
                                <h6 class="fw-bold">@Localizer["Step3Title"]</h6>
                                <p class="small text-muted">@Localizer["Step3Description"]</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-4">
                            <div class="text-center step-card h-100 p-3">
                                <div class="step-number bg-info text-white rounded-circle mx-auto mb-3">4</div>
                                <i class="fas fa-download fa-2x text-info mb-3"></i>
                                <h6 class="fw-bold">@Localizer["Step4Title"]</h6>
                                <p class="small text-muted">@Localizer["Step4Description"]</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Guides by QR Type -->
    <div class="row">
        <div class="col-12">
            <h2 class="text-center text-primary mb-5">
                <i class="fas fa-cogs me-2"></i>@Localizer["DetailedGuides"]
            </h2>
        </div>
    </div>

    <!-- URL/Link Guide -->
    <div class="row mb-5">
        <div class="col-lg-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-primary">
                        <i class="fas fa-link me-2"></i>@Localizer["URLQRGuide"]
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">@Localizer["URLQRGuideDesc"]</p>
                    <ol class="small">
                        <li>@Localizer["URLGuideStep1"]</li>
                        <li>@Localizer["URLGuideStep2"]</li>
                        <li>@Localizer["URLGuideStep3"]</li>
                        <li>@Localizer["URLGuideStep4"]</li>
                    </ol>
                    <div class="alert alert-info border-0 small">
                        <i class="fas fa-lightbulb me-1"></i><strong>@Localizer["Tips"]:</strong> @Localizer["URLGuideTips"]
                    </div>
                </div>
            </div>
        </div>

        <!-- WiFi Guide -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-primary">
                        <i class="fas fa-wifi me-2"></i>@Localizer["WiFiQRGuide"]
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">@Localizer["WiFiQRGuideDesc"]</p>
                    <ol class="small">
                        <li>@Localizer["WiFiGuideStep1"]</li>
                        <li>@Localizer["WiFiGuideStep2"]</li>
                        <li>@Localizer["WiFiGuideStep3"]</li>
                        <li>@Localizer["WiFiGuideStep4"]</li>
                    </ol>
                    <div class="alert alert-warning border-0 small">
                        <i class="fas fa-shield-alt me-1"></i><strong>@Localizer["Security"]:</strong> @Localizer["WiFiGuideSecurity"]
                    </div>
                </div>
            </div>
        </div>

        <!-- vCard Guide -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-primary">
                        <i class="fas fa-address-card me-2"></i>@Localizer["VCardQRGuide"]
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">@Localizer["VCardQRGuideDesc"]</p>
                    <ol class="small">
                        <li>@Localizer["VCardGuideStep1"]</li>
                        <li>@Localizer["VCardGuideStep2"]</li>
                        <li>@Localizer["VCardGuideStep3"]</li>
                        <li>@Localizer["VCardGuideStep4"]</li>
                        <li>@Localizer["VCardGuideStep5"]</li>
                    </ol>
                    <div class="alert alert-success border-0 small">
                        <i class="fas fa-mobile-alt me-1"></i><strong>@Localizer["Compatibility"]:</strong> @Localizer["VCardGuideCompat"]
                    </div>
                </div>
            </div>
        </div>

        <!-- WhatsApp Guide -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-primary">
                        <i class="fab fa-whatsapp me-2"></i>@Localizer["WhatsAppQRGuide"]
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">@Localizer["WhatsAppQRGuideDesc"]</p>
                    <ol class="small">
                        <li>@Localizer["WhatsAppGuideStep1"]</li>
                        <li>@Localizer["WhatsAppGuideStep2"]</li>
                        <li>@Localizer["WhatsAppGuideStep3"]</li>
                        <li>@Localizer["WhatsAppGuideStep4"]</li>
                    </ol>
                    <div class="alert alert-info border-0 small">
                        <i class="fas fa-info-circle me-1"></i><strong>@Localizer["Note"]:</strong> @Localizer["WhatsAppGuideNote"]
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Advanced Features -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">
                        <i class="fas fa-star me-2"></i>@Localizer["AdvancedFeatures"]
                    </h4>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-lg-4 mb-4">
                            <div class="feature-item text-center p-3">
                                <i class="fas fa-palette fa-3x text-primary mb-3"></i>
                                <h6 class="fw-bold">@Localizer["CustomDesign"]</h6>
                                <p class="small text-muted">@Localizer["CustomDesignDesc"]</p>
                                <ul class="small text-start">
                                    <li>@Localizer["ChangeColors"]</li>
                                    <li>@Localizer["AdjustSize"]</li>
                                    <li>@Localizer["SetMargins"]</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="feature-item text-center p-3">
                                <i class="fas fa-image fa-3x text-success mb-3"></i>
                                <h6 class="fw-bold">@Localizer["LogoIntegration"] <span class="badge bg-warning small">Premium</span></h6>
                                <p class="small text-muted">@Localizer["LogoIntegrationDesc"]</p>
                                <ul class="small text-start">
                                    <li>@Localizer["UploadLogo"]</li>
                                    <li>@Localizer["AdjustLogoSize"]</li>
                                    <li>@Localizer["ColorMatching"]</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <div class="feature-item text-center p-3">
                                <i class="fas fa-download fa-3x text-info mb-3"></i>
                                <h6 class="fw-bold">@Localizer["MultipleFormats"]</h6>
                                <p class="small text-muted">@Localizer["MultipleFormatsDesc"]</p>
                                <ul class="small text-start">
                                    <li>@Localizer["PNGFormat"]</li>
                                    <li>@Localizer["SVGFormat"]</li>
                                    <li>@Localizer["PDFFormat"]</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Best Practices -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card bg-light border-0">
                <div class="card-body p-5">
                    <h3 class="text-center text-primary mb-4">
                        <i class="fas fa-thumbs-up me-2"></i>@Localizer["BestPractices"]
                    </h3>
                    <div class="row">
                        <div class="col-lg-6">
                            <h6 class="text-success mb-3">
                                <i class="fas fa-check-circle me-2"></i>@Localizer["DoBest"]
                            </h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice1"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice2"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice3"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice4"]
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-6">
                            <h6 class="text-danger mb-3">
                                <i class="fas fa-times-circle me-2"></i>@Localizer["AvoidMistakes"]
                            </h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake1"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake2"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake3"]
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake4"]
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Troubleshooting -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-secondary">
                <div class="card-header bg-secondary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-tools me-2"></i>@Localizer["Troubleshooting"]
                    </h4>
                </div>
                <div class="card-body p-4">
                    <div class="accordion" id="troubleshootingAccordion">
                        
                        <!-- QR Code not scanning -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
                                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                    <strong>@Localizer["TroubleQRNotScanning"]</strong>
                                </button>
                            </h2>
                            <div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                <div class="accordion-body">
                                    <h6>@Localizer["PossibleCauses"]:</h6>
                                    <ul class="small">
                                        <li>@Localizer["TroubleCause1"]</li>
                                        <li>@Localizer["TroubleCause2"]</li>
                                        <li>@Localizer["TroubleCause3"]</li>
                                    </ul>
                                    <h6>@Localizer["Solutions"]:</h6>
                                    <ul class="small">
                                        <li>@Localizer["TroubleSolution1"]</li>
                                        <li>@Localizer["TroubleSolution2"]</li>
                                        <li>@Localizer["TroubleSolution3"]</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Generation is slow -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
                                    <i class="fas fa-hourglass-half text-info me-2"></i>
                                    <strong>@Localizer["TroubleSlowGeneration"]</strong>
                                </button>
                            </h2>
                            <div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                <div class="accordion-body">
                                    <h6>@Localizer["ImprovementTips"]:</h6>
                                    <ul class="small">
                                        <li>@Localizer["SpeedTip1"]</li>
                                        <li>@Localizer["SpeedTip2"]</li>
                                        <li>@Localizer["SpeedTip3"]</li>
                                        <li>@Localizer["SpeedTip4"]</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Download issues -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
                                    <i class="fas fa-download text-success me-2"></i>
                                    <strong>@Localizer["TroubleDownloadIssues"]</strong>
                                </button>
                            </h2>
                            <div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                <div class="accordion-body">
                                    <h6>@Localizer["CommonSolutions"]:</h6>
                                    <ul class="small">
                                        <li>@Localizer["DownloadSolution1"]</li>
                                        <li>@Localizer["DownloadSolution2"]</li>
                                        <li>@Localizer["DownloadSolution3"]</li>
                                        <li>@Localizer["DownloadSolution4"]</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Get Started CTA -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-primary text-white text-center">
                <div class="card-body p-5">
                    <h3 class="mb-3">@Localizer["ReadyToStart"]</h3>
                    <p class="mb-4">@Localizer["ReadyToStartDesc"]</p>
                    <a href="@Url.Action("Index", "Home")" class="btn btn-light btn-lg">
                        <i class="fas fa-rocket me-2"></i>@Localizer["StartGenerating"]
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Ad Space Footer (conditional) -->
@await Html.PartialAsync("_AdSpace", new { position = "footer" })

<style>
.step-card {
    transition: transform 0.3s ease;
    border: 2px solid transparent;
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: var(--bs-primary);
}

.step-number {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
}

.feature-item {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 8px;
}

.feature-item:hover {
    border-color: var(--bs-primary);
    background-color: rgba(0,123,255,0.05);
}

.card {
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
</style>