@extends('layouts.site')

@section('title', 'Our Services — OMA Business Hub')
@section('description', 'Company formation, PRO services, licensing, visas, legal documentation and corporate compliance — every OMA service delivered by a partner-led team.')

@push('styles')
<style>
.services-detailed{padding-top:150px;}

.service-category{margin-bottom:76px; position:relative; z-index:1;}
.service-category:last-of-type{margin-bottom:0;}
.cat-head{margin-bottom:32px;}
.cat-head .eyebrow{margin-bottom:12px;}
.cat-head-row{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(216,174,92,0.22);
  padding-bottom:18px; gap:20px; flex-wrap:wrap;
}
.cat-head-row h3{
  font-size:clamp(1.6rem,2.2vw,2.1rem);
  color:#31261a;
}
.cat-count{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-bright);
  white-space:nowrap;
}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  align-items:stretch;
}
@media(max-width:1200px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .cat-grid{grid-template-columns:1fr;} }

.service-card{
  overflow:visible;
  height:100%;
  display:flex;
  flex-direction:column;
}
.service-card .enq{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px;
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  transition:gap .25s ease;
}
.service-card:hover .enq{gap:10px; color:var(--gold-bright);}

@media(max-width:640px){
  .services-detailed{padding-top:130px;}
}

/* ---- Services hero banner ---- */
#services.services-detailed{
  padding:0;
  background:rgba(116, 90, 58, 0.16);
  color:var(--ink);
  padding-bottom:110px;
}

/* ---- Services intro (ornamental) ---- */
.services-intro{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:150px 0 90px;
  background:var(--paper);
  overflow:hidden;
}

.services-intro-dots{
  position:absolute;
  top:60px; left:0;
  width:140px; height:220px;
  background-image:radial-gradient(circle, rgba(169,126,47,0.35) 1.5px, transparent 1.5px);
  background-size:18px 18px;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
}

.services-intro-lines{
  position:absolute;
  top:40px; right:-40px;
  width:520px; height:340px;
  pointer-events:none;
  z-index:0;
}
.services-intro-lines svg{width:100%; height:100%;}

.services-intro-head{
  text-align:center;
  max-width:640px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.services-intro-head .eyebrow{
  justify-content:center;
  color:var(--gold);
}
.services-intro-head .eyebrow::before{
  display:inline-block;
  width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.services-intro-head .eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}

.services-intro-head h2{
  color:var(--ink);
  font-size:clamp(2.4rem, 4vw, 3.4rem);
  margin-top:14px;
}

.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:20px auto 0;
}
.ornament .oline{
  width:44px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.ornament .oline.right{
  background:linear-gradient(90deg, var(--gold), transparent);
}
.ornament .odiamond{
  width:7px; height:7px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}

.services-intro-head p{
  margin-top:22px;
  color:var(--ink-soft);
  font-size:0.98rem;
  line-height:1.85;
}

.services-stat-cards{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:30px;
  margin-top:76px;
  position:relative;
  z-index:1;
}

.stat-card{
  position:relative;
  background:#fdfbf6;
  border:1px solid var(--line-soft);
  border-radius:22px;
  padding:52px 30px 30px;
  width:220px;
  text-align:center;
  box-shadow:0 26px 46px -30px rgba(20,15,5,0.22);
  transition:transform .3s ease, box-shadow .3s ease;
}
.stat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 52px -26px rgba(169,126,47,0.32);
}

.stat-card .sic{
  position:absolute;
  top:-34px; left:50%;
  transform:translateX(-50%);
  width:68px; height:68px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 24px -14px rgba(20,15,5,0.22);
}
.stat-card .sic svg{width:26px; height:26px; stroke:var(--gold); fill:none;}

.stat-card h3{
  margin-top:22px;
  font-size:2.2rem;
  color:var(--ink);
}

.stat-card .div{
  width:28px; height:2px;
  background:var(--gold);
  margin:14px auto;
}

