@extends('layouts.app')

@section('title', 'About Us — A1 Movex Global Services')
@section('description', '12+ years of freight forwarding experience — learn about A1 Movex\'s mission, values and the people behind 2,000+ successful global shipments.')

@section('content')
<!-- ═══════════════════════════════════════════════════════════
     HERO
═══════════════════════════════════════════════════════════ -->
<section class="relative pt-28 pb-10 lg:pt-32 lg:pb-14 overflow-hidden bg-[#060c1b] text-white">
  <div class="absolute inset-0 hero-bg-zoom" style="background-image:url('https://images.unsplash.com/photo-1664382953403-fc1ac77073a0?auto=format&fit=crop&w=1600&q=80');background-size:cover;background-position:center"></div>
  <div class="absolute inset-0" style="background:linear-gradient(100deg, rgba(6,12,27,.93) 0%, rgba(6,12,27,.8) 45%, rgba(6,12,27,.55) 100%)"></div>
  <div class="absolute inset-0 grid-overlay-dark opacity-25"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="max-w-[640px] zoom-reveal">
      <nav class="flex items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4 text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">
        <a href="{{ route('home') }}" class="hover:text-white/70 transition-colors duration-200">Home</a>
        <span class="text-white/25">/</span>
        <span class="text-white/60">About Us</span>
      </nav>
      <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-5">
        <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
        <span class="text-[10px] font-semibold text-white/55 tracking-[0.2em] uppercase">About Us</span>
      </div>
      <div class="hero-heading-mask overflow-hidden">
        <h1 class="hero-heading font-display font-extrabold leading-[1.05] tracking-tight" style="font-size:clamp(1.75rem,3.4vw,2.75rem)">
          Moving mission with <span class="text-gradient-red">creative vision.</span>
        </h1>
      </div>
    </div>
  </div>

  <!-- Floating trust chip — desktop only -->
  <div class="hero-float-chip hidden lg:flex flex-col items-start glass rounded-2xl px-6 py-5 absolute right-10 xl:right-16 top-1/2 -translate-y-1/2 z-10">
    <span class="font-display font-black leading-none" style="font-size:1.9rem">12+</span>
    <span class="text-[11px] font-semibold text-white/55 uppercase tracking-wide mt-1.5">Years Experience</span>
  </div>

  <!-- Scroll cue -->
  <div class="absolute bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
    <div class="relative" style="width:2px;height:30px;background:rgba(255,255,255,.3)">
      <span class="hero-scroll-dot absolute left-1/2 -translate-x-1/2 top-0 w-1.5 h-1.5 rounded-full bg-white"></span>
    </div>
    <span class="text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">Scroll</span>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     COMPANY STORY / MISSION / VISION
═══════════════════════════════════════════════════════════ -->
<section class="bg-white relative">
  <div class="max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="pt-24 lg:pt-36 pb-14 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:justify-between zoom-reveal">
      <div>
        <span class="section-label">Who We Are</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          Built on trust,<br/><span class="text-gradient-red">driven by purpose.</span>
        </h2>
      </div>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed max-w-sm mt-6 lg:mt-0 lg:mb-2">A decade of disciplined execution across air, ocean, road and customs — one accountable partner from first mile to final delivery.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-24 lg:pb-32">
      <!-- Our Story -->
      <div class="zoom-reveal bg-white rounded-3xl p-8 lg:p-10 border border-[#d6dcec] flex flex-col justify-between">
        <div>
          <h3 class="font-display font-bold text-[#0c1427] text-2xl mb-4">Our Story</h3>
          <p class="text-sm lg:text-base text-[#64748b] leading-relaxed mb-6">Movex Services Pvt. Ltd. is the most customer friendly freight forwarding company in India and beyond — built on innovation, customer focus, quality commitment and professionalism. Our customers are an integral part of our business, not just a line item on an invoice.</p>
        </div>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag-light" style="color:#c8102e;background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.18)">Customer Focused</span>
          <span class="svc-tag-light" style="color:#c8102e;background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.18)">12+ Years</span>
        </div>
      </div>

      <!-- Photo accent tile -->
      <div class="zoom-reveal rounded-3xl overflow-hidden relative group" style="min-height:200px">
        <div class="absolute inset-0" style="background-image:url('{{ asset('images/cargo-ship.webp') }}');background-size:cover;background-position:center;transition:transform .4s ease"></div>
        <div class="absolute inset-0" style="background:linear-gradient(to top, rgba(6,12,27,.9) 0%, rgba(6,12,27,.35) 60%, transparent 100%)"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-7">
          <p class="text-xs font-medium text-white/50 italic tracking-wide">— Trusted to Move the World</p>
        </div>
      </div>

      <!-- Our Mission -->
      <div class="zoom-reveal bg-[#f5f7ff] rounded-3xl p-7 border border-[#d6dcec]">
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Our Mission</h3>
        <p class="text-sm text-[#64748b] leading-relaxed mb-5">To provide quality management in Global Logistics Solutions through excellence in innovation, productivity and service — offering real value to our customers and employees, and making a positive contribution to the environment and society.</p>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag-light" style="color:#c8102e;background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.18)">Quality Management</span>
          <span class="svc-tag-light" style="color:#c8102e;background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.18)">Innovation</span>
        </div>
      </div>

      <!-- Our Vision -->
      <div class="zoom-reveal bg-[#0c1427] rounded-3xl p-7">
        <h3 class="font-display font-bold text-white text-xl mb-3">Our Vision</h3>
        <p class="text-sm text-white/60 leading-relaxed mb-5">Our strengths are our people and our values, which have made us market leaders in logistics. We continue to invest in innovation and technology as the differentiators that keep our clients ahead.</p>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag" style="color:#ff9daa;background:rgba(200,16,46,.16);border-color:rgba(200,16,46,.32)">People First</span>
          <span class="svc-tag" style="color:#ff9daa;background:rgba(200,16,46,.16);border-color:rgba(200,16,46,.32)">Technology</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     STATS — 4-up
