@extends('layouts.app')

@section('title', 'Materials & Products Catalog | Unicorn Power & Metals')
@section('meta_desc', 'Browse our industrial inventory: structural steel beams, high-purity copper busbars, NdFeB rare-earth magnets, and marine-grade aluminum alloys.')

@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">Material Distribution</span>
        <h1 class="display-4 text-white fw-bold mb-4">Our Materials & Products</h1>
        <p class="lead text-muted mx-auto" style="max-width: 700px;">
            Filter and search our supply inventory of structural metals, electrical conductors, superalloys, and processed rare earths.
        </p>
    </div>
</section>

<!-- Search and Filter Bar -->
<section class="mb-5" id="products-catalog-section">
    <div class="container">
        <div class="glass-panel p-4 mb-4">
            <div class="row align-items-center g-3">
                <!-- Search Input -->
                <div class="col-lg-4">
                    <div class="position-relative">
                        <input type="text" class="form-control form-control-custom ps-5" placeholder="Search products, grades, specs..." id="product-search" autocomplete="off">
                        <span style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted);">
                            <!-- Search Icon -->
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                        </span>
                    </div>
                </div>
                
                <!-- Category Filters -->
                <div class="col-lg-8 text-lg-end">
                    <div class="d-flex flex-wrap gap-2 justify-content-start justify-content-lg-end" id="filters-container">
                        <button class="filter-btn active" data-filter="all">All Products</button>
                        <button class="filter-btn" data-filter="steel">Structural Steel</button>
                        <button class="filter-btn" data-filter="copper">Copper</button>
                        <button class="filter-btn" data-filter="rare">Rare Earths</button>
                        <button class="filter-btn" data-filter="alloy">Alloys</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Products Grid -->
        <div class="row g-4" id="products-list-grid">
            <!-- Product 1 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="steel">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-1">
                    <span class="product-tag tag-steel">Structural Steel</span>
                    <h3 class="h4 text-white mb-2 card-title">Titanium-Reinforced H-Beams</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        High-stress structural structural components designed for earthquake-resistant architectures, tall skyscrapers, and industrial bridges.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Grade Standard:</span>
                            <span class="text-white font-monospace">ASTM A992 / JIS G3106</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Yield Point:</span>
                            <span class="text-white font-monospace">50 ksi (345 MPa)</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Tensile Limit:</span>
                            <span class="text-white font-monospace">65 ksi (450 MPa)</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product 2 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="copper">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-2">
                    <span class="product-tag tag-copper">Copper</span>
                    <h3 class="h4 text-white mb-2 card-title">Deoxidized High-Phosphorus Pipes</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        Superior thermal and electrical conductivity pipes, corrosion-resistant for heat exchangers, air conditioning condensers, and liquid transport lines.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Purity level:</span>
                            <span class="text-white font-monospace">Cu 99.9% Minimum</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Grade Standard:</span>
                            <span class="text-white font-monospace">ASTM B75 / C12200</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Outer Diameter:</span>
                            <span class="text-white font-monospace">15mm to 54mm</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product 3 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="rare">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-3">
                    <span class="product-tag tag-rare">Rare Earths</span>
                    <h3 class="h4 text-white mb-2 card-title">Neodymium NdFeB Magnets</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        High-magnetic performance blocks and magnets sourced for electric vehicle (EV) drive motors and heavy offshore wind generators.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Magnet Grade:</span>
                            <span class="text-white font-monospace">NdFeB - N52 High Remanence</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Remanence (Br):</span>
                            <span class="text-white font-monospace">1.43 - 1.48 Tesla</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Coercivity (Hcj):</span>
                            <span class="text-white font-monospace">&ge; 955 kA/m</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product 4 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="alloy">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-4">
                    <span class="product-tag tag-alloy">Alloys</span>
                    <h3 class="h4 text-white mb-2 card-title">Nickel-Chromium Heating Alloy</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        Resistance wire and foil alloys optimized for high-temperature kilns, electric furnaces, and chemical heating grids.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Grade Standard:</span>
                            <span class="text-white font-monospace">Nichrome 80 (NiCr8020)</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Operating limit:</span>
                            <span class="text-white font-monospace">Up to 1200&deg;C (2200&deg;F)</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Electrical Resistivity:</span>
                            <span class="text-white font-monospace">1.09 &mu;&Omega;&middot;m</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product 5 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="alloy">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-5">
                    <span class="product-tag tag-alloy">Alloys</span>
                    <h3 class="h4 text-white mb-2 card-title">Marine-Grade Aluminum Plates</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        Corrosion-resistant panels showing high structural strength, certified for commercial shipping vessel hulls and offshore structures.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Alloy Code:</span>
                            <span class="text-white font-monospace">Al 5083-H116</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Thickness Range:</span>
                            <span class="text-white font-monospace">6.0mm to 75.0mm</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Certification:</span>
                            <span class="text-white font-monospace">Lloyd's / ClassNK Registry</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product 6 -->
            <div class="col-md-6 col-lg-4 product-item" data-category="copper">
                <div class="glass-panel product-card d-flex flex-column h-100" id="product-card-6">
                    <span class="product-tag tag-copper">Copper</span>
                    <h3 class="h4 text-white mb-2 card-title">Super-Conducting Busbars</h3>
                    <p class="text-muted flex-grow-1 product-desc">
                        Solid oxygen-free copper busbars for high-power distribution grids, transformers, and regional substation cabinets.
                    </p>
                    <div class="mt-4 pt-3 border-top border-secondary border-opacity-10 product-specs">
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Copper Grade:</span>
                            <span class="text-white font-monospace">C10100 (OFE Oxygen-Free)</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1" style="font-size: 0.85rem;">
                            <span class="text-muted">Conductivity (IACS):</span>
                            <span class="text-white font-monospace">101% Minimum</span>
                        </div>
                        <div class="d-flex justify-content-between" style="font-size: 0.85rem;">
                            <span class="text-muted">Standards Code:</span>
                            <span class="text-white font-monospace">ASTM B187</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to action block -->
<section class="section-padding text-center" id="products-cta" style="background: rgba(4, 6, 10, 0.3);">
    <div class="container">
        <h3 class="text-white h2 mb-3">Custom Material Prototyping</h3>
        <p class="text-muted mx-auto mb-4" style="max-width: 600px;">
            Need a custom non-standard width steel profile or a specialized electrical copper bar configuration? Send us your technical blueprint sheet.
        </p>
        <a href="{{ route('contacts') }}" class="btn btn-glow-cyan" id="products-btn-contact">Submit Engineering Request</a>
    </div>
</section>
@endsection