@extends('layouts.master')

@section('title', 'News & Press | Setara Group')

@section('content')
    <!-- Page Header -->
    <header class="pt-32 pb-16 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-hero-glow pointer-events-none"></div>
        <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">
            <span class="text-gradient">News & Press</span>
        </h1>
        <p class="text-secondary font-light tracking-wide max-w-lg mx-auto">
            Latest updates, press releases, and announcements from Setara Group.
        </p>
    </header>

    <!-- Content -->
    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-7xl">
            <!-- Featured News (Newspaper style) -->
            <div class="mb-10 glass-card rounded-3xl overflow-hidden group hover:-translate-y-1 transition-all duration-300 flex flex-col lg:flex-row shadow-[0_10px_40px_rgba(0,0,0,0.5)] border border-primary/20 relative">
                <div class="lg:w-3/5 h-80 lg:h-[480px] overflow-hidden relative">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/40 to-transparent z-10 lg:hidden"></div>
                    <div class="absolute inset-0 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/60 to-transparent z-10 hidden lg:block"></div>
                    <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Featured News" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    <span class="absolute top-6 left-6 z-20 text-xs font-bold px-4 py-1.5 bg-primary text-black rounded-full uppercase tracking-wider shadow-lg shadow-primary/20">Top Story</span>
                </div>
                <div class="lg:w-2/5 p-8 lg:p-14 flex flex-col justify-center relative z-20 -mt-32 lg:mt-0 lg:-ml-20">
                    <div class="text-xs text-primary mb-4 flex items-center font-bold tracking-widest uppercase">
                        <i class="far fa-calendar-alt mr-2"></i> October 15, 2023 <span class="mx-2 opacity-50">|</span> Press Release
                    </div>
                    <h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-foreground mb-6 group-hover:text-primary transition-colors leading-[1.1] tracking-tight text-balance">Setara Group Announces Mega-Expansion of Sustainable Manufacturing Facilities</h2>
                    <p class="text-secondary text-base lg:text-lg mb-8 line-clamp-4 leading-relaxed font-light">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>
                    <a href="{{ route('news.show', 'setara-group-announces-mega-expansion') }}" class="inline-flex items-center text-sm font-bold text-foreground hover:text-primary transition-colors uppercase tracking-widest group/btn self-start">
                        <span class="border-b-2 border-primary pb-1 group-hover/btn:border-white transition-colors">Read Full Story</span> 
                        <i class="fas fa-arrow-right ml-3 text-primary group-hover/btn:translate-x-2 transition-transform"></i>
                    </a>
                </div>
            </div>

            <!-- News Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <!-- News Item 2 (Text Heavy) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 border-t-4 border-t-primary shadow-lg bg-gradient-to-b from-white/5 to-transparent">
                    <div class="p-8 flex flex-col h-full">
                        <div>
                            <span class="text-[10px] font-bold px-3 py-1 bg-white/10 text-primary rounded-md mb-5 inline-block uppercase tracking-wider">Company Update</span>
                            <h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors leading-snug">Recognized for Excellence in Compliance and Worker Safety</h3>
                            <p class="text-secondary text-sm mb-6 line-clamp-4 leading-relaxed">We are proud to announce that Setara Group has been awarded the prestigious National Safety Award for our unmatched commitment to providing a secure, ethical, and empowering working environment for all our employees.</p>
                        </div>
                        <div class="mt-auto text-xs text-secondary/60 flex items-center justify-between border-t border-white/10 pt-5">
                            <span class="font-medium tracking-wide uppercase"><i class="far fa-clock mr-1.5 text-primary"></i> Sept 28, 2023</span>
                            <a href="{{ route('news.show', 'recognized-for-excellence-in-compliance') }}" class="text-foreground hover:text-primary font-bold uppercase tracking-widest transition-colors">Read <i class="fas fa-chevron-right text-[10px] ml-1 text-primary"></i></a>
                        </div>
                    </div>
                </div>

                <!-- News Item 3 (Image Standard) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 flex flex-col shadow-lg">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-black/20 z-10 group-hover:bg-transparent transition-colors duration-500"></div>
                        <img src="https://images.unsplash.com/photo-1606836576983-8b458e75221d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="News Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        <span class="absolute top-4 left-4 z-20 text-[10px] font-bold px-3 py-1 bg-black/60 backdrop-blur-md text-white rounded-md uppercase tracking-wider border border-white/10">Innovation</span>
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h3 class="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors leading-snug line-clamp-2">Pioneering AI Integration in Quality Control Processes</h3>
                        <p class="text-secondary text-sm mb-4 line-clamp-2 leading-relaxed">Embracing the Fourth Industrial Revolution with advanced machine learning algorithms.</p>
                        <div class="mt-auto text-xs text-secondary/60 flex items-center justify-between pt-2">
                            <span class="font-medium tracking-wide uppercase"><i class="far fa-calendar mr-1.5 text-primary"></i> Aug 12, 2023</span>
                        </div>
                    </div>
                </div>

                <!-- News Item 4 (Image Standard) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 flex flex-col shadow-lg">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-black/20 z-10 group-hover:bg-transparent transition-colors duration-500"></div>
                        <img src="https://images.unsplash.com/photo-1574056262933-28f0fbce09d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="News Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        <span class="absolute top-4 left-4 z-20 text-[10px] font-bold px-3 py-1 bg-black/60 backdrop-blur-md text-white rounded-md uppercase tracking-wider border border-white/10">Sustainability</span>
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h3 class="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors leading-snug line-clamp-2">Achieving 100% Renewable Energy Across All Facilities</h3>
                        <p class="text-secondary text-sm mb-4 line-clamp-2 leading-relaxed">A major milestone in our ongoing sustainability journey and environmental commitment.</p>
                        <div class="mt-auto text-xs text-secondary/60 flex items-center justify-between pt-2">
                            <span class="font-medium tracking-wide uppercase"><i class="far fa-calendar mr-1.5 text-primary"></i> Jul 05, 2023</span>
                        </div>
                    </div>
                </div>

                <!-- News Item 5 (Breaking News Style) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 border-l-4 border-l-primary flex flex-col justify-center bg-black/40 shadow-lg md:col-span-2 lg:col-span-1">
                    <div class="p-8">
                        <span class="text-[10px] font-bold text-black bg-primary px-3 py-1 rounded-md mb-5 inline-block uppercase tracking-wider animate-pulse"><i class="fas fa-bolt mr-1"></i> Breaking News</span>
                        <h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors leading-snug text-balance">Setara Group Partners with Global Retail Giant</h3>
                        <p class="text-secondary text-sm mb-8 leading-relaxed">A new strategic alliance that will redefine the supply chain dynamics for the upcoming decade, bringing sustainable fashion to millions globally.</p>
                        <a href="{{ route('news.show', 'setara-group-partners-with-global-retail-giant') }}" class="text-xs font-bold text-foreground hover:text-primary uppercase tracking-widest border-b-2 border-primary/50 hover:border-primary pb-1 transition-all">Read Executive Briefing <i class="fas fa-arrow-right ml-1 text-[10px]"></i></a>
                    </div>
                </div>

                <!-- News Item 6 (Image Standard) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 flex flex-col shadow-lg">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-black/20 z-10 group-hover:bg-transparent transition-colors duration-500"></div>
                        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="News Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        <span class="absolute top-4 left-4 z-20 text-[10px] font-bold px-3 py-1 bg-black/60 backdrop-blur-md text-white rounded-md uppercase tracking-wider border border-white/10">Corporate</span>
                    </div>
                    <div class="p-8 flex-1 flex flex-col">
                        <h3 class="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors leading-snug line-clamp-2">Q3 Financial Report Shows Record Growth</h3>
                        <p class="text-secondary text-sm mb-4 line-clamp-2 leading-relaxed">Strong performance driven by increased demand for ethically produced garments.</p>
                        <div class="mt-auto text-xs text-secondary/60 flex items-center justify-between pt-2">
                            <span class="font-medium tracking-wide uppercase"><i class="far fa-calendar mr-1.5 text-primary"></i> Jun 15, 2023</span>
                        </div>
                    </div>
                </div>

                <!-- News Item 7 (Event Style) -->
                <div class="glass-card rounded-2xl overflow-hidden group hover:-translate-y-2 transition-all duration-300 bg-primary/5 border border-primary/20 shadow-[0_0_20px_rgba(var(--accent),0.05)]">
                    <div class="p-8 h-full flex flex-col justify-between relative overflow-hidden">
                        <div class="absolute -right-6 -top-6 text-primary/10 group-hover:text-primary/20 transition-colors duration-500">
                            <i class="fas fa-microphone-alt text-9xl"></i>
                        </div>
                        <div class="relative z-10">
                            <span class="text-[10px] font-bold px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-md mb-5 inline-block uppercase tracking-wider">Upcoming Event</span>
                            <h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors leading-snug">Annual Textile Innovation Summit 2023</h3>
                            <p class="text-secondary text-sm mb-6 line-clamp-3 leading-relaxed font-light">Join our leadership team at the upcoming summit where we will be showcasing our latest advancements in sustainable fabric technology and zero-waste production.</p>
                        </div>
                        <div class="relative z-10 mt-auto text-xs text-secondary/80 flex items-center justify-between border-t border-primary/20 pt-5">
                            <span class="font-bold tracking-wide uppercase text-primary"><i class="far fa-clock mr-1.5"></i> May 22, 2023</span>
                            <a href="#" class="w-8 h-8 rounded-full bg-primary text-black flex items-center justify-center hover:scale-110 transition-transform"><i class="fas fa-arrow-right text-[10px]"></i></a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Newsletter Subscription -->
            <div class="mt-20 glass-card p-10 md:p-14 rounded-3xl border border-primary/20 relative overflow-hidden text-center">
                <div class="absolute inset-0 bg-hero-glow opacity-10 pointer-events-none"></div>
                <div class="relative z-10 max-w-2xl mx-auto">
                    <i class="fas fa-envelope-open-text text-4xl text-primary mb-6"></i>
                    <h2 class="text-3xl font-bold text-foreground mb-4">Stay Updated</h2>
                    <p class="text-secondary mb-8">Subscribe to our newsletter to receive the latest news and updates directly in your inbox.</p>
                    <form class="flex flex-col sm:flex-row gap-4 justify-center">
                        <input type="email" placeholder="Enter your email address" class="px-6 py-4 rounded-xl bg-black/40 border border-white/10 text-white focus:outline-none focus:border-primary flex-1 max-w-sm">
                        <button type="button" class="px-8 py-4 bg-primary text-black font-bold rounded-xl hover:scale-105 transition-transform duration-300">Subscribe</button>
                    </form>
                </div>
            </div>

        </div>
    </section>
@endsection