@extends('public.layout')

@section('title','Noesantara Law Firm — Trusted Advisors')

@section('content')
@php
  $heroBg = \App\Models\Setting::get('home_hero_bg_path','');
  $heroBgUrl = '';
  if (!empty($heroBg)) {
    $heroBgUrl = preg_match('/^https?:\/\//i', $heroBg) ? $heroBg : '/'.$heroBg;
  }
@endphp
<section class="hero overflow-hidden position-relative" @if($heroBgUrl) style="background-image:url('{{ $heroBgUrl }}');" @endif>
  <div class="container">
    <div class="row align-items-center">
  <div class="col-lg-6 hero-left reveal-up">
        <div class="eyebrow mb-2">Your Trusted Partner</div>
        <h1 class="display-5 fw-bold mb-3">{{ \App\Models\Setting::get('home.hero_title','Trusted Legal Advisors for Your Most Critical Matters') }}</h1>
        <p class="lead mt-3">{{ \App\Models\Setting::get('home.hero_subtitle','We combine deep sector expertise with a commitment to practical, business-oriented outcomes.') }}</p>
        <div class="mt-4">
          @php
            $ctaUrl = \App\Models\Setting::get('home.hero_cta_url','/practice');
            if (!preg_match('/^(\/|https?:)/i', $ctaUrl)) { $ctaUrl = '/practice'; }
          @endphp
          <a class="btn btn-lg btn-primary cta-btn" href="{{ $ctaUrl }}">{{ \App\Models\Setting::get('home.hero_cta_label','Explore Our Practices') }}</a>
          <a class="btn btn-lg btn-outline-primary ms-2" href="/team">Meet the Team</a>
        </div>
      </div>
      <div class="col-lg-6 d-none d-lg-block text-end hero-right reveal-up" style="--delay:100ms">
        <img src="{{ \App\Models\Setting::get('home.hero_image_url','https://images.unsplash.com/photo-1523246198493-2f5327b1b37f?q=80&w=1200&auto=format&fit=crop') }}" class="img-fluid rounded shadow-lg floating-tilt" alt="Law firm" style="border-radius:1rem" decoding="async" fetchpriority="high"/>
      </div>
    </div>
  </div>
  <!-- Subtle decorative orbs -->
  <div class="hero-orbs d-none d-lg-block" aria-hidden="true">
    <span class="orb orb-red"></span>
    <span class="orb orb-blue"></span>
  </div>
</section>

<!-- Stats band with count-up -->
<section class="stats-band py-4">
  <div class="container">
    <div class="row text-center g-3">
      <div class="col-6 col-lg-4 reveal-up">
        <div class="stat">
          <div class="stat-value" data-target="{{ (int) \App\Models\Setting::get('home.stats_1_value', 15) }}" data-suffix="+">0</div>
          <div class="stat-label">{{ \App\Models\Setting::get('home.stats_1_label', 'Years of Experience') }}</div>
        </div>
      </div>
      <div class="col-6 col-lg-4 reveal-up" style="--delay:60ms">
        <div class="stat">
          <div class="stat-value" data-target="{{ (int) \App\Models\Setting::get('home.stats_2_value', 250) }}" data-suffix="+">0</div>
          <div class="stat-label">{{ \App\Models\Setting::get('home.stats_2_label', 'Clients Served') }}</div>
        </div>
      </div>
      <div class="col-12 col-lg-4 reveal-up" style="--delay:120ms">
        <div class="stat">
          <div class="stat-value" data-target="{{ (int) \App\Models\Setting::get('home.stats_3_value', 1200) }}" data-suffix="+">0</div>
          <div class="stat-label">{{ \App\Models\Setting::get('home.stats_3_label', 'Matters Resolved') }}</div>
        </div>
      </div>
    </div>
  </div>
  </section>

<section class="py-5">
  <div class="container">
  <h2 class="h4 section-title">Practice Areas</h2>
    <div class="row g-3">
      @forelse($practiceAreas as $p)
  <div class="col-md-6 col-lg-3 reveal-up" style="--delay:0ms">
        <a href="/practice/{{ $p->slug }}" class="text-decoration-none">
      <div class="card h-100 lift-on-hover">
            <div class="card-body d-flex flex-column">
              @if($p->icon)
                <div class="text-primary mb-2"><i class="{{ $p->icon }}"></i></div>
              @endif
              <h3 class="h6 mb-1">{{ $p->name }}</h3>
              <p class="text-muted small mb-0">{{ $p->excerpt }}</p>
            </div>
          </div>
        </a>
      </div>
      @empty
      <p class="text-muted">Coming soon.</p>
      @endforelse
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
  <h2 class="h4 section-title">Latest Insights</h2>
    <div class="row g-3">
      @forelse($insights as $post)
  <div class="col-md-6 col-lg-4 reveal-up">
        <a href="/insights/{{ $post->slug }}" class="text-decoration-none">
      <div class="card h-100 lift-on-hover">
            @if($post->hero_image)
              <div class="position-relative">
                <img src="{{ $post->hero_image }}" class="card-img-top" alt="{{ $post->title }}" loading="lazy" decoding="async"/>
                <span class="badge bg-dark position-absolute" style="right:12px;bottom:12px;opacity:.9">{{ optional($post->published_at)->format('M d, Y') }}</span>
              </div>
            @endif
            <div class="card-body">
              <h3 class="h6">{{ $post->title }}</h3>
              <p class="text-muted small mb-0">{{ $post->excerpt }}</p>
            </div>
          </div>
        </a>
      </div>
      @empty
      <p class="text-muted">No posts yet.</p>
      @endforelse
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
  <h2 class="h4 section-title">Our Offices</h2>
    <div class="row g-3">
      @forelse($offices as $o)
  <div class="col-md-6 col-lg-4 reveal-up">
        <div class="card h-100">
          <div class="card-body">
            <h3 class="h6">{{ $o->name }}</h3>
            <div class="text-muted small">{{ $o->address }}</div>
            @if($o->map_url)
            <a href="{{ $o->map_url }}" target="_blank" rel="noopener noreferrer" class="small">View map</a>
            @endif
          </div>
        </div>
      </div>
      @empty
      <p class="text-muted">Coming soon.</p>
      @endforelse
    </div>
  </div>
