@extends('client.layouts.app')

@section('title', 'INGENIA NXT EXPERT')

@section('content')
<style>
    .ingenia-welcome-intro {
        margin-bottom: 24px;
    }

    .welcome-intro-card {
        background: linear-gradient(120deg, rgba(56, 98, 97, 0.95), rgba(108, 170, 167, 0.9));
        border-radius: 18px;
        padding: 20px;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
        box-shadow: 0 12px 24px rgba(43, 43, 43, 0.16);
        overflow: hidden;
    }

    .welcome-intro-text {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .welcome-intro-text .intro-kicker {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.18);
        padding: 6px 10px;
        border-radius: 999px;
        width: fit-content;
    }

    .welcome-intro-text p {
        margin: 0;
        font-size: 18px;
        line-height: 1.45;
        color: #f5f9f9;
    }

    .welcome-intro-video video {
        width: auto;
        max-height: 450px;
        margin-right: 50px;
        margin-left: auto;
        display: block;
        border-radius: 12px;
        background: #0f1f1f;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    }

    @media (max-width: 992px) {
        .welcome-intro-card {
            grid-template-columns: 1fr;
        }

        .welcome-intro-video video {
            max-height: none;
        }

        .welcome-intro-text p {
            font-size: 16px;
        }
    }
</style>
<section class="ingenia-welcome-intro">
    <div class="welcome-intro-card">
        <div class="welcome-intro-text">
            <p>
                A MIDO 2026, Paolo Pettazzoni, Presidente di Optovista, introduce Ingenia NXT e accoglie i Centri Ottici Partner che diventano Ingenia NXT Expert: un percorso di certificazione che consolida il ruolo dell'ottico optometrista come protagonista della progettazione personalizzata.
            </p>
        </div>
        <div class="welcome-intro-video">
            <video controls preload="metadata" >
                <source src="{{ asset('img/ingenia/intervistabrevepaolo.mp4') }}" type="video/mp4">
                Il tuo browser non supporta il tag video.
            </video>
        </div>
    </div>
</section>

<div class="ingenia-welcome" style="background-image: url('{{ asset('img/ingenia/inizia-men-with-glasses.png') }}');">
    <div class="hero-card">
        <div class="hero-content">
            <div class="logo-row">
                <img src="{{ asset('img/ingenia/inizia-optovista-igenia-logo.svg') }}" alt="Ingenia NXT" class="hero-logo" />
            </div>
            <h1 class="hero-title">LA TUA LENTE. LA TUA VISIONE.<br />IL TUO FUTURO.</h1>
            <p class="hero-text">Segui online la <strong>formazione dedicata</strong> e ottieni il <strong>certificato di rivenditore ufficiale</strong>.</p>
            <a class="hero-cta" href="{{ route('ingenia.progress') }}">INIZIA SUBITO</a>
        </div>
        <div class="hero-stack">
            <img src="{{ asset('img/ingenia/inizia-videos-asset.png') }}" alt="Video anteprime" />
        </div>
    </div>
</div>
@endsection