{% extends "base.html" %}

{% load static %}

{% block content %}
<link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
<style>
    :root {
        --color-primary: #205397;
        --color-accent: #e90707;
        --color-dark: #1E1E1E;
        --color-light-blue: #4A90E2;
        --color-white: #FFFFFF;
        --font-main: "Roboto", sans-serif;
    }

    body {
        font-family: var(--font-main);
        background-color: #ffffff;
        overflow-x: hidden;
    }

    /* --- HERO SECTION --- */
    .hero-custom {
        height: 700px;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #000;
        overflow: hidden;
    }

    .hero-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1600&h=900&fit=crop');
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1;
    }

    /* Le bloc blanc avec forme zig-zag */
    .hero-white-block {
        position: relative;
        z-index: 10;
        background: #ffffff;
        width: 55%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 60px;
        clip-path: polygon(
            0% 0%, 
            60% 0%, 
            60% 18%, 
            70% 20%, 
            100% 20%, 
            100% 80%, 
            70% 82%, 
            60% 84%, 
            60% 100%, 
            0% 100%
        );
        box-shadow: 20px 0 50px rgba(0,0,0,0.2);
    }

    /* Barre rouge décorative */
    .hero-white-block::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 12px;
        background: var(--color-accent);
    }

    .hero-text-container {
        max-width: 550px;
        padding-right: 40px;
        z-index: 15;
    }

    .title-bts {
        font-size: 3rem;
        font-weight: 900;
        color: var(--color-dark);
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .badge-domaine {
        display: inline-block;
        background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
        color: white;
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .badge-niveau {
        display: inline-block;
        background: var(--color-accent);
        color: white;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-left: 10px;
    }

    .red-bar-hero {
        width: 80px;
        height: 6px;
        background: var(--color-accent);
    }

    @media (max-width: 1200px) {
        .title-bts { font-size: 2.5rem; }
        .hero-white-block { width: 70%; }
    }

    @media (max-width: 992px) {
        .hero-custom { height: auto; padding: 50px 0; }
        .hero-bg-image { 
            background-attachment: scroll;
            opacity: 0.3;
        }
        .hero-white-block { 
            width: 95%; 
            height: auto; 
            margin: 0 auto; 
            padding: 60px 20px; 
            justify-content: center; 
            clip-path: none;
            border-bottom: 10px solid var(--color-accent);
            background: rgba(255,255,255,0.95);
        }
        .hero-white-block::after { display: none; }
        .hero-text-container { 
            text-align: center; 
            padding-left: 0; 
            padding-right: 0; 
        }
        .red-bar-hero { margin: 0 auto; }
        .title-bts { font-size: 2rem; }
    }

    @media (max-width: 576px) {
        .title-bts { font-size: 1.6rem; }
        .badge-domaine { font-size: 0.7rem; }
    }

    /* --- SECTIONS CONTENU --- */
    .section-padding { padding: 90px 0; }
    .bg-light { background-color: #f8f9fa; }

    .section-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--color-primary);
        margin-bottom: 30px;
    }

    .section-subtitle {
        font-size: 1rem;
        color: #666;
        margin-bottom: 40px;
    }

    .card-info {
        background: white;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        height: 100%;
        border-left: 5px solid var(--color-accent);
    }

    .info-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, rgba(32,83,151,0.1), rgba(74,144,226,0.1));
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .info-icon i {
        font-size: 1.5rem;
        color: var(--color-primary);
    }

    .table-program {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }

    .table-program thead {
        background-color: var(--color-primary);
        color: white;
    }

    .table-program thead th {
        padding: 12px 15px;
        font-weight: 600;
    }

    .table-program tbody td {
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .stat-box {
        text-align: center;
        padding: 30px;
    }
    .stat-number { font-size: 3.5rem; font-weight: 900; color: var(--color-accent); }

    .list-custom {
        list-style: none;
        padding-left: 0;
    }
    .list-custom li {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .list-custom i {
        color: var(--color-accent);
        width: 20px;
    }

    .skill-tag {
        display: inline-block;
        background: rgba(32,83,151,0.1);
        color: var(--color-primary);
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 0.85rem;
        font-weight: 500;
        margin: 5px;
    }

    @media (max-width: 768px) {
        .section-padding { padding: 50px 0; }
        .section-title { font-size: 1.8rem; }
        .stat-number { font-size: 2.5rem; }
        .table-program thead th,
        .table-program tbody td {
            padding: 8px 10px;
            font-size: 0.85rem;
        }
    }

    .btn-custom:hover {
        background: #cc0000 !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(233,7,7,0.3);
    }
    .text-accent {
        color: var(--color-accent);
    }
    .nav-tabs .nav-link {
        color: var(--color-dark);
    }
    .nav-tabs .nav-link.active {
        color: var(--color-accent);
        font-weight: 700;
        border-bottom-color: var(--color-accent);
    }
</style>

<!-- HERO SECTION -->
<section class="hero-custom">
    <div class="hero-white-block">
        <div class="hero-text-container">
            <div class="badge-domaine">
                <i class="fas fa-globe" style="margin-right: 8px;"></i> Commerce et International
                <span class="badge-niveau">BAC+2</span>
            </div>
            <h1 class="title-bts">BTS<br>Commerce International</h1>
            <div class="red-bar-hero"></div>
            <p class="mt-3 text-muted" style="font-size: 0.9rem;">Brevet de Technicien Supérieur</p>
        </div>
    </div>
    <div class="hero-bg-image"></div>
</section>

<!-- INFOS FORMATION -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-7">
                <h2 class="section-title">Présentation du Diplôme</h2>
                <p class="lead fw-bold text-primary">BTS Commerce International</p>
                <p>Cette formation prépare les étudiants à gérer les opérations commerciales internationales, les échanges économiques et les relations avec les partenaires étrangers. Le programme allie théorie et pratique pour former des assistants compétents et opérationnels.</p>
                
                <div class="mt-5">
                    <h4 class="fw-bold mb-3"><i class="fas fa-bullseye text-primary me-2"></i> Objectifs de la formation</h4>
                    <p>Former des techniciens supérieurs capables de :</p>
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Gérer les opérations d'importation et d'exportation</li>
                        <li><i class="fas fa-check-circle"></i> Négocier avec des partenaires internationaux</li>
                        <li><i class="fas fa-check-circle"></i> Analyser les marchés étrangers</li>
                        <li><i class="fas fa-check-circle"></i> Maîtriser les techniques douanières</li>
                        <li><i class="fas fa-check-circle"></i> Gérer les moyens de paiement internationaux</li>
                    </ul>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-shield-alt text-primary me-2"></i> Compétences acquises</h4>
                    <div>
                        <span class="skill-tag">Techniques du commerce international</span>
                        <span class="skill-tag">Négociation commerciale</span>
                        <span class="skill-tag">Gestion des importations et exportations</span>
                        <span class="skill-tag">Marketing international</span>
                        <span class="skill-tag">Communication professionnelle</span>
                        <span class="skill-tag">Droit des affaires internationales</span>
                        <span class="skill-tag">Logistique internationale</span>
                    </div>
                </div>

                <div class="mt-4">
                    <h4 class="fw-bold mb-3"><i class="fas fa-microchip text-primary me-2"></i> Outils utilisés</h4>
                    <div>
                        <span class="skill-tag">Logiciels de gestion commerciale</span>
                        <span class="skill-tag">Outils bureautiques</span>
                        <span class="skill-tag">Techniques de communication digitale</span>
                        <span class="skill-tag">Analyse de marchés internationaux</span>
                        <span class="skill-tag">CRM (Salesforce)</span>
                        <span class="skill-tag">ERP type Odoo</span>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5">
                <div class="card-info">
                    <div class="info-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h4 class="fw-bold mb-4">Détails Pratiques</h4>
                    <p><strong><i class="fas fa-clock me-2 text-accent"></i> Durée :</strong> 2 ans (4 semestres)</p>
                    <p><strong><i class="fas fa-graduation-cap me-2 text-accent"></i> Crédits :</strong> 120 crédits (30 crédits/semestre)</p>
                    <p><strong><i class="fas fa-calendar me-2 text-accent"></i> Rentrée :</strong> Octobre 2026</p>
                    <hr>
                    <h5 class="fw-bold text-primary">Coûts de la formation</h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Droit d'inscription :</span>
                        <span class="fw-bold">35 000 F CFA / an</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Frais de scolarité :</span>
                        <span class="fw-bold">385 000 F CFA / an</span>
                    </div>
                    <p class="small text-muted">Plusieurs modalités de paiement disponibles (3 tranches ou 7 mensualités).</p>
                    <hr>
                    <a href="#" class="btn-custom" style="display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: white; padding: 12px 25px; border-radius: 40px; text-decoration: none; font-weight: 600; margin-top: 15px;">
                        <i class="fas fa-file-signature"></i> S'inscrire
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PROGRAMME DE FORMATION -->
<section class="section-padding bg-light">
    <div class="container">
        <h2 class="section-title text-center">Programme de la formation</h2>
        <p class="text-center section-subtitle">Découvrez les matières enseignées durant les 2 années du BTS</p>
        
        <div class="row mt-4">
            <div class="col-12">
                <ul class="nav nav-tabs mb-4 justify-content-center" id="myTab" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active fw-bold" data-bs-toggle="tab" data-bs-target="#year1">1ère Année</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link fw-bold" data-bs-toggle="tab" data-bs-target="#year2">2ème Année</button>
                    </li>
                </ul>
                
                <div class="tab-content bg-white p-4 rounded shadow-sm">
                    <!-- 1ère Année -->
                    <div class="tab-pane fade show active" id="year1">
                        <div class="table-responsive">
                            <table class="table table-program">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Intitulé</th>
                                        <th>Type UE</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>COM101</td>
                                        <td>Fondamentaux du commerce international</td>
                                        <td>F</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>COM102</td>
                                        <td>Économie internationale</td>
                                        <td>F</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>COM103</td>
                                        <td>Techniques douanières et logistique</td>
                                        <td>F</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM104</td>
                                        <td>Anglais des affaires</td>
                                        <td>F</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM105</td>
                                        <td>Droit des affaires internationales</td>
                                        <td>F</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>COM106</td>
                                        <td>Outils bureautiques avancés</td>
                                        <td>T</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM107</td>
                                        <td>Communication professionnelle</td>
                                        <td>C</td>
                                        <td>3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 2ème Année -->
                    <div class="tab-pane fade" id="year2">
                        <div class="table-responsive">
                            <table class="table table-program">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Intitulé</th>
                                        <th>Type UE</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>COM201</td>
                                        <td>Négociation commerciale internationale</td>
                                        <td>F</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>COM202</td>
                                        <td>Marketing international</td>
                                        <td>F</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>COM203</td>
                                        <td>Gestion des risques et paiements internationaux</td>
                                        <td>F</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM204</td>
                                        <td>Études de marchés étrangers</td>
                                        <td>F</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM205</td>
                                        <td>Projet technique</td>
                                        <td>S</td>
                                        <td>4</td>
                                    </tr>
                                    <tr>
                                        <td>COM206</td>
                                        <td>Stage professionnel (8-10 semaines)</td>
                                        <td>S</td>
                                        <td>6</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CERTIFICATIONS -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <h2 class="section-title">Certifications préparées</h2>
                <p>En plus de votre diplôme, vous aurez l'opportunité de préparer des certifications reconnues dans le domaine du commerce international :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-certificate text-accent"></i> TOEIC (score 750+ recommandé)</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certification en douanes et commerce international (CCI)</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certificat de négociation interculturelle</li>
                    <li><i class="fas fa-certificate text-accent"></i> Certification Incoterms 2020</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <div class="card-info text-center" style="border-left: none; background: linear-gradient(135deg, rgba(32,83,151,0.05), rgba(74,144,226,0.05));">
                    <i class="fas fa-plane" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Opportunités de mobilité</h4>
                    <p class="text-muted">Partenariats avec des entreprises et possibilité de stage à l'international</p>
                    <div style="margin-top: 20px;">
                        <span class="skill-tag">Échanges culturels</span>
                        <span class="skill-tag">Stages en entreprise</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- DÉBOUCHÉS -->
<section class="section-padding bg-light">
    <div class="container">
        <h2 class="section-title text-center">Débouchés professionnels</h2>
        <p class="text-center section-subtitle">À l'issue de cette formation, de nombreuses opportunités s'offrent à vous</p>
        
        <div class="row g-4 mt-4">
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Assistant commercial international</h4>
                    <p class="text-muted">Support aux opérations d'import-export</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-ship"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Chargé import-export</h4>
                    <p class="text-muted">Gestion des opérations douanières</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Commercial international</h4>
                    <p class="text-muted">Développement des marchés étrangers</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Assistant marketing</h4>
                    <p class="text-muted">Études de marché et promotion</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card-info text-center" style="border-left: none; border-top: 5px solid var(--color-accent);">
                    <div class="info-icon mx-auto">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h4 class="fw-bold mt-3">Logisticien international</h4>
                    <p class="text-muted">Coordination des flux internationaux</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SECTEURS D'ACTIVITÉ -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-7">
                <h2 class="section-title">Secteurs d'activité</h2>
                <p>Les diplômés de ce BTS sont recherchés dans de nombreux secteurs :</p>
                <ul class="list-custom mt-4">
                    <li><i class="fas fa-check-circle"></i> Entreprises d'import-export</li>
                    <li><i class="fas fa-check-circle"></i> Transitaire et commissionnaire de transport</li>
                    <li><i class="fas fa-check-circle"></i> Services commerciaux des entreprises</li>
                    <li><i class="fas fa-check-circle"></i> Agences en douane</li>
                    <li><i class="fas fa-check-circle"></i> Compagnies maritimes et aériennes</li>
                    <li><i class="fas fa-check-circle"></i> Administrations publiques (douanes)</li>
                </ul>
            </div>
            <div class="col-lg-5">
                <div class="card-info text-center" style="border-left: none; background: white;">
                    <i class="fas fa-graduation-cap" style="font-size: 3rem; color: var(--color-accent); margin-bottom: 20px;"></i>
                    <h4 class="fw-bold">Poursuites d'études</h4>
                    <p class="text-muted">Licence Commerce International<br>
                    Bachelor Management International<br>
                    Master Logistique Internationale</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PIÈCES À FOURNIR + CONDITIONS -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <h2 class="section-title">Conditions d'admission</h2>
                <div class="card-info" style="background: white;">
                    <ul class="list-custom">
                        <li><i class="fas fa-check-circle"></i> Être titulaire d'un BAC (séries A, B, C, D, E, F, G) ou équivalent</li>
                        <li><i class="fas fa-check-circle"></i> Avoir de bonnes bases en anglais et en gestion</li>
                        <li><i class="fas fa-check-circle"></i> Ouverture d'esprit et goût pour l'international</li>
                        <li><i class="fas fa-check-circle"></i> Admission sur dossier et entretien</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-lg-6">
                <h2 class="section-title">Pièces à fournir</h2>
                <div class="card-info" style="background: white;">
                    <ul class="list-custom">
                        <li><i class="fas fa-file-signature"></i> Fiche d'inscription à retirer au secrétariat</li>
                        <li><i class="fas fa-certificate"></i> Copie de l'attestation du BAC ou diplôme équivalent</li>
                        <li><i class="fas fa-heartbeat"></i> Certificat médical de moins de 3 mois</li>
                        <li><i class="fas fa-baby"></i> Copie de l'acte de naissance</li>
                        <li><i class="fas fa-portrait"></i> Deux photos d'identité récentes</li>
                        <li><i class="fas fa-id-card"></i> Copie de la carte d'identité ou passeport</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- CTA FINAL -->
<section style="padding: 80px 0; background: linear-gradient(135deg, var(--color-primary) 0%, #0d2a4d 100%); color: white; text-align: center;">
    <div class="container">
        <h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; color: white;">Prêt à rejoindre la formation ?</h2>
        <p style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 35px; opacity: 0.9;">Inscrivez-vous dès maintenant pour devenir un expert du commerce international</p>
        <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
            <a href="#" style="display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid white; color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                <i class="fas fa-calendar-alt"></i> S'inscrire maintenant
            </a>
        </div>
    </div>
</section>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

{% endblock %}