@extends('layouts.master')

@section('title', 'Setara Group Announces Mega-Expansion... | Setara Group')

@section('content')
    <!-- Article Header Hero -->
    <header class="pt-32 pb-20 relative overflow-hidden">
        <div class="absolute inset-0 bg-black z-0">
            <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" alt="Hero Background" class="w-full h-full object-cover opacity-40">
            <div class="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent"></div>
        </div>
        
        <div class="container mx-auto px-6 max-w-4xl relative z-10 text-center">
            <span class="text-xs font-bold px-4 py-1.5 bg-primary text-black rounded-full uppercase tracking-wider mb-6 inline-block shadow-lg shadow-primary/20">Press Release</span>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 tracking-tight text-foreground leading-[1.1] text-balance">
                Setara Group Announces Mega-Expansion of Sustainable Manufacturing Facilities
            </h1>
            <div class="flex items-center justify-center space-x-6 text-sm text-secondary mt-8">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-white/10 mr-3 flex items-center justify-center border border-white/20">
                        <i class="fas fa-user text-primary text-sm"></i>
                    </div>
                    <div class="text-left">
                        <p class="text-foreground font-bold leading-none mb-1">Editorial Board</p>
                        <p class="text-[10px] uppercase tracking-wider">Setara Group</p>
                    </div>
                </div>
                <div class="h-10 w-px bg-white/10"></div>
                <div class="text-left flex flex-col justify-center">
                    <p class="font-bold text-foreground leading-none mb-1"><i class="far fa-calendar-alt text-primary mr-1"></i> October 15, 2023</p>
                    <p class="text-[10px] uppercase tracking-wider"><i class="far fa-clock mr-1"></i> 5 min read</p>
                </div>
            </div>
        </div>
    </header>

    <!-- Article Content -->
    <section class="pb-24 -mt-10 relative z-20">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="flex flex-col lg:flex-row gap-12">
                
                <!-- Sidebar (Share & Actions) -->
                <div class="w-full lg:w-1/12 lg:flex flex-col items-center pt-8 hidden">
                    <div class="sticky top-32 flex flex-col items-center space-y-4">
                        <span class="text-[10px] font-bold text-secondary uppercase tracking-widest mb-2 rotate-180" style="writing-mode: vertical-rl;">Share Story</span>
                        <div class="w-px h-12 bg-white/10 mb-2"></div>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-secondary hover:text-white hover:bg-blue-600 hover:border-blue-600 transition-all shadow-lg hover:-translate-y-1"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-secondary hover:text-white hover:bg-sky-500 hover:border-sky-500 transition-all shadow-lg hover:-translate-y-1"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-secondary hover:text-white hover:bg-blue-800 hover:border-blue-800 transition-all shadow-lg hover:-translate-y-1"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-secondary hover:text-white hover:bg-green-600 hover:border-green-600 transition-all shadow-lg hover:-translate-y-1"><i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>

                <!-- Main Content -->
                <div class="w-full lg:w-8/12 glass-card p-8 md:p-14 rounded-3xl border border-primary/20 shadow-2xl relative overflow-hidden bg-background/50 backdrop-blur-xl">
                    <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-[80px] pointer-events-none"></div>
                    
                    <div class="prose prose-invert prose-lg md:prose-xl max-w-none text-secondary">
                        <p class="lead text-xl md:text-2xl font-light text-foreground mb-8 leading-relaxed">
                            In a monumental move to double its production capacity while strictly maintaining its commitment to zero-emission goals and eco-friendly operations, Setara Group has revealed comprehensive blueprints for a new, state-of-the-art manufacturing campus spanning over 50 acres.
                        </p>

                        <p>The new facility, to be located in the industrial heartland just outside Dhaka, represents an investment of over $50 million and will be entirely powered by a combination of solar arrays and wind turbines. This marks a significant milestone in Setara Group's ongoing "Green Manufacturing 2030" initiative.</p>

                        <h3 class="text-2xl font-bold text-foreground mt-12 mb-6 border-l-4 border-primary pl-4">A Commitment to the Environment</h3>
                        <p>Unlike traditional manufacturing hubs, the new campus is designed from the ground up to be environmentally restorative. Key features of the new facility include:</p>
                        
                        <ul class="space-y-3 marker:text-primary">
                            <li><strong>100% Renewable Energy:</strong> A 20MW captive solar farm capable of powering all operational needs during daylight hours.</li>
                            <li><strong>Zero Liquid Discharge (ZLD):</strong> An advanced effluent treatment plant ensuring no polluted water enters the local ecosystem.</li>
                            <li><strong>Smart Factory Automation:</strong> IoT-enabled machinery that optimizes energy consumption by up to 30%.</li>
                        </ul>

                        <div class="my-12 p-8 md:p-10 bg-white/5 border border-white/10 rounded-3xl border-l-4 border-l-primary relative overflow-hidden shadow-inner">
                            <i class="fas fa-quote-left absolute -top-4 -right-4 text-8xl text-white/5 transform rotate-12"></i>
                            <p class="text-xl md:text-2xl italic text-foreground leading-relaxed relative z-10 m-0 font-serif">"We are not just expanding our capacity; we are redefining how garments should be manufactured in the 21st century. Sustainability is no longer an option; it is the core foundation of our expansion strategy."</p>
                            <p class="text-sm font-bold text-primary mt-6 uppercase tracking-widest relative z-10">- Managing Director, Setara Group</p>
                        </div>

                        <h3 class="text-2xl font-bold text-foreground mt-12 mb-6 border-l-4 border-primary pl-4">Economic Impact and Job Creation</h3>
                        <p>Beyond environmental benefits, the mega-expansion is expected to create over 5,000 new direct jobs, focusing on highly skilled technical roles. Setara Group will also be establishing an on-site technical training institute to upskill the local workforce, ensuring the surrounding community directly benefits from the facility.</p>
                        
                        <p>Construction is slated to begin in Q1 of 2024, with the first phase of production expected to go live by the end of 2025.</p>
                    </div>

                    <!-- Article Tags -->
                    <div class="mt-14 pt-8 border-t border-white/10 flex flex-wrap gap-3">
                        <span class="px-4 py-2 bg-white/5 text-secondary text-xs font-bold uppercase tracking-wider rounded-full border border-white/10 hover:border-primary hover:text-primary cursor-pointer transition-colors shadow-sm">#Expansion</span>
                        <span class="px-4 py-2 bg-white/5 text-secondary text-xs font-bold uppercase tracking-wider rounded-full border border-white/10 hover:border-primary hover:text-primary cursor-pointer transition-colors shadow-sm">#Sustainability</span>
                        <span class="px-4 py-2 bg-white/5 text-secondary text-xs font-bold uppercase tracking-wider rounded-full border border-white/10 hover:border-primary hover:text-primary cursor-pointer transition-colors shadow-sm">#Manufacturing</span>
                        <span class="px-4 py-2 bg-white/5 text-secondary text-xs font-bold uppercase tracking-wider rounded-full border border-white/10 hover:border-primary hover:text-primary cursor-pointer transition-colors shadow-sm">#GreenEnergy</span>
                    </div>
                </div>

                <!-- Right Sidebar (Related News) -->
                <div class="w-full lg:w-3/12">
                    <div class="sticky top-32">
                        <h4 class="text-sm font-bold text-secondary mb-6 uppercase tracking-widest border-b border-white/10 pb-4">Related Stories</h4>
                        
                        <div class="space-y-6">
                            <!-- Related Item 1 -->
                            <a href="#" class="group block">
                                <div class="rounded-2xl overflow-hidden h-36 mb-4 relative shadow-lg">
                                    <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
                                    <img src="https://images.unsplash.com/photo-1574056262933-28f0fbce09d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="Related">
                                    <span class="absolute top-3 left-3 z-20 text-[8px] font-bold px-2 py-1 bg-black/60 backdrop-blur-md text-white rounded-md uppercase tracking-wider border border-white/10">Sustainability</span>
                                </div>
                                <h5 class="text-base font-bold text-foreground group-hover:text-primary transition-colors leading-snug line-clamp-2">Achieving 100% Renewable Energy Across All Facilities</h5>
                            </a>

                            <!-- Related Item 2 -->
                            <a href="#" class="group block">
                                <div class="rounded-2xl overflow-hidden h-36 mb-4 relative shadow-lg">
                                    <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
                                    <img src="https://images.unsplash.com/photo-1606836576983-8b458e75221d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="Related">
                                    <span class="absolute top-3 left-3 z-20 text-[8px] font-bold px-2 py-1 bg-black/60 backdrop-blur-md text-white rounded-md uppercase tracking-wider border border-white/10">Innovation</span>
                                </div>
                                <h5 class="text-base font-bold text-foreground group-hover:text-primary transition-colors leading-snug line-clamp-2">Pioneering AI Integration in Quality Control Processes</h5>
                            </a>
                        </div>

                        <!-- Ultra-Modern Newsletter CTA -->
                        <div class="mt-12 relative group">
                            <!-- Background Glow Effect -->
                            <div class="absolute -inset-1 bg-gradient-to-r from-primary/50 to-primary/10 rounded-[2.5rem] blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
                            
                            <div class="relative bg-[#0a0a0a] border border-white/10 rounded-[2.5rem] p-8 overflow-hidden shadow-2xl">
                                <!-- Abstract Background Patterns -->
                                <div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-[60px] pointer-events-none"></div>
                                <div class="absolute bottom-0 left-0 w-24 h-24 bg-primary/5 rounded-full blur-[40px] pointer-events-none"></div>
                                
                                <div class="relative z-10 text-center">
                                    <div class="mb-8 relative inline-block">
                                        <div class="w-20 h-20 mx-auto bg-gradient-to-br from-primary/20 to-primary/5 rounded-[1.5rem] flex items-center justify-center border border-primary/20 rotate-6 group-hover:rotate-0 transition-transform duration-500 shadow-xl">
                                            <i class="fas fa-envelope-open-text text-3xl text-primary"></i>
                                        </div>
                                        <!-- Animated Ping -->
                                        <div class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full border-4 border-[#0a0a0a] animate-ping"></div>
                                        <div class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full border-4 border-[#0a0a0a]"></div>
                                    </div>

                                    <h4 class="text-2xl font-black text-white mb-3 uppercase tracking-tighter italic">Stay Ahead</h4>
                                    <p class="text-secondary text-sm mb-8 font-light opacity-80 leading-relaxed px-2">
                                        Join our inner circle for exclusive industry insights and zero spam.
                                    </p>

                                    <form action="#" method="POST" class="space-y-4">
                                        <div class="relative group/input">
                                            <input type="email" placeholder="your@email.com" required
                                                class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white placeholder-white/20 focus:outline-none focus:border-primary/50 focus:bg-white/10 transition-all text-center font-bold text-sm tracking-wide">
                                        </div>
                                        <button type="submit" 
                                            class="w-full bg-white text-black font-black py-4 rounded-2xl hover:bg-primary transition-all duration-300 uppercase tracking-widest text-xs shadow-[0_10px_30px_-10px_rgba(255,255,255,0.2)] active:scale-[0.98] flex items-center justify-center group/btn">
                                            <span>Join the newsletter</span>
                                            <i class="fas fa-arrow-right ml-2 text-[10px] opacity-0 -translate-x-2 group-hover/btn:opacity-100 group-hover/btn:translate-x-0 transition-all"></i>
                                        </button>
                                    </form>

                                    <!-- Social Proof / User Friendliness -->
                                    <div class="mt-8 pt-8 border-t border-white/5 flex flex-col items-center">
                                        <div class="flex -space-x-3 mb-3">
                                            <img class="w-8 h-8 rounded-full border-2 border-[#0a0a0a] shadow-lg" src="https://ui-avatars.com/api/?name=J+D&background=333&color=fff" alt="User">
                                            <img class="w-8 h-8 rounded-full border-2 border-[#0a0a0a] shadow-lg" src="https://ui-avatars.com/api/?name=A+K&background=primary&color=000" alt="User">
                                            <img class="w-8 h-8 rounded-full border-2 border-[#0a0a0a] shadow-lg" src="https://ui-avatars.com/api/?name=S+M&background=555&color=fff" alt="User">
                                            <div class="w-8 h-8 rounded-full border-2 border-[#0a0a0a] bg-white/10 flex items-center justify-center text-[10px] font-bold text-white shadow-lg">+1k</div>
                                        </div>
                                        <span class="text-[10px] font-bold text-secondary uppercase tracking-[0.2em] opacity-60">Join 5,000+ Readers</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection