@extends('layouts.app')
@section('content')
@php $lang = app()->getLocale(); @endphp

{{-- ── HERO ──────────────────────────────────────────────── --}}
<section class="relative overflow-hidden" style="background: linear-gradient(130deg, #05202C 0%, #0B5E6B 55%, #0D7B8A 100%); padding: 5rem 0 6rem;">
  <div class="absolute inset-0 pointer-events-none opacity-5" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 40px 40px;"></div>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
    <div class="inline-flex items-center gap-2 rounded-full px-4 py-1.5 mb-5 border" style="background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);">
      <span class="text-sm">🇮🇳🇳🇵</span>
      <span class="text-xs font-semibold tracking-widest uppercase text-white/80">India-Nepal Border</span>
    </div>
    <h1 class="text-4xl sm:text-5xl font-black text-white mb-4" style="letter-spacing:-0.04em;">Why <span style="color:var(--accent);">Sunauli Border</span><br>for Pharmaceutical Trade?</h1>
    <p class="text-lg max-w-2xl" style="color:rgba(255,255,255,0.65);">India's premier pharmaceutical gateway to Nepal — where geography, compliance, and expertise meet.</p>
  </div>
  <div class="absolute bottom-0 left-0 right-0 overflow-hidden">
    <svg viewBox="0 0 1440 50" preserveAspectRatio="none" class="w-full h-[36px]" fill="white"><path d="M0,50 C360,0 1080,0 1440,50 L1440,50 L0,50 Z"/></svg>
  </div>
</section>

{{-- ── KEY REASONS ───────────────────────────────────────── --}}
<section class="py-20" style="background:white;">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="space-y-12">
      @foreach([
        ['1','📍','Prime Location at the Nepal Border','Sunauli-Bhairahawa is one of India\'s busiest and most accessible land border crossings with Nepal. Located in Maharajganj district, UP, it connects directly to Bhairahawa (Rupandehi district) in Nepal — a major commercial hub. The proximity means lower transport costs and faster delivery times compared to other border points.'],
        ['2','🏪','Well-Established Pharmaceutical Trade Network','Sunauli has a long history as a pharmaceutical trading hub. Distributors like Chandra & Sons have been serving clients on both sides of the border for over a decade, with established relationships with top Indian pharmaceutical manufacturers and authorized distribution networks.'],
        ['3','💰','Competitive Pricing from UP Wholesale Markets','Maharajganj and the surrounding region of eastern Uttar Pradesh have access to medicines from some of India\'s largest manufacturing hubs. This means competitive wholesale pricing that benefits Nepali importers significantly.'],
        ['4','📋','Documentation & Compliance Support','Experienced distributors at Sunauli understand the documentation requirements for pharmaceutical export to Nepal — from commercial invoices and packing lists to quality certificates. This expertise reduces compliance headaches for Nepali buyers.'],
        ['5','💊','Wide Product Range Available','At Sunauli, buyers can access branded medicines from all major Indian pharmaceutical companies, generic alternatives, surgical supplies, OTC products, and more — all in one place.'],
        ['6','⚡','Fast Cross-Border Delivery','Our proximity to the border means faster order fulfilment for Nepali clients compared to sourcing from distant Indian cities. We maintain deep stock of high-demand medicines for same-day collection.'],
      ] as [$num,$icon,$title,$desc])
      <div class="flex gap-6 reveal">
        <div class="flex-shrink-0">
          <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl" style="background:var(--primary-light);">{{ $icon }}</div>
        </div>
        <div>
          <div class="flex items-center gap-3 mb-2">
            <span class="text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center" style="background:var(--primary);color:white;">{{ $num }}</span>
            <h2 class="text-xl font-black" style="color:var(--dark);letter-spacing:-0.02em;">{{ $title }}</h2>
          </div>
          <p class="leading-relaxed" style="color:var(--text-muted);">{{ $desc }}</p>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ── STATS ─────────────────────────────────────────────── --}}
<section class="py-14" style="background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
      @foreach([['#1','Border Crossing','for pharma trade India–Nepal'],['150+','Brand Partners','all major Indian pharma brands'],['10+','Years','serving both sides of the border'],['24hr','Response','for Nepal pre-orders']] as [$num,$label,$sub])
      <div>
        <p class="text-4xl font-black" style="color:var(--primary);letter-spacing:-0.04em;">{{ $num }}</p>
        <p class="font-bold text-sm mt-1" style="color:var(--dark);">{{ $label }}</p>
        <p class="text-xs mt-0.5" style="color:var(--text-muted);">{{ $sub }}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ── CTA ────────────────────────────────────────────────── --}}
<section class="py-16" style="background:linear-gradient(135deg,var(--primary) 0%,#095E6B 100%);">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <span class="text-5xl mb-4 block">🇳🇵</span>
    <h2 class="text-3xl font-black text-white mb-4" style="letter-spacing:-0.03em;">Ready to Order from Nepal?</h2>
    <p class="text-lg mb-8" style="color:rgba(255,255,255,0.70);">Chandra &amp; Sons is your trusted pharmaceutical partner at Sunauli Border. Contact us today for competitive quotes and fast delivery.</p>
    <div class="flex flex-wrap gap-3 justify-center">
      <a href="{{ lang_url('/services/export-to-nepal') }}" class="btn-accent">{{ __('site.home_nepal_btn') }}</a>
      <a href="{{ lang_url('/contact') }}" class="btn-outline-white">{{ __('site.btn_contact_us') }}</a>
    </div>
  </div>
</section>

@endsection
@push('scripts')
<script>
const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting){e.target.classList.add('visible');obs.unobserve(e.target);} }); }, {threshold:0.10});
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
</script>
@endpush