<!-- Modern EV-Native Design Section -->
<link rel="stylesheet" href="assets/css/ev-section.css">

<section class="ev-section">
    <div class="ev-container">
        <div class="ev-grid">
            
            <!-- Left Column: Content -->
            <div class="ev-content">
                <span class="ev-badge">EV-Native Design</span>
                <h2 class="ev-title">
                    BUILT FOR ELECTRIC. 
                    <span class="accent">NOT ADAPTED.</span>
                </h2>
                <p class="ev-desc">
                    Most logistics software treats EVs as diesel trucks with a battery. 
                    Doormile was built EV-first—understanding that electric fleets require 
                    fundamentally different intelligence.
                </p>

                <div class="feature-grid">
                    <!-- Feature 1 -->
                    <div class="feature-card">
                        <div class="feature-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                        </div>
                        <h3>Battery-Aware Routing</h3>
                        <p>Battery level, health, and degradation are inputs to route optimization.</p>
                    </div>

                    <!-- Feature 2 -->
                    <div class="feature-card">
                        <div class="feature-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
                        </div>
                        <h3>Charging Integration</h3>
                        <p>Integrate charging stops without compromising delivery windows.</p>
                    </div>

                    <!-- Feature 3 -->
                    <div class="feature-card">
                        <div class="feature-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h20"></path><path d="M5 20V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v12"></path><path d="M9 20v-4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4"></path></svg>
                        </div>
                        <h3>Energy-Optimized Paths</h3>
                        <p>Consider elevation, speed limits, and weather for maximum efficiency.</p>
                    </div>

                    <!-- Feature 4 -->
                    <div class="feature-card">
                        <div class="feature-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        </div>
                        <h3>Predictable Operations</h3>
                        <p>EVs become predictable assets, not operational risks.</p>
                    </div>
                </div>
            </div>

            <!-- Right Column: Dashboard Card -->
            <div class="ev-dashboard">
                <div class="dashboard-card">
                    <div class="dashboard-header">
                        <h3 class="dashboard-title">FLEET STATUS</h3>
                        <div class="live-indicator">Dashboard Live</div>
                    </div>

                    <div class="van-display">
                        <img src="assets/images/ev-van-dashboard.png" alt="Electric Delivery Van" class="van-image">
                        
                        <!-- Overlay Status Cards -->
                        <div class="overlay-card v-status-1">
                            <div class="status-circle active">85%</div>
                            <div class="info">
                                <h4>EV-001</h4>
                                <p>Route A • Active</p>
                            </div>
                        </div>

                        <div class="overlay-card v-status-2">
                            <div class="status-circle" style="border-color: #F59E0B; color: #F59E0B;">62%</div>
                            <div class="info">
                                <h4>EV-002</h4>
                                <p>Route B • 42 min left</p>
                            </div>
                        </div>

                        <div class="overlay-card v-status-3">
                            <div class="status-circle" style="border-color: #EF4444; color: #EF4444;">20%</div>
                            <div class="info">
                                <h4>EV-003</h4>
                                <p>Charging Required</p>
                            </div>
                        </div>
                    </div>

                    <!-- Metric Stats Bottom -->
                    <div class="stats-row">
                        <div class="stat-metric">
                            <span class="stat-value">40%</span>
                            <span class="stat-label">Lower Fuel Cost</span>
                        </div>
                        <div class="stat-metric">
                            <span class="stat-value">ZRO</span>
                            <span class="stat-label">Tailpipe Emissions</span>
                        </div>
                        <div class="stat-metric">
                            <span class="stat-value">98%</span>
                            <span class="stat-label">Fleet Uptime</span>
                        </div>
                        <div class="stat-metric">
                            <span class="stat-value">3x</span>
                            <span class="stat-label">Longer Asset Life</span>
                        </div>
                    </div>
                </div>
            </div>

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