═══════════════════════════════════════════════════════════ -->
<section class="bg-[#f5f7ff] relative overflow-hidden">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="pt-24 lg:pt-36 pb-14 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:justify-between zoom-reveal">
      <div>
        <span class="section-label">By The Numbers</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          A decade of proof,<br/>not <span class="text-gradient-red">promises.</span>
        </h2>
      </div>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed max-w-sm mt-6 lg:mt-0 lg:mb-2">The scale behind every shipment we move — measured in years, projects, people and partners.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 pb-24 lg:pb-32">
      <div class="stat-card zoom-reveal bg-white rounded-3xl border border-[#d6dcec] overflow-hidden">
        <div class="p-6">
          <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style="background:rgba(200,16,46,.08)">
            <svg class="w-5 h-5" style="color:#c8102e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="12" data-suffix="+">12+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Years Experience</div>
          <p class="text-sm text-[#64748b] leading-relaxed">Over a decade of disciplined freight forwarding across every mode.</p>
        </div>
      </div>
      <div class="stat-card zoom-reveal bg-white rounded-3xl border border-[#d6dcec] overflow-hidden">
        <div class="p-6">
          <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style="background:rgba(200,16,46,.08)">
            <svg class="w-5 h-5" style="color:#c8102e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"/></svg>
          </div>
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="2000" data-suffix="+">2,000+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Projects Completed</div>
          <p class="text-sm text-[#64748b] leading-relaxed">From single shipments to complex, multi-component project cargo.</p>
        </div>
      </div>
      <div class="stat-card zoom-reveal bg-white rounded-3xl border border-[#d6dcec] overflow-hidden">
        <div class="p-6">
          <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style="background:rgba(200,16,46,.08)">
            <svg class="w-5 h-5" style="color:#c8102e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
          </div>
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="100" data-suffix="+">100+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Employees</div>
          <p class="text-sm text-[#64748b] leading-relaxed">A trained, professional team backed by experienced logistics management.</p>
        </div>
      </div>
      <div class="stat-card zoom-reveal bg-white rounded-3xl border border-[#d6dcec] overflow-hidden">
        <div class="p-6">
          <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style="background:rgba(200,16,46,.08)">
            <svg class="w-5 h-5" style="color:#c8102e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A8.959 8.959 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg>
          </div>
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="450" data-suffix="+">450+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Worldwide Clients</div>
          <p class="text-sm text-[#64748b] leading-relaxed">Businesses across the globe trust us with their supply chains.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     WHY CHOOSE US — 3-up feature cards
═══════════════════════════════════════════════════════════ -->
<section class="bg-white relative">
  <div class="max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="pt-24 lg:pt-36 pb-14 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:justify-between zoom-reveal">
      <div>
        <span class="section-label">Why Choose Us</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          What sets us<br/><span class="text-gradient-red">apart.</span>
        </h2>
      </div>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed max-w-sm mt-6 lg:mt-0 lg:mb-2">Our strengths are our people and our values — the market leadership follows from there.</p>
    </div>

    <div class="why-list zoom-reveal pb-24 lg:pb-32" id="why-list">
      <div class="why-row" data-img="https://images.unsplash.com/photo-1758518732175-5d608ba3abdf?auto=format&fit=crop&w=480&q=80">
        <span class="why-index">01</span>
        <div class="why-content">
          <h3 class="why-title">Personnel Professionalism</h3>
          <p class="why-desc">Every client interaction is handled by trained specialists who treat your cargo — and your deadlines — as their own responsibility.</p>
        </div>
        <div class="why-thumb-mobile" style="background-image:url('https://images.unsplash.com/photo-1758518732175-5d608ba3abdf?auto=format&fit=crop&w=200&q=80')"></div>
      </div>
      <div class="why-row" data-img="https://images.unsplash.com/photo-1749244768351-2726dc23d26c?auto=format&fit=crop&w=480&q=80">
        <span class="why-index">02</span>
        <div class="why-content">
          <h3 class="why-title">Structural Organization</h3>
          <p class="why-desc">A properly structured organization means clear ownership at every stage of your shipment — no dropped handoffs, no ambiguity.</p>
        </div>
        <div class="why-thumb-mobile" style="background-image:url('https://images.unsplash.com/photo-1749244768351-2726dc23d26c?auto=format&fit=crop&w=200&q=80')"></div>
      </div>
      <div class="why-row" data-img="https://images.unsplash.com/photo-1664382953403-fc1ac77073a0?auto=format&fit=crop&w=480&q=80">
        <span class="why-index">03</span>
        <div class="why-content">
          <h3 class="why-title">Experienced Management</h3>
          <p class="why-desc">Our leadership specializes in logistics — decisions on your shipments are made by people who have spent their careers solving exactly these problems.</p>
        </div>
        <div class="why-thumb-mobile" style="background-image:url('https://images.unsplash.com/photo-1664382953403-fc1ac77073a0?auto=format&fit=crop&w=200&q=80')"></div>
      </div>
    </div>
  </div>
