@extends('layouts.app')
@section('title', "L'Usine & L'Equipe")
@section('meta_description', 'Visitez virtuellement l\'usine GAMA SAC : 2 000 m², 50 000 sacs/jour, 45 collaborateurs. Machines, certifications et equipe.')

@section('content')

{{-- ===== HERO VIDÉO ===== --}}
<section class="usine-hero">
    {{-- Vidéo en arrière-plan --}}
    <video class="usine-hero-video"
           autoplay
           muted
           loop
           playsinline
           poster="{{ asset('images/usine-poster.jpg') }}">
        <source src="{{ asset('videos/usine.mp4') }}" type="video/mp4">
    </video>

    {{-- Overlay sombre --}}
    <div class="usine-hero-overlay"></div>

    {{-- Contenu --}}
    <div class="usine-hero-content">
        <span class="usine-hero-tag">🏭 VISITE VIRTUELLE</span>
        <h1 class="usine-hero-title">
            L'usine qui fabrique<br>
            <span style="color:#d4a843;">chaque sac.</span>
        </h1>
        <p class="usine-hero-desc">
            2 000 m² de production · 50 000 sacs/jour · 45 collaborateurs passionnés
        </p>
        <div class="usine-hero-actions">
            <a href="{{ route('quote') }}" class="usine-btn-gold">
                📋 Demander un devis
            </a>
            <a href="{{ route('contact') }}" class="usine-btn-outline">
                📍 Organiser une visite
            </a>
        </div>

        {{-- Scroll indicator --}}
        <div class="usine-scroll-indicator">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
    </div>
</section>

{{-- ===== CHIFFRES CLÉS ===== --}}
<section class="usine-kpis">
    <div class="usine-container">
        <div class="usine-kpis-grid">
            @foreach([
                ['2 000 m²',   'Surface de production',      '#1a7a4a'],
                ['50 000',     'Sacs fabriqués par jour',     '#d4a843'],
                ['45',         'Collaborateurs',              '#2563eb'],
                ['10+',        'Années d\'expérience',        '#dc2626'],
                ['3',          'Lignes de production',        '#7c3aed'],
                ['500+',       'Clients professionnels',      '#059669'],
            ] as [$num, $label, $color])
                <div class="usine-kpi-item">
                    <div class="usine-kpi-num" style="color:{{ $color }}">{{ $num }}</div>
                    <div class="usine-kpi-label">{{ $label }}</div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ===== SECTION VIDÉO PRINCIPALE (replay) ===== --}}
<section class="usine-section usine-video-section">
    <div class="usine-container">
        <div class="usine-section-header">
            <span class="usine-tag">TOUR DE L'USINE</span>
            <h2 class="usine-section-title">Découvrez notre usine en vidéo</h2>
            <p class="usine-section-desc">
                Une vue complète de nos installations : de la réception du papier jusqu'à l'expédition des sacs finis.
            </p>
        </div>

        <div class="usine-video-player">
            <video controls
                   preload="metadata"
                   poster="{{ asset('images/usine-poster.jpg') }}"
                   class="usine-video-main">
                <source src="{{ asset('videos/usine.mp4') }}" type="video/mp4">
                Votre navigateur ne supporte pas la lecture vidéo.
            </video>
        </div>
    </div>
</section>

