//
//  OnlyForPremierModal.swift
//
//
//  Created by Victor on 25/07/2024.
//

import SwiftUI

struct OnlyForPremierModal: View {
    
    var body: some View {
        NavigationView {
            ZStack(alignment: .top) {
                VStack(spacing: 48) {
                    ZStack {
                        ElipseShape()
                            .fill(Color.sqOrange(50))
                            .frame(height: 200)
                        VStack(alignment: .leading, spacing: 32) {
                            Image("only_for_premier")
                                .resizable()
                                .frame(width: 307, height: 108)
                        }
                    }
                    ZStack(alignment: .top) {
                        Color.white
                        VStack(spacing: 48) {
                            VStack(spacing: 24) {
                                SQText("Vous avez déjà répondu à 4 demandes de services ce mois-ci", size: 24, font: .bold)
                                    .multilineTextAlignment(.center)
                                VStack(alignment: .leading, spacing: 16) {
                                    SQText("Augmentez votre chiffre d’affaires en bénéficiant de tous les avantages inclus dans l’abonnement Premier.", font: .bold)
                                    VStack(alignment: .leading) {
                                        HStack {
                                            SQIcon(.check, size: .s, type: .solid, color: .sqOrange(50))
                                            SQText("Répondez aux demandes en illimité", font: .demiBold)
                                        }
                                        HStack {
                                            SQIcon(.check, size: .s, type: .solid, color: .sqOrange(50))
                                            SQText("Augmentez votre visibilité sur Google", font: .demiBold)
                                        }
                                        HStack {
                                            SQIcon(.check, size: .s, type: .solid, color: .sqOrange(50))
                                            SQText("Affichez votre numéro de téléphone sur votre profil", font: .demiBold)
                                        }
                                        HStack {
                                            SQIcon(.check, size: .s, type: .solid, color: .sqOrange(50))
                                            SQText("Gérez vos devis, factures, encaissements...", font: .demiBold)
                                        }
                                    }
                                }
                            }
                            .padding(.horizontal)
                            Spacer()
                            VStack(spacing: 16) {
                                VStack {
                                    SQText("Essai gratuit de 14 jours", size: 18, font: .bold)
                                    SQText("à partir de 29,99 € / mois")
                                }
                                SQButton("Je m'abonne", color: .sqOrange(50), textColor: .white) {
                                    
                                }
                            }
                            .padding(.horizontal, 16)
                            .padding(.vertical, 24)
                        }
                    }
                }
            }
            .edgesIgnoringSafeArea(.vertical)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button(action: {
                    }, label: {
                        SQIcon(.xmark, size: .l, color: .white)
                    })
                    .padding(16)
                }
            }
        }
    }
}

#Preview {
    OnlyForPremierModal()
}