.stat-card span{
  display:block;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
}

.stat-card .div-bottom{
  width:22px; height:2px;
  background:var(--gold);
  margin:20px auto 0;
  opacity:0.7;
}

.services-intro-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:80px;
  position:relative;
  z-index:1;
}
.services-intro-divider .dline{
  width:70px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,126,47,0.5));
}
.services-intro-divider .dline.right{
  background:linear-gradient(90deg, rgba(169,126,47,0.5), transparent);
}
.services-intro-divider .ddot{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold);
}
.services-intro-divider .odiamond{
  width:8px; height:8px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}

.services-categories{ padding-top:90px; }

@media(max-width:900px){
  .services-intro-lines{display:none;}
  .services-intro-dots{opacity:0.3;}
}
@media(max-width:640px){
  .services-intro{padding:130px 0 70px; min-height:auto;}
  .services-intro-dots{width:80px; height:140px;}
  .stat-card{width:160px; padding:44px 20px 24px;}
  .stat-card h3{font-size:1.7rem;}
  .services-intro-divider{margin-top:60px;}
}

/* ---- Enquire hover tooltip ---- */
.enq-wrap{
  position:relative;
  display:inline-block;
  margin-top:auto;
}

.enq-tooltip{
  position:absolute;
  bottom:calc(100% + 14px);
  left:0;
  width:230px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:0 24px 44px -22px rgba(20,15,5,0.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:20;
  text-align:left;
}

.enq-tooltip::after{
  content:"";
  position:absolute;
  top:100%;
  left:22px;
  border:7px solid transparent;
  border-top-color:var(--paper);
}

.enq-tooltip p{
  margin:0;
  font-size:0.83rem;
  line-height:1.65;
  color:var(--ink-soft);
}

.enq-wrap:hover .enq-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media(max-width:600px){
  .enq-tooltip{
    left:50%;
    width:min(230px, calc(100vw - 40px));
    transform:translateX(-50%) translateY(8px);
  }
  .enq-wrap:hover .enq-tooltip{
    transform:translateX(-50%) translateY(0);
  }
  .enq-tooltip::after{
    left:50%;
    transform:translateX(-50%);
  }
}
</style>
@endpush

@section('content')

@php
  $categories = [
    [
      'tag' => 'Setup', 'title' => 'Business Setup &amp; Licensing', 'count' => '3 services',
      'items' => [
        ['icon' => '<path d="M4 7h16v12H4z"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M4 12h16"/>', 'title' => 'Business Setup', 'blurb' => 'Mainland, free zone and offshore incorporation across all seven Emirates.'],
        ['icon' => '<path d="M4 7h16v12H4z"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M4 12h16"/>', 'title' => 'Company Formation', 'blurb' => 'Strategic entity design tailored to shareholders and tax exposure.'],
        ['icon' => '<path d="M4 4h16v16H4z"/><path d="M4 9h16M9 9v11"/>', 'title' => 'Trade Licenses', 'blurb' => 'Commercial, professional and industrial licensing structured around your model.'],
      ],
    ],
    [
      'tag' => 'PRO', 'title' => 'PRO &amp; Government', 'count' => '2 services',
      'items' => [
        ['icon' => '<circle cx="12" cy="12" r="9"/><path d="M8 12h8M8 9h5M8 15h5"/>', 'title' => 'PRO Services', 'blurb' => 'End-to-end public relations officer support with same-day turnarounds.'],
        ['icon' => '<path d="M4 21V9l8-6 8 6v12"/><path d="M4 21h16M9 21v-8h6v8"/>', 'title' => 'Government Transactions', 'blurb' => 'Direct liaison with federal and local authorities on your behalf.'],
      ],
    ],
    [
      'tag' => 'Visa', 'title' => 'Visa &amp; Residency', 'count' => '3 services',
      'items' => [
        ['icon' => '<path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>', 'title' => 'Visa Services', 'blurb' => 'Investor, employment and family residency processed with precision.'],
        ['icon' => '<path d="M4 5h16v14H4z"/><circle cx="9" cy="10" r="2"/><path d="M6 16c.6-2 1.9-3.2 3.7-3.2s3.1 1.2 3.7 3.2"/><path d="M14 8h4M14 11h4"/>', 'title' => 'Residency Services', 'blurb' => 'Long-term residency planning for principals, executives and dependents.'],
        ['icon' => '<path d="M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7-5.4-4.7 7.1-.6z"/>', 'title' => 'Golden Visa', 'blurb' => 'Ten-year residency for investors, talents and specialised professionals.'],
      ],
    ],
    [
      'tag' => 'Legal', 'title' => 'Legal &amp; Documentation', 'count' => '4 services',
      'items' => [
        ['icon' => '<path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5M9 15h6M9 18h4"/>', 'title' => 'Legal Documentation', 'blurb' => 'Contracts, MOAs and notarisation prepared by in-house counsel.'],
        ['icon' => '<path d="M3 21h4l11.5-11.5-4-4L3 17v4z"/><path d="M14.5 5.5l4 4"/>', 'title' => 'Power of Attorney', 'blurb' => 'Drafting, notarisation and legalisation across jurisdictions.'],
        ['icon' => '<path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5"/><path d="M9 13h6M9 16h6M9 10h3"/>', 'title' => 'Contract Drafting', 'blurb' => 'Bilingual commercial contracts tuned to UAE and international law.'],
        ['icon' => '<path d="M5 8l4 4M9 12l4-5M3 5h10M8 2v2"/><path d="M22 21l-5-11-5 11M14 17h6"/>', 'title' => 'Legal Translation', 'blurb' => 'Certified Arabic &harr; English translation for legal and corporate filings.'],
      ],
    ],
    [
      'tag' => 'Corporate', 'title' => 'Corporate &amp; Compliance', 'count' => '4 services',
      'items' => [
        ['icon' => '<circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><circle cx="6" cy="17" r="2"/><circle cx="18" cy="17" r="2"/><path d="M6 15v-2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2"/>', 'title' => 'Corporate Structuring', 'blurb' => 'Holdings, SPVs and family office architecture with full compliance.'],
        ['icon' => '<path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5M9 13l2 2 4-4"/>', 'title' => 'Company Liquidation', 'blurb' => 'Orderly, compliant wind-downs with authority clearance end-to-end.'],
        ['icon' => '<path d="M12 3l8 4v5c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V7z"/><path d="M9 12l2 2 4-4"/>', 'title' => 'Corporate Compliance', 'blurb' => 'UBO, ESR, VAT and corporate tax filings, seamlessly managed.'],
        ['icon' => '<path d="M4 19h16"/><path d="M7 15l4-4 3 3 6-7"/><path d="M17 7h4v4"/>', 'title' => 'Business Expansion', 'blurb' => 'Cross-emirate and international expansion strategy and execution.'],
      ],
    ],
  ];
@endphp

<section id="services" class="band-dark services-detailed">

  <div class="services-intro">
    <div class="services-intro-dots"></div>
    <div class="services-intro-lines">
      <svg viewBox="0 0 520 340" xmlns="http://www.w3.org/2000/svg">
        <path d="M60,320 C180,300 260,220 340,140 C380,100 420,70 500,40" stroke="#a97e2f" stroke-opacity="0.3" stroke-width="1.2" fill="none"/>
        <path d="M100,320 C210,300 280,230 350,160 C390,120 430,90 500,70" stroke="#a97e2f" stroke-opacity="0.22" stroke-width="1.2" fill="none"/>
        <path d="M140,320 C230,300 300,240 360,180 C400,140 440,110 500,100" stroke="#a97e2f" stroke-opacity="0.16" stroke-width="1.2" fill="none"/>
      </svg>
    </div>

    <div class="wrap services-intro-head reveal">
      <div class="eyebrow">What We Do</div>
      <h2>Our Services</h2>
      <div class="ornament">
        <span class="oline"></span>
        <span class="odiamond"></span>
        <span class="oline right"></span>
      </div>
      <p>From formation to golden visa, every OMA service is delivered by a partner-led team with direct access to twelve government authorities.</p>
    </div>

    <div class="wrap">
      <div class="services-stat-cards reveal">
        <div class="stat-card">
          <div class="sic"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M8 6h11M8 12h11M8 18h11"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg></div>
          <h3>16</h3>
          <div class="div"></div>
          <span>Service Lines</span>
          <div class="div-bottom"></div>
        </div>

        <div class="stat-card">
          <div class="sic"><svg viewBox="0 0 24 24" stroke-width="1.4"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg></div>
          <h3>24h</h3>
          <div class="div"></div>
          <span>Avg. Response</span>
          <div class="div-bottom"></div>
        </div>

        <div class="stat-card">
          <div class="sic"><svg viewBox="0 0 24 24" stroke-width="1.4"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="9" r="2.4"/><path d="M15.5 12.5c2.6.3 4.5 2.4 4.5 5"/></svg></div>
          <h3>98%</h3>
          <div class="div"></div>
          <span>Client Retention</span>
          <div class="div-bottom"></div>
        </div>

        <div class="stat-card">
          <div class="sic"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M4 21V9l8-6 8 6v12"/><path d="M4 21h16M9 21v-8h6v8"/></svg></div>
          <h3>12</h3>
          <div class="div"></div>
          <span>Authorities</span>
          <div class="div-bottom"></div>
        </div>
      </div>
    </div>

    <div class="services-intro-divider">
      <span class="dline"></span>
      <span class="ddot"></span>
      <span class="odiamond"></span>
      <span class="ddot"></span>
      <span class="dline right"></span>
    </div>
  </div>

  <div class="wrap services-categories">
    @foreach ($categories as $category)
      <div class="service-category reveal">
        <div class="cat-head">
          <div class="eyebrow">{{ $category['tag'] }}</div>
          <div class="cat-head-row">
            <h3>{!! $category['title'] !!}</h3>
            <span class="cat-count">{{ $category['count'] }}</span>
          </div>
        </div>
        <div class="services-grid cat-grid">
          @foreach ($category['items'] as $item)
            <div class="service-card">
              <div class="si"><svg viewBox="0 0 24 24" stroke-width="1.4">{!! $item['icon'] !!}</svg></div>
              <h4>{{ $item['title'] }}</h4>
              <div class="enq-wrap">
                <span class="enq">Enquire →</span>
                <div class="enq-tooltip"><p>{!! $item['blurb'] !!}</p></div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </div>

</section>

@endsection

@push('scripts')
<script>
  $(function(){
    var $statEls = $('.stat-card h3');
    if (!$statEls.length || !('IntersectionObserver' in window)) return;

    function animateStat(el){
      var $el = $(el);
      var match = $el.data('final').toString().match(/^([\d,]+\.?\d*)(.*)$/);
      if (!match) { $el.text($el.data('final')); return; }
      var endNum = parseFloat(match[1].replace(/,/g, ''));
      var suffix = match[2];
      var hasComma = match[1].indexOf(',') !== -1;
      var duration = 1600;
      var start = performance.now();
      function tick(now){
        var p = Math.min((now - start) / duration, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        var val = Math.round(endNum * eased);
        $el.text((hasComma ? val.toLocaleString() : val) + suffix);
        if (p < 1) requestAnimationFrame(tick);
        else $el.text($el.data('final'));
      }
      requestAnimationFrame(tick);
    }

    var obs = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if (entry.isIntersecting) {
          animateStat(entry.target);
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.4 });

    $statEls.each(function(){
      $(this).data('final', $(this).text().trim());
      $(this).text('0');
      obs.observe(this);
    });
  });
</script>
@endpush