</section>
<div class="why-float-img" id="why-float-img"></div>

<!-- ═══════════════════════════════════════════════════════════
     RELATED SERVICES — same numbered-list + hover-preview treatment as
     the service-detail template (see .related-list handling in app.js)
═══════════════════════════════════════════════════════════ -->
<section class="bg-[#f5f7ff] relative overflow-hidden">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 py-16 lg:py-20">
    <div class="mb-14 zoom-reveal">
      <span class="section-label">Explore More</span>
      <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.2rem,4vw,3.4rem)">Our <span class="text-gradient-red">services.</span></h2>
    </div>
    @php
      $allServices = \App\Support\ServiceCatalog::all();
      $relatedTotal = count($allServices);
    @endphp
    <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-x-16 related-list">
      @foreach ($allServices as $index => $related)
      @php $relatedOrphan = ($index + 1) === $relatedTotal && $relatedTotal % 2 === 1; @endphp
      <a href="{{ route($related['route']) }}" data-preview-image="{{ $related['image'] }}" class="related-row group flex items-center justify-between gap-6 py-8 px-6 border-t hover:bg-[#0c14270a] transition-colors duration-200{{ $relatedOrphan ? ' lg:col-span-2' : '' }}" style="border-color:#eee">
        <div class="flex items-center gap-6">
          <span class="font-display flex-shrink-0" style="font-size:36px;font-weight:300;line-height:1;color:#c9c9c9;font-variant-numeric:tabular-nums">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
          <span class="font-display font-bold text-[#0c1427] text-lg transition-colors duration-200 group-hover:text-[#c8102e]">{{ $related['name'] }}</span>
        </div>
        <span class="flex items-center justify-center flex-shrink-0 rounded-full border transition-all duration-200 group-hover:bg-[#0c1427] group-hover:border-[#0c1427]" style="width:40px;height:40px;border-color:#e2e5ee">
          <svg class="w-4 h-4 transition-all duration-200 text-[#0c1427]/35 group-hover:text-white group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
        </span>
      </a>
      @endforeach
    </div>
  </div>
  <div class="related-hover-preview pointer-events-none fixed top-0 left-0 z-50 opacity-0 rounded-xl overflow-hidden" id="related-hover-preview" style="width:220px; height:150px;">
    <img class="related-hover-preview-img w-full h-full object-cover" src="" alt=""/>
    <img class="related-hover-preview-img w-full h-full object-cover" src="" alt=""/>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     CTA
═══════════════════════════════════════════════════════════ -->
<section class="relative py-12 lg:py-16 overflow-hidden grain cta-bg">
  <div class="absolute inset-0 grid-overlay-dark opacity-28"></div>
  <div class="absolute right-[-2%] top-1/2 -translate-y-1/2 font-display font-black leading-none text-white/[0.022] pointer-events-none select-none hidden xl:block" style="font-size:18vw">A1</div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 text-center zoom-reveal">
    <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-6">
      <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
      <span class="text-[10px] font-semibold text-white/48 tracking-[0.2em] uppercase">Ready to Ship?</span>
    </div>
    <h2 class="font-display font-extrabold text-white leading-[0.97] tracking-tight mb-5" style="font-size:clamp(2.4rem,5.5vw,5.5rem)">
      Let's move the world<br/>together.
    </h2>
    <p class="text-white/42 leading-relaxed mb-8 max-w-lg mx-auto font-light" style="font-size:clamp(.95rem,1.4vw,1.1rem)">Get a tailored logistics proposal in under 24 hours — no obligations, just a clear plan and an honest price.</p>
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <a href="{{ route('contact') }}" class="btn-primary font-display font-bold text-white px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        Get a Free Quote
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
      </a>
      <a href="tel:+911142630977" class="btn-ghost font-display font-semibold px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
        Speak to a Specialist
      </a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     FOOTER
═══════════════════════════════════════════════════════════ -->
@endsection
