@extends('layouts.app')

@section('title', 'Unicorn Power & Metals | Leading Energy & Metallurgy Solutions')

@section('content')
<!-- Hero Section -->
<section class="hero-section text-center text-lg-start" id="home-hero">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-7">
                <span class="badge tag-rare mb-3 px-3 py-2 animated-fade-in" style="font-size: 0.9rem;">Empowering Industrial Innovation</span>
                <h1 class="display-3 text-white fw-bold mb-4 animated-fade-in" style="line-height: 1.1;">
                    Powering the Future, <br>
                    <span class="gradient-text-power">Forging the World.</span>
                </h1>
                <p class="lead text-muted mb-5 animated-fade-in" style="max-width: 600px;">
                    Unicorn Power & Metals sits at the intersection of energy grid infrastructure and heavy metallurgy. We supply advanced alloys, raw metals, and grid-scale power engineering.
                </p>
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center justify-content-lg-start animated-fade-in">
                    <a href="{{ route('products') }}" class="btn btn-glow-cyan" id="hero-btn-products">Explore Products</a>
                    <a href="{{ route('contacts') }}" class="btn btn-glow-outline" id="hero-btn-contact">Get in Touch</a>
                </div>
            </div>
            
            <div class="col-lg-5 text-center d-none d-lg-block">
                <!-- Visual decoration: Futuristic glowing atomic/grid shield -->
                <div class="position-relative d-inline-block">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 350px; background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, rgba(13, 110, 253, 0) 70%); filter: blur(20px);"></div>
                    <svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="animation: spin 60s linear infinite; filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.2));" id="futuristic-hero-illustration">
                        <circle cx="200" cy="200" r="180" stroke="rgba(255, 255, 255, 0.05)" stroke-width="2" />
                        <circle cx="200" cy="200" r="140" stroke="rgba(0, 212, 255, 0.15)" stroke-width="1.5" stroke-dasharray="10 5" />
                        <circle cx="200" cy="200" r="100" stroke="rgba(255, 255, 255, 0.03)" stroke-width="1" />
                        <!-- Central element -->
                        <polygon points="200,80 300,140 300,260 200,320 100,260 100,140" stroke="url(#heroSVGGrad)" stroke-width="3" fill="rgba(8, 11, 17, 0.6)" />
                        <line x1="200" y1="80" x2="200" y2="320" stroke="rgba(0, 212, 255, 0.2)" stroke-width="1.5" />
                        <line x1="100" y1="140" x2="300" y2="260" stroke="rgba(0, 212, 255, 0.2)" stroke-width="1.5" />
                        <line x1="100" y1="260" x2="300" y2="140" stroke="rgba(0, 212, 255, 0.2)" stroke-width="1.5" />
                        <defs>
                            <linearGradient id="heroSVGGrad" x1="100" y1="80" x2="300" y2="320" gradientUnits="userSpaceOnUse">
                                <stop offset="0%" stop-color="#00d4ff" />
                                <stop offset="100%" stop-color="#0d6efd" />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Core Divisions Section -->
<section class="section-padding" style="background: rgba(4, 6, 10, 0.5);" id="home-divisions">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">Double Division Strength</h2>
            <p class="text-muted mx-auto" style="max-width: 600px;">Our operational capabilities are divided into two highly specialized sectors that together power global infrastructure.</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6">
                <!-- Power Division Card -->
                <div class="division-card card-power" style="background-image: linear-gradient(rgba(8, 11, 17, 0.8), rgba(8, 11, 17, 0.95)), radial-gradient(circle at top right, rgba(0, 212, 255, 0.2), transparent);" id="division-card-power" onclick="window.location.href='{{ route('services') }}#power'">
                    <div class="division-card-content">
                        <span class="location-tag">Division I</span>
                        <h3 class="h2 text-white mb-3">Power & Grid Solutions</h3>
                        <p class="text-muted mb-4">
                            Grid infrastructure, sub-station implementation, energy storage deployment, and advanced solar-farm engineering. We design systems built to endure.
                        </p>
                        <a href="{{ route('services') }}#power" class="text-cyan text-decoration-none fw-bold" id="division-link-power">View Engineering Services &rarr;</a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <!-- Metals Division Card -->
                <div class="division-card card-metals" style="background-image: linear-gradient(rgba(8, 11, 17, 0.8), rgba(8, 11, 17, 0.95)), radial-gradient(circle at top right, rgba(148, 163, 184, 0.2), transparent);" id="division-card-metals" onclick="window.location.href='{{ route('products') }}'">
                    <div class="division-card-content">
                        <span class="location-tag">Division II</span>
                        <h3 class="h2 text-white mb-3">Advanced Metallurgy</h3>
                        <p class="text-muted mb-4">
                            High-grade structural steel, copper tubes, non-ferrous alloys, and rare earth distribution. Precision material processing matching aerospace tolerances.
                        </p>
                        <a href="{{ route('products') }}" class="text-cyan text-decoration-none fw-bold" id="division-link-metals">Browse Materials Catalog &rarr;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Metrics Section -->
