
<link rel="stylesheet" href="assets/css/ev-premium.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<section class="evp-section">
    <!-- Background Decor -->
    <div class="evp-bg-aura aura-red"></div>
    <div class="evp-bg-aura aura-blue"></div>
    <div class="evp-grid-overlay"></div>

    <div class="evp-container">
        <div class="evp-layout">
            
            <!-- LEFT: Strategic Content -->
            <div class="evp-content">
                <div class="evp-tag">
                    <span class="status-dot"></span>
                    EV-Native Intelligence
                </div>
                
                <h2 class="evp-title" style="color:#FFFFFF !important">
                    BUILT FOR ELECTRIC.
                    <span>NOT ADAPTED.</span>
                </h2>
                
                <p class="evp-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="evp-features">
                    <!-- Feature 1 -->
                    <div class="evp-feature-card">
                        <div class="evp-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93"/></svg>
                        </div>
                        <h4>Adaptive Routing</h4>
                        <p>Battery level, health, and degradation are primary inputs to our route optimization engine.</p>
                    </div>
                    
                    <!-- Feature 2 -->
                    <div class="evp-feature-card">
                        <div class="evp-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64A9 9 0 1 1 5.64 19.36m12.72-12.72L12 12M18.36 6.64L19.77 5.23"/></svg>
                        </div>
                        <h4>Charging Sync</h4>
                        <p>Seamlessly integrate charging stops into routes without compromising strict delivery windows.</p>
                    </div>
                    
                    <!-- Feature 3 -->
                    <div class="evp-feature-card">
                        <div class="evp-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                        </div>
                        <h4>Energy Paths</h4>
                        <p>Advanced terrain and weather models predict energy consumption with 98% accuracy.</p>
                    </div>
                    
                    <!-- Feature 4 -->
                    <div class="evp-feature-card">
                        <div class="evp-icon-box">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                        </div>
                        <h4>Total Control</h4>
                        <p>Real-time telemetry gives you a god-view of every asset's health and performance.</p>
                    </div>
                </div>
            </div>

            <!-- RIGHT: Interactive Dashboard Visual -->
            <div class="evp-visual">
                <div class="evp-dashboard">
                    <div class="evp-db-header">
                        <div>
                            <span class="evp-db-title">Fleet Status</span>
                            <h4 class="evp-db-id">DML-001</h4>
                        </div>
                        <div class="evp-live-tag">
                            Live Telemetry
                        </div>
                    </div>

                    <div class="evp-van-stage">
                        <!-- Floating HUD: Battery -->
                        <div class="evp-hud-card hud-battery" data-speed="1.2">
                            <div class="evp-progress-wrap">
                                <svg class="evp-progress-svg" viewBox="0 0 40 40">
                                    <circle class="evp-progress-circle-bg" cx="20" cy="20" r="18"/>
                                    <circle class="evp-progress-circle" cx="20" cy="20" r="18" style="stroke-dasharray: 113; stroke-dashoffset: 113;"/>
                                </svg>
                            </div>
                            <div>
                                <div class="hud-label-small">Battery Charge</div>
                                <div class="hud-val-large">82%</div>
                            </div>
                        </div>

                        <!-- Floating HUD: Location -->
                        <div class="evp-hud-card hud-location" data-speed="0.8">
                            <div class="hud-label-small">Current Location</div>
                            <div class="hud-val-large" style="font-size: 16px;">Downtown HQ</div>
                            <div style="font-size: 10px; color: #10B981; margin-top: 5px;">• On Schedule</div>
                        </div>

                        <!-- Floating HUD: Route -->
                        <div class="evp-hud-card hud-route" data-speed="1.5">
                            <div class="hud-label-small">Active Route</div>
                            <div class="hud-val-large" style="font-size: 16px;">Zone B delivery</div>
                            <div class="hud-route-path">
                                <div class="hud-route-line"></div>
                            </div>
                        </div>

                        <img src="assets/images/premium-ev-van.png" alt="Doormile Premium Electric Van" class="evp-van-image">
                    </div>

                    <!-- Metrics Row -->
                    <div class="evp-metrics">
                        <div class="m-item">
                            <div class="m-label">Fuel Saved</div>
                            <div class="m-value">40%</div>
                        </div>
                        <div class="m-item">
                            <div class="m-label">Emissions</div>
                            <div class="m-value">ZERO</div>
                        </div>
                        <div class="m-item">
                            <div class="m-label">Uptime</div>
                            <div class="m-value">98%</div>
                        </div>
                        <div class="m-item">
                            <div class="m-label">Efficiency</div>
                            <div class="m-value">3x</div>
                        </div>
                    </div>
                </div>
            </div>

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

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Animate Battery Progress
    setTimeout(() => {
        const circle = document.querySelector('.evp-progress-circle');
        if (circle) {
            circle.style.strokeDashoffset = '20.34'; // 82% of 113
        }
    }, 500);

    // Subtle Mouse Parallax for HUD cards
    const container = document.querySelector('.evp-visual');
    const cards = document.querySelectorAll('.evp-hud-card');
    
    container.addEventListener('mousemove', (e) => {
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        
        cards.forEach(card => {
            const speed = card.getAttribute('data-speed') || 1;
            card.style.transform = `translate(${x * 0.02 * speed}px, ${y * 0.02 * speed}px)`;
        });
    });

    container.addEventListener('mouseleave', () => {
        cards.forEach(card => {
            card.style.transform = `translate(0, 0)`;
        });
    });
});
</script>