{{-- ===== NOS MACHINES ===== --}}
<section class="usine-section" style="background:#f9fafb;">
    <div class="usine-container">
        <div class="usine-section-header">
            <span class="usine-tag">EQUIPEMENT</span>
            <h2 class="usine-section-title">Nos machines & capacités</h2>
        </div>

        <div class="usine-machines-grid">
            @foreach([
                ['🖨', 'Presse Flexo 6 couleurs',      'Impression haute définition jusqu\'à 6 couleurs Pantone. Cadence : 15 000 unités/heure.', ['6 couleurs Pantone', '15 000 u/h', 'Format max 800mm']],
                ['⚙️', 'Ligne de façonnage automatique','Découpe, pliage, collage et pose des poignées en une seule passe.', ['Précision ±1mm', '8 000 sacs/h', '3 lignes actives']],
                ['🔪', 'Presse découpe numérique',      'Formes complexes, fenêtres, poignées intégrées et finitions spéciales.', ['Découpe CNC', 'Formes libres', 'Prototype 24h']],
                ['📦', 'Ligne emballage automatique',   'Comptage, emballage et palettisation automatiques avant expédition.', ['Comptage auto', 'Palettisation robot', 'Étiquetage inclus']],
                ['🌡', 'Contrôle qualité',              'Contrôle automatique des dimensions, résistance et conformité impression.', ['100% lots contrôlés', 'Rapport qualité', 'ISO 9001']],
                ['🌿', 'Gestion papier certifié',       'Approvisionnement exclusif en papier certifié FSC® et PEFC.', ['Stocks 50 tonnes', 'FSC® & PEFC', 'Traçabilité garantie']],
            ] as [$icon, $name, $desc, $features])
                <div class="usine-machine-card">
                    <div class="usine-machine-icon">{{ $icon }}</div>
                    <h3 class="usine-machine-name">{{ $name }}</h3>
                    <p class="usine-machine-desc">{{ $desc }}</p>
                    <ul class="usine-machine-features">
                        @foreach($features as $f)
                            <li>
                                <svg width="12" height="12" fill="none" stroke="#1a7a4a" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                {{ $f }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ===== PHOTOS ATELIER ===== --}}
<section class="usine-section">
    <div class="usine-container">
        <div class="usine-section-header">
            <span class="usine-tag">GALERIE</span>
            <h2 class="usine-section-title">L'atelier en images</h2>
        </div>

        <div class="usine-gallery-grid">

            {{-- Grande image principale --}}
            <div class="usine-gallery-item usine-gallery-large">
                <img src="{{ asset('images/atelier-general.jpg') }}"
                     alt="Vue générale de l'atelier GAMA SAC"
                     class="usine-gallery-img">
            </div>

            {{-- Petites images --}}
            @foreach([
                ['Machine impression.JPG',   'Machine d\'impression'],
                ['Rouleaux de papier.JPG',   'Rouleaux de papier'],
                ['Ligne de faconnage.JPG',   'Ligne de façonnage'],
                ['Controle qualite.JPG',     'Contrôle qualité'],
                ['Zone de stockage.JPG',     'Zone de stockage'],
            ] as [$file, $alt])
                <div class="usine-gallery-item">
                    <img src="{{ asset('images/' . rawurlencode($file)) }}"
                         alt="{{ $alt }}"
                         class="usine-gallery-img">
                </div>
            @endforeach

        </div>
    </div>
</section>