</section>

<section class="py-5" style="background:linear-gradient(180deg,#0b1220,#111827); color:#e5e7eb">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <h2 class="h3 mb-2">Need strategic legal advice?</h2>
        <p class="mb-0">Talk to our team about your most critical matters. We’ll help you navigate complexity with practical, business-first guidance.</p>
      </div>
      <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <a href="/contact" class="btn btn-primary btn-lg">Contact Us</a>
      </div>
    </div>
  </div>
</section>
@endsection

@push('styles')
<style>
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .reveal-up, .lift-on-hover, .floating-tilt { transition: none !important; animation: none !important; }
  }
  /* Reveal on scroll */
  .reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal-up.is-visible{ opacity:1; transform: translateY(0); }
  .reveal-up[style*="--delay"]{ transition-delay: var(--delay); }

  /* Subtle lift on hover for cards */
  .lift-on-hover{ transition: transform .2s ease, box-shadow .2s ease; }
  .lift-on-hover:hover{ transform: translateY(-4px); box-shadow: 0 22px 40px rgba(0,0,0,.12); }

  /* Floating tilt for hero image */
  .floating-tilt{ will-change: transform; transition: transform .3s ease; }
  .floating-tilt:hover{ transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px); }

  /* Hero gradient shimmer accent */
  .hero{ background-size:cover; background-position:center; background-repeat:no-repeat; }
  .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30) 40%, rgba(0,0,0,.10) 100%); }
  .hero > .container{ position:relative; z-index:1; }
  .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 200px at 80% -10%, rgba(185,28,28,.09), transparent 60%); }
</style>
@endpush

@push('scripts')
<script>
  (function(){
    // IntersectionObserver for reveal animations
    const els = document.querySelectorAll('.reveal-up');
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver((entries)=>{
        entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target);} });
      },{ rootMargin: '0px 0px -10% 0px', threshold: 0.15 });
      els.forEach(el=> io.observe(el));
    } else {
      els.forEach(el=> el.classList.add('is-visible'));
    }

    // Gentle parallax for hero on wide screens
    const hero = document.querySelector('.hero');
    const left = document.querySelector('.hero-left');
    const right = document.querySelector('.hero-right img');
    let ticking=false;
    function onScroll(){
      if(ticking) return; ticking=true;
      requestAnimationFrame(()=>{
        const y = window.scrollY || 0;
        const amt = Math.min(20, y * 0.05);
        if(left) left.style.transform = `translateY(${amt}px)`;
        if(right) right.style.transform = `translateY(${amt*-0.6}px)`;
        ticking=false;
      });
    }
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      window.addEventListener('scroll', onScroll, { passive:true });
    }

    // CTA ripple follow mouse position
    const ctas = document.querySelectorAll('.cta-btn');
    ctas.forEach(btn=>{
      btn.addEventListener('pointermove', (e)=>{
        const r = btn.getBoundingClientRect();
        btn.style.setProperty('--x', (e.clientX - r.left)+'px');
        btn.style.setProperty('--y', (e.clientY - r.top)+'px');
      });
    });

    // Count-up stats when visible
    const counters = document.querySelectorAll('.stat-value');
    const animateCount = (el)=>{
      const target = parseInt(el.getAttribute('data-target')||'0',10);
      const suffix = el.getAttribute('data-suffix')||'';
      const start = 0;
      const dur = 900;
      const t0 = performance.now();
      function tick(t){
        const p = Math.min(1, (t - t0)/dur);
        const val = Math.floor(start + (target-start)* (0.5 - Math.cos(Math.PI*p)/2));
        el.textContent = val.toLocaleString() + suffix;
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    };
    if ('IntersectionObserver' in window){
      const io2 = new IntersectionObserver((entries)=>{
        entries.forEach(e=>{ if(e.isIntersecting){ animateCount(e.target); io2.unobserve(e.target);} });
      },{ threshold: 0.3 });
      counters.forEach(c=> io2.observe(c));
    } else {
      counters.forEach(animateCount);
    }
  })();
</script>
@endpush