<section class="section-padding" id="home-stats">
    <div class="container">
        <div class="row g-4 justify-content-center">
            <div class="col-6 col-md-3">
                <div class="glass-panel stat-card" id="stat-card-megawatts">
                    <div class="stat-number text-cyan">420+</div>
                    <div class="stat-title">Megawatts Installed</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="glass-panel stat-card" id="stat-card-tonnes">
                    <div class="stat-number text-white">85K+</div>
                    <div class="stat-title">Tonnes Processed</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="glass-panel stat-card" id="stat-card-global">
                    <div class="stat-number text-cyan">18</div>
                    <div class="stat-title">Global Facilities</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="glass-panel stat-card" id="stat-card-compliance">
                    <div class="stat-number text-white">100%</div>
                    <div class="stat-title">ESG Audit Passed</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Value Propositions Grid -->
<section class="section-padding" style="background: rgba(4, 6, 10, 0.5);" id="home-values">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">Why Industry Leaders Choose Us</h2>
            <p class="text-muted mx-auto" style="max-width: 600px;">Our values form the cornerstone of every contract, shipment, and engineering blueprint we deploy.</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="glass-panel h-100" id="value-card-precision">
                    <div class="mb-3 text-cyan">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="22" y1="12" x2="18" y2="12"></line>
                            <line x1="6" y1="12" x2="2" y2="12"></line>
                            <line x1="12" y1="6" x2="12" y2="2"></line>
                            <line x1="12" y1="22" x2="12" y2="18"></line>
                        </svg>
                    </div>
                    <h4 class="h5 text-white mb-2">Absolute Precision</h4>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">All metal batches and electrical designs pass rigorous laser audits matching strict defense criteria.</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="glass-panel h-100" id="value-card-circular">
                    <div class="mb-3 text-cyan">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"></path>
                        </svg>
                    </div>
                    <h4 class="h5 text-white mb-2">Circular Metallurgy</h4>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">We process over 35,000 tons of scrap annually, feeding raw minerals back into global production loops.</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="glass-panel h-100" id="value-card-resilience">
                    <div class="mb-3 text-cyan">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                            <line x1="6" y1="6" x2="6.01" y2="6"></line>
                            <line x1="6" y1="18" x2="6.01" y2="18"></line>
                        </svg>
                    </div>
                    <h4 class="h5 text-white mb-2">Grid Resilience</h4>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">Our power sub-station setups are engineered to withstand extreme climates and localized grid failures.</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="glass-panel h-100" id="value-card-delivery">
                    <div class="mb-3 text-cyan">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="3" width="15" height="13"></rect>
                            <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
                            <circle cx="5.5" cy="18.5" r="2.5"></circle>
                            <circle cx="18.5" cy="18.5" r="2.5"></circle>
                        </svg>
                    </div>
                    <h4 class="h5 text-white mb-2">Guaranteed Logistics</h4>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">Strategic global ports and dedicated warehouse facilities guarantee timely shipments across APAC and EU.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call To Action Banner -->
<section class="section-padding text-center position-relative" id="home-cta">
    <div class="container">
        <div class="glass-panel p-5 border border-primary border-opacity-25" style="background: linear-gradient(135deg, rgba(8, 11, 17, 0.9) 0%, rgba(13, 110, 253, 0.1) 100%);">
            <h3 class="display-5 text-white fw-bold mb-3">Partner With Us</h3>
            <p class="text-muted mx-auto mb-5" style="max-width: 600px;">
                Looking for high-purity structural alloys or require a custom electrical grid installation? Speak directly to our senior directors.
            </p>
            <div class="d-flex justify-content-center gap-3">
                <a href="{{ route('contacts') }}" class="btn btn-glow-cyan px-4 py-3" id="cta-btn-inquiry">Submit Corporate Inquiry</a>
            </div>
        </div>
    </div>
</section>

<style>
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
@endsection