{{-- ===== CERTIFICATIONS ===== --}}
<section class="usine-section" style="background:#f9fafb;">
    <div class="usine-container">
        <div class="usine-section-header">
            <span class="usine-tag">NOS GARANTIES</span>
            <h2 class="usine-section-title">Certifications & normes</h2>
        </div>

        <div class="usine-certs-grid">
            @foreach([
                ['FSC®',              'Forest Stewardship Council', 'Papier issu de forêts gérées de manière responsable.',        '#1a7a4a', '#f0faf5'],
                ['ISO 9001',          'Management Qualité',         'Processus de production aux plus hautes exigences internationales.','#2563eb', '#eff6ff'],
                ['PEFC',              'Gestion Durable',            'Certification complémentaire pour la gestion durable des forêts.', '#16a34a', '#f0fdf4'],
                ['CE Alimentaire',    'Norme EN 13432',             'Sacs alimentaires conformes aux normes européennes de contact.',  '#dc2626', '#fef2f2'],
            ] as [$cert, $full, $desc, $color, $bg])
                <div class="usine-cert-card" style="background:{{ $bg }}; border-color:{{ $color }}20;">
                    <div class="usine-cert-badge" style="color:{{ $color }};">{{ $cert }}</div>
                    <h4 class="usine-cert-name">{{ $full }}</h4>
                    <p class="usine-cert-desc">{{ $desc }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ===== L'ÉQUIPE ===== --}}
<section class="usine-section">
    <div class="usine-container">
        <div class="usine-section-header">
            <span class="usine-tag">NOS COLLABORATEURS</span>
            <h2 class="usine-section-title">L'équipe GAMA SAC</h2>
            <p class="usine-section-desc">45 professionnels passionnés au service de chaque commande.</p>
        </div>

        <div class="usine-team-grid">
            @foreach([
                ['Mohamed Ben Ali',    'Directeur Général',       'Fondateur de GAMA SAC, 20 ans d\'expérience dans l\'industrie papetière tunisienne.'],
                ['Leila Cherif',       'Directrice Commerciale',  'Spécialiste B2B, elle gère les comptes clients et les devis sur mesure depuis 8 ans.'],
                ['Sami Turki',         'Responsable Production',  'Ingénieur procédés, garant de la qualité et des délais sur nos 3 lignes de production.'],
            ] as [$name, $title, $bio])
                <div class="usine-team-card">
                    <div class="usine-team-avatar">
                        {{ substr($name, 0, 1) }}
                    </div>
                    <h3 class="usine-team-name">{{ $name }}</h3>
                    <p class="usine-team-title">{{ $title }}</p>
                    <p class="usine-team-bio">{{ $bio }}</p>
                </div>
            @endforeach
        </div>

        <div class="usine-team-note">
            📸 <strong>Conseil :</strong> Ajoutez les vraies photos de votre équipe et de l'atelier.
            Les acheteurs B2B font davantage confiance aux usines qui montrent leurs équipes.
        </div>
    </div>
</section>

{{-- ===== CTA ===== --}}
<section class="usine-cta-section">
    <div class="usine-container" style="text-align:center;">
        <h2 class="usine-cta-title">Venez visiter notre usine</h2>
        <p class="usine-cta-desc">
            Nous accueillons nos clients professionnels pour des visites sur rendez-vous.<br>
            Venez voir nos lignes de production en action.
        </p>
        <div class="usine-cta-actions">
            <a href="{{ route('contact') }}" class="usine-btn-gold">
                📍 Organiser une visite →
            </a>
            <a href="{{ route('quote') }}" class="usine-btn-outline-dark">
                📋 Demander un devis
            </a>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
/* ===== HERO VIDÉO ===== */
.usine-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0f172a;
}
.usine-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.usine-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.5) 50%,
        rgba(0,0,0,0.7) 100%
    );
}
.usine-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    padding: 0 20px;
    max-width: 800px;
}
.usine-hero-tag {
    display: inline-block;
    background: rgba(26,122,74,0.8);
    border: 1px solid rgba(26,122,74,0.6);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 24px;
}
.usine-hero-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px;
}
.usine-hero-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
    font-weight: 500;
}
.usine-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.usine-btn-gold {
    background: #d4a843;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 13px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}
.usine-btn-gold:hover { background: #b08930; color: #fff; }
.usine-btn-outline {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 13px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}
.usine-btn-outline:hover { background: rgba(255,255,255,0.2); color: #fff; }
.usine-scroll-indicator {
    margin-top: 48px;
    animation: bounce 2s infinite;
    color: rgba(255,255,255,0.5);
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

/* ===== KPIS ===== */
.usine-kpis {
    background: #1a7a4a;
    padding: 32px 24px;
}
.usine-kpis-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    text-align: center;
}
.usine-kpi-num   { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.usine-kpi-label { font-size: 0.72rem; color: rgba(255,255,255,0.75); margin-top: 4px; font-weight: 500; }

/* ===== LAYOUT GÉNÉRAL ===== */
.usine-container  { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.usine-section    { padding: 80px 0; }
.usine-section-header { text-align: center; margin-bottom: 56px; }
.usine-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #1a7a4a;
    background: #f0faf5;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.usine-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #0f172a;
    margin: 8px 0 12px;
}
.usine-section-desc { font-size: 0.95rem; color: #64748b; max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* ===== VIDÉO PLAYER ===== */
.usine-video-section { background: #fff; }
.usine-video-player {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    background: #000;
    max-width: 900px;
    margin: 0 auto;
}
.usine-video-main {
    width: 100%;
    display: block;
    max-height: 540px;
    object-fit: cover;
}

/* ===== MACHINES ===== */
.usine-machines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.usine-machine-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    transition: box-shadow 0.2s;
}
.usine-machine-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.usine-machine-icon  { font-size: 2rem; margin-bottom: 14px; }
.usine-machine-name  { font-size: 0.95rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.usine-machine-desc  { font-size: 0.8rem; color: #64748b; line-height: 1.6; margin-bottom: 14px; }
.usine-machine-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.usine-machine-features li { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #374151; }

/* ===== GALERIE ===== */
.usine-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
}
.usine-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
}
.usine-gallery-item {
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    min-height: 160px;
}
.usine-gallery-large { min-height: 340px; }
.usine-gallery-placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-align: center;
    padding: 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
}
.usine-gallery-placeholder p    { font-size: 0.82rem; font-weight: 600; margin: 8px 0 4px; }
.usine-gallery-placeholder small { font-size: 0.68rem; color: #94a3b8; font-family: monospace; }
.usine-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: inherit;
}
/* ===== CERTIFICATIONS ===== */
.usine-certs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.usine-cert-card {
    border: 1.5px solid;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}
.usine-cert-badge { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.usine-cert-name  { font-size: 0.82rem; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.usine-cert-desc  { font-size: 0.75rem; color: #64748b; line-height: 1.5; margin: 0; }

/* ===== ÉQUIPE ===== */
.usine-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 28px;
}
.usine-team-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: box-shadow 0.2s;
}
.usine-team-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.usine-team-avatar {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, #1a7a4a, #22a05e);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0 auto 16px;
}
.usine-team-name  { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.usine-team-title { font-size: 0.78rem; font-weight: 600; color: #1a7a4a; margin: 0 0 12px; }
.usine-team-bio   { font-size: 0.8rem; color: #64748b; line-height: 1.6; margin: 0; }
.usine-team-note  {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.85rem;
    color: #92400e;
    text-align: center;
}

/* ===== CTA FINAL ===== */
.usine-cta-section {
    background: linear-gradient(135deg, #0f3d24, #1a7a4a);
    padding: 80px 24px;
    text-align: center;
    color: #fff;
}
.usine-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 16px;
}
.usine-cta-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin: 0 auto 36px;
    max-width: 500px;
    line-height: 1.7;
}
.usine-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.usine-btn-outline-dark {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 13px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}
.usine-btn-outline-dark:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .usine-kpis-grid     { grid-template-columns: repeat(3, 1fr); }
    .usine-machines-grid { grid-template-columns: repeat(2, 1fr); }
    .usine-certs-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .usine-hero          { height: 85vh; }
    .usine-hero-title    { font-size: 2rem; }
    .usine-kpis-grid     { grid-template-columns: repeat(2, 1fr); }
    .usine-machines-grid { grid-template-columns: 1fr; }
    .usine-gallery-grid  { grid-template-columns: 1fr; }
    .usine-gallery-large { grid-column: span 1; grid-row: span 1; }
    .usine-certs-grid    { grid-template-columns: 1fr 1fr; }
    .usine-team-grid     { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .usine-kpis-grid  { grid-template-columns: repeat(2, 1fr); }
    .usine-certs-grid { grid-template-columns: 1fr; }
}
</style>
@endpush

@push('scripts')
<script>
// Pause la vidéo hero quand l'utilisateur scrolle loin
window.addEventListener('scroll', function () {
    var heroVideo = document.querySelector('.usine-hero-video');
    if (!heroVideo) return;
    if (window.scrollY > window.innerHeight) {
        heroVideo.pause();
    } else {
        heroVideo.play().catch(function(){});
    }
});
</script>
@endpush