@extends('layouts.app')

@section('title', 'About Us | Unicorn Power & Metals')
@section('meta_desc', 'Read about Unicorn Power & Metals\' journey from a Osaka metal forge to a global power grid engineering and heavy metallurgy conglomerate.')

@section('content')
<!-- Page Header -->
<section class="section-padding text-center" style="background: linear-gradient(180deg, rgba(8, 11, 17, 0.4) 0%, rgba(8, 11, 17, 0.8) 100%); padding-top: 150px;">
    <div class="container">
        <span class="badge tag-rare mb-3 px-3 py-2">Corporate History & Values</span>
        <h1 class="display-4 text-white fw-bold mb-4">About Our Corporation</h1>
        <p class="lead text-muted mx-auto" style="max-width: 700px;">
            For over a decade, we have engineered and supplied the core materials and systems that power modern society. We are built on quality, resilience, and sustainability.
        </p>
    </div>
</section>

<!-- Company History Timeline -->
<section class="section-padding" id="timeline">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5">
                <h2 class="h1 mb-4">Our Journey</h2>
                <p class="text-muted mb-4">
                   Unicorn is a French-registered Company and is an international high-technology group, operating in the aviation, defense and space markets. We are present in 25  countries including USA, UK, Russia, Australia,China & India.    </p>
              For more than 20 years now, Unicorn has developed and coordinated a wide range of enabling technologies for *metal and enargy field
                   <!-- <div class="p-4 glass-panel border-start border-4 border-cyan">
                    <p class="mb-0 text-white font-italic">
                        "Reliable materials and clean power grids aren't just commodities; they are the literal foundation of modern human progress."
                    </p>
                    <small class="text-muted d-block mt-2">— Dr. Kenji Kuroda, Chief Architect</small>
                </div> -->
            </div>
            
            <div class="col-lg-7">
                <div class="timeline-wrapper">
                    <div class="timeline-item" id="timeline-2012">
                        <div class="timeline-year">2012</div>
                        <h4 class="text-white"> Inception</h4>
                        <p class="text-muted">Established as "Unicorn Metals" in Paris, France. Focused primarily on specialized steel processing and alloy casting for maritime clients.</p>
                    </div>
                    
                    <div class="timeline-item" id="timeline-2016">
                        <div class="timeline-year">2016</div>
                        <h4 class="text-white">Power Merger & Integration</h4>
                        <p class="text-muted">Merged with Kuroda Power Engineering, integrating grid design systems. Rebranded as "Unicorn Power & Metals" to provide unified metallurgy and electrical contracting.</p>
                    </div>
                    
                    <div class="timeline-item" id="timeline-2019">
                        <div class="timeline-year">2019</div>
                        <h4 class="text-white">Rare Earth Distribution</h4>
                        <p class="text-muted">Expanded operations to Australia and EU. Launched our rare-earth minerals distribution and opened the copper recycling center in Kobe.</p>
                    </div>
                    
                    <div class="timeline-item" id="timeline-2023">
                        <div class="timeline-year">2023</div>
                        <h4 class="text-white">Carbon-Neutral Milestones</h4>
                        <p class="text-muted">Achieved ISO 14001 certification. Deployed our circular-loop manufacturing line, reclaiming and reprocessing 98% of industrial byproducts.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Core Leadership Section -->
<section class="section-padding" style="background: rgba(4, 6, 10, 0.5);" id="leadership">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">Our Corporate Board</h2>
            <p class="text-muted mx-auto" style="max-width: 600px;">Meet the senior directors steering our engineering and supply divisions.</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="glass-panel text-center" id="board-member-1">
                    <div class="mx-auto mb-4 bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                    <h4 class="text-white mb-1">Mr Robert jeff Antonio</h4>
                    <span class="location-tag mb-3 d-block">Chairman of the Board</span>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">
                        Former advisor to national grid networks with 25+ years in transmission designs. Holds 14 patents on smart sub-station switchgears.
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="glass-panel text-center" id="board-member-2">
                    <div class="mx-auto mb-4 bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                    <h4 class="text-white mb-1">Mr Olivier Louise</h4>
                    <span class="location-tag mb-3 d-block">Company CEO</span>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">
                        Spearheads our alloy fabrication laboratories. Former research lead at Kyoto Tech, specializing in high-stress structural steels.
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="glass-panel text-center" id="board-member-3">
                    <div class="mx-auto mb-4 bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                    <h4 class="text-white mb-1">Shanu ferdin</h4>
                    <span class="location-tag mb-3 d-block">Indian Co Ordinator & Appraiser</span>
                    <p class="text-muted mb-0" style="font-size: 0.9rem;">
                        Manages our international supply lanes and deep-sea shipping partnerships. Ensures zero supply chain disruptions.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ESG commitment -->
<section class="section-padding" id="esg">
    <div class="container">
        <div class="glass-panel p-5" style="background: radial-gradient(circle at bottom left, rgba(0, 212, 255, 0.1), transparent);">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <span class="badge tag-rare mb-3 px-3 py-2">Carbon Neutral Commitment</span>
                    <h2 class="h1 text-white mb-4">ESG Compliance</h2>
                    <p class="text-muted mb-4">
                        Heavy industry has a massive environmental responsibility. We actively monitor and reduce the carbon intensity of our smelting lines. Through green power contracts and advanced filtering, we guarantee our materials are ethically and sustainably sourced.
                    </p>
                    <ul class="custom-list text-muted">
                        <li>98% water reclamation loops in refinement tanks</li>
                        <li>Sourcing from conflict-free mining operations</li>
                        <li>Partnership with regional reforestation programs</li>
                    </ul>
                </div>
                
                <div class="col-lg-6">
                    <div class="p-4 border border-secondary border-opacity-10 rounded-3 text-center" style="background: rgba(255, 255, 255, 0.02);">
                        <h4 class="text-white mb-4">Certifications Registry</h4>
                        <div class="table-responsive">
                            <table class="table table-dark table-borderless mb-0 align-middle">
                                <thead>
                                    <tr class="text-muted">
                                        <th scope="col" class="text-start">Audit Standard</th>
                                        <th scope="col">Registered ID</th>
                                        <th scope="col" class="text-end">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-white text-start">ISO 9001:2015</td>
                                        <td class="text-muted font-monospace">QMS-JP8803</td>
                                        <td class="text-end"><span class="badge bg-success bg-opacity-15 text-success">Verified</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-white text-start">ISO 14001:2015</td>
                                        <td class="text-muted font-monospace">EMS-EU3911</td>
                                        <td class="text-end"><span class="badge bg-success bg-opacity-15 text-success">Verified</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-white text-start">OHSAS 18001</td>
                                        <td class="text-muted font-monospace">OHS-AU2938</td>
                                        <td class="text-end"><span class="badge bg-success bg-opacity-15 text-success">Verified</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection