@extends('frontend.layouts.main')

@section('page_title','News & Insights')

@section('content')

{{-- PAGE HERO --}}
<section class="page-hero">
  <div class="page-hero-bg"></div>
  <div class="hero-grid"></div>
  <div class="container page-hero-content">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8" data-aos="fade-up">
        <div class="page-badge"><i class="bi bi-newspaper"></i> Latest Updates</div>
        <nav class="breadcrumb-nav">
          <a href="{{ route('frontend.home') }}">Home</a><span>›</span>News &amp; Insights
        </nav>
        <h1 class="section-title" style="font-size:clamp(2.4rem,5vw,3.8rem)">
          Market News &amp; <span class="text-blue">Insights</span>
        </h1>
        <p class="section-sub mx-auto" style="max-width:600px;font-size:1.05rem">
          Stay ahead with our expert analysis, market commentary, and investment insights — updated weekly by our research team.
        </p>
      </div>
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- FEATURED ARTICLE --}}
<section class="section section-alt">
  <div class="container">
    <div data-aos="fade-up">
      <div style="background:var(--dark-3);border-radius:20px;padding:3rem;border:1px solid var(--border)">
        <div class="row g-4 align-items-center">
          <div class="col-lg-7">
            <span style="display:inline-block;background:rgba(26,86,219,.15);border:1px solid rgba(26,86,219,.3);color:#93c5fd;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .85rem;border-radius:50px;margin-bottom:1.25rem">Featured</span>
            <h3 style="color:#fff;font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.3;margin-bottom:1rem">
              Federal Reserve Signals Rate Pause as Inflation Cools to 2.8%
            </h3>
            <p style="color:var(--text-muted);line-height:1.8;font-size:.95rem;margin-bottom:1.25rem">
              In a pivotal shift, the Federal Reserve indicated it would pause further rate hikes after consumer price inflation fell to 2.8% in February 2025 — its lowest level in three years. Global equity markets surged on the announcement, with the S&amp;P 500 recording its best weekly performance since Q4 2023...
            </p>
            <div style="color:var(--text-muted);font-size:.8rem;margin-bottom:1.25rem">
              <span style="color:#60a5fa;font-weight:600">Markets</span>
              <span style="margin:0 .5rem;opacity:.4">·</span>
              Mar 18, 2025
              <span style="margin:0 .5rem;opacity:.4">·</span>
              5 min read
            </div>
            <a href="#" style="color:#60a5fa;font-weight:600;text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s">
              Read Full Article <i class="bi bi-arrow-right"></i>
            </a>
          </div>
          <div class="col-lg-5">
            <div style="background:var(--dark-4);border-radius:16px;height:200px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)">
              <i class="bi bi-graph-up" style="font-size:4rem;color:#60a5fa;opacity:.7"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- NEWS GRID --}}
<section class="section section-dark">
  <div class="container">
    <div class="text-center mb-5" data-aos="fade-up">
      <span class="section-label">Editorial</span>
      <h2 class="section-title">Recent Articles</h2>
    </div>
    <div class="row g-4">

      {{-- Article 1 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.25);color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Crypto</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">Bitcoin Reclaims $65K as ETF Inflows Surge</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">Bitcoin crossed the $65,000 mark for the first time since early 2024 as institutional ETF inflows hit record weekly highs, driven by renewed institutional demand.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 15, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

      {{-- Article 2 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);color:#34d399;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Real Estate</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">Commercial Property Shows Q1 Recovery Signs</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">After two consecutive quarters of decline, commercial property valuations are stabilising as office occupancy rates recover across major US and European cities.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 12, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

      {{-- Article 3 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(26,86,219,.15);border:1px solid rgba(26,86,219,.3);color:#93c5fd;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Equities</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">NVIDIA Reports Record Q4 Earnings, Stock Surges 8%</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">NVIDIA posted record quarterly revenue of $22.1B, beating analyst forecasts by 14%, as AI chip demand continues to outpace supply across data centre markets.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 10, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

      {{-- Article 4 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:#a78bfa;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Economy</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">UK GDP Growth Beats Expectations at 0.4% in Q4 2024</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">The UK economy grew 0.4% in Q4 2024, surpassing consensus estimates of 0.1% and signalling a resilient exit from the shallow recession of early 2024.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 8, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

      {{-- Article 5 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.25);color:#38bdf8;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Wealth</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">New Study: 73% of HNW Individuals Under-Diversified</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">A landmark wealth management study reveals that nearly three-quarters of high-net-worth investors hold more than 60% of assets in a single class, increasing portfolio risk substantially.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 5, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

      {{-- Article 6 --}}
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120">
        <div class="card-dark d-flex flex-column" style="height:100%">
          <span style="display:inline-block;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.25);color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;margin-bottom:1rem;width:fit-content">Crypto</span>
          <h6 style="color:#fff;font-size:.975rem;line-height:1.45;margin-bottom:.75rem">SEC Approves Second Wave of Spot Ethereum ETFs</h6>
          <p style="color:var(--text-muted);font-size:.855rem;line-height:1.7;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">The SEC has greenlit five new spot Ethereum ETFs from major asset managers including BlackRock and Fidelity, paving the way for broader institutional participation in ETH markets.</p>
          <div style="display:flex;justify-content:space-between;align-items:center;font-size:.8rem">
            <span style="color:var(--text-muted)">Mar 3, 2025</span>
            <a href="#" style="color:#60a5fa;text-decoration:none;font-weight:600">Read →</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- CATEGORIES --}}
<section class="section-sm section-alt">
  <div class="container">
    <div class="text-center mb-4" data-aos="fade-up">
      <span class="section-label">Filter</span>
      <h2 class="section-title">Browse by Category</h2>
    </div>
    <div data-aos="fade-up" data-aos-delay="80" style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center">
      @foreach(['All','Markets','Crypto','Real Estate','Economy','Wealth','Technology','Regulation'] as $cat)
        <a href="#" style="display:inline-flex;align-items:center;background:var(--dark-3);border:1px solid var(--border);border-radius:50px;padding:.5rem 1.3rem;font-size:.85rem;color:#e2e8f0;text-decoration:none;transition:all .2s"
           onmouseover="this.style.borderColor='rgba(26,86,219,.5)';this.style.background='rgba(26,86,219,.1)'"
           onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--dark-3)'">
          {{ $cat }}
        </a>
      @endforeach
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- NEWSLETTER --}}
<section class="section section-dark">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-6" data-aos="fade-up">
        <span class="section-label">Stay Informed</span>
        <h2 class="section-title">Get Weekly Insights</h2>
        <p style="color:var(--text-muted);margin-bottom:2rem;line-height:1.7">Join 12,000+ subscribers receiving our weekly market brief.</p>
        <form class="form-dark" onsubmit="return false">
          <div style="display:flex;gap:1rem;flex-wrap:wrap">
            <input type="email" class="form-control" placeholder="Enter your email address" style="flex:1;min-width:200px">
            <button type="submit" style="background:var(--primary);color:#fff;border:none;border-radius:10px;padding:.75rem 1.75rem;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:background .2s"
                    onmouseover="this.style.background='var(--primary-dark)'"
                    onmouseout="this.style.background='var(--primary)'">
              Subscribe
            </button>
          </div>
          <p style="color:var(--text-muted);font-size:.78rem;margin-top:.75rem">No spam. Unsubscribe anytime.</p>
        </form>
      </div>
    </div>
  </div>
</section>

<div class="divider-glow"></div>

{{-- CTA BANNER --}}
<section class="section section-alt">
  <div class="container" data-aos="fade-up">
    <div class="cta-banner text-center">
      <h2 style="color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.75rem">Ready to Put These Insights to Work?</h2>
      <p style="color:rgba(255,255,255,.75);max-width:480px;margin:0 auto 2rem;line-height:1.7">Open an account and start investing based on our research.</p>
      <div class="d-flex gap-3 justify-content-center flex-wrap">
        <a href="{{ route('register') }}" class="btn-cta-white"><i class="bi bi-graph-up-arrow"></i> Start Investing</a>
      </div>
    </div>
  </div>
</section>

@endsection