@extends('layouts.site')

@section('title', 'Government Authorities — OMA Business Hub')
@section('description', 'Direct lines to the UAE government institutions that matter — ADJD, ICP, DED, MOHRE, MoET and more, handled by OMA Business Hub.')

@push('styles')
<style>
.auth-hero{
  position:relative;
  padding:170px 0 90px;
  background: rgb(170, 166, 152);
  overflow:hidden;
}

.auth-hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}

.auth-hero-text .eyebrow{color:var(--gold);}

.auth-hero-text h1{
  font-size:clamp(2.3rem, 4.2vw, 3.6rem);
  line-height:1.12;
  color:var(--ink);
  margin-top:14px;
}

.auth-hero-text h1 em{
  font-style:italic;
  background:linear-gradient(100deg, var(--gold) 10%, var(--gold-bright) 40%, var(--gold) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.auth-hero-divider{
  width:60px;
  height:2px;
  background:var(--gold);
  margin:26px 0;
}

.auth-hero-text p.lead{
  font-size:1.02rem;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:460px;
}

.auth-hero-visual{
  position:relative;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-hero-visual::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:340px; height:340px;
  border-radius:50%;
  border:1px solid rgba(216,174,92,0.16);
  transform:translate(-50%,-50%);
}

.auth-hero-visual::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:260px; height:260px;
  border-radius:50%;
  border:1px solid rgba(216,174,92,0.12);
  transform:translate(-50%,-50%);
}

.auth-hero-lines{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.auth-hero-lines svg{width:100%; height:100%;}

.auth-hero-badge{
  position:relative;
  z-index:2;
  width:170px; height:170px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 30px 60px -20px rgba(169,126,47,0.35),
    0 0 0 24px rgba(216,174,92,0.07);
}
.auth-hero-badge svg{
  width:70px; height:70px;
  stroke:var(--gold);
  fill:none;
  stroke-width:1.2;
}

@media(max-width:900px){
  .auth-hero{padding:160px 0 60px;}
  .auth-hero-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .auth-hero-text .eyebrow{justify-content:center;}
  .auth-hero-text .eyebrow::before{display:none;}
  .auth-hero-divider{margin:22px auto;}
  .auth-hero-text p.lead{margin:0 auto;}
  .auth-hero-visual{min-height:210px;}
  .auth-hero-lines{display:none;}
  .auth-hero-visual::before{width:180px; height:180px;}
  .auth-hero-visual::after{width:130px; height:130px;}
  .auth-hero-badge{width:120px; height:120px;}
  .auth-hero-badge svg{width:50px; height:50px;}
}
.why-matters{padding:120px 0;}
.why-matters-grid{
  display:grid; grid-template-columns:0.9fr 1fr; gap:60px;
  align-items:flex-start; position:relative; z-index:1;
}
.why-matters-grid h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  max-width:420px;
}
.why-matters-grid p{
  font-size:1rem; line-height:1.85; color:var(--ink-soft); max-width:480px; margin-top:8px;
}
@media(max-width:900px){.why-matters-grid{grid-template-columns:1fr; gap:28px;}}

.auth-directory{background:var(--paper-dim); padding:110px 0;}
.auth-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  position:relative; z-index:1;
}
.auth-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  padding:34px 30px;
  display:flex; flex-direction:column;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.auth-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 24px 40px -26px rgba(169,126,47,0.4);
}
.auth-card .ai{
  width:46px; height:46px; border-radius:50%;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.auth-card .ai svg{width:20px; height:20px; stroke:var(--gold-bright); fill:none;}
.auth-card .auth-tag{
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; display:block;
}
.auth-card h4{font-size:1.12rem; line-height:1.32; margin-bottom:10px;}
.auth-card p.desc{font-size:0.85rem; color:var(--ink-soft); line-height:1.6; margin:0 0 18px;}
.auth-card ul{
  list-style:none; margin:0 0 20px; padding:14px 0 0;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:8px;
}
.auth-card ul li{
  font-size:0.82rem; color:var(--ink-soft); position:relative; padding-left:14px;
}
.auth-card ul li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; background:var(--gold); border-radius:50%;
}
.auth-card .req-link{
  margin-top:auto;
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:6px;
  border-top:1px solid var(--line-soft); padding-top:16px; transition:gap .25s ease;
}
.auth-card:hover .req-link{gap:10px; color:var(--gold-bright);}
@media(max-width:1100px){.auth-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.auth-grid{grid-template-columns:1fr;}}

.concierge-section{padding:100px 0 130px;}
.concierge-panel{
  display:flex; justify-content:space-between; align-items:center; gap:40px;
  background:var(--paper-dim); border:1px solid var(--line-soft);
  padding:56px 60px; flex-wrap:wrap;
  box-shadow:0 30px 60px -40px rgba(20,15,5,0.15);
  position:relative; z-index:1;
}
.concierge-panel h2{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:14px; max-width:480px;}
.concierge-panel p{margin-top:16px; max-width:460px; font-size:0.94rem; color:var(--ink-soft); line-height:1.7;}
.concierge-actions{display:flex; gap:16px; flex-wrap:wrap;}
@media(max-width:900px){.concierge-panel{flex-direction:column; align-items:flex-start; padding:44px 34px;}}
</style>
@endpush

@section('content')

<section class="auth-hero">
  <div class="wrap auth-hero-grid reveal">

    <div class="auth-hero-text">
      <div class="eyebrow">Government Access</div>
      <h1>Direct lines to the <em>institutions</em> that matter.</h1>
      <div class="auth-hero-divider"></div>
      <p class="lead">We connect you with the right authorities and ensure your business stays ahead, always.</p>
    </div>

    <div class="auth-hero-visual">
      <div class="auth-hero-lines">
        <svg viewBox="0 0 600 480" xmlns="http://www.w3.org/2000/svg">
          <path d="M40,440 C160,420 220,340 300,240" stroke="#a97e2f" stroke-opacity="0.35" stroke-width="1.4" fill="none"/>
          <path d="M60,300 C160,300 220,280 300,240" stroke="#a97e2f" stroke-opacity="0.3" stroke-width="1.4" fill="none"/>
          <path d="M300,240 C380,190 440,150 560,90" stroke="#a97e2f" stroke-opacity="0.35" stroke-width="1.4" fill="none"/>
          <path d="M300,240 C400,220 460,190 540,170" stroke="#a97e2f" stroke-opacity="0.3" stroke-width="1.4" fill="none"/>

          <circle cx="40" cy="440" r="5" fill="#a97e2f"/>
          <circle cx="60" cy="300" r="4" fill="#d8ae5c"/>
          <circle cx="560" cy="90" r="5" fill="#a97e2f"/>
          <circle cx="540" cy="170" r="4" fill="#d8ae5c"/>
        </svg>
      </div>

      <div class="auth-hero-badge">
        <svg viewBox="0 0 24 24" stroke-width="1.2">
          <path d="M12 3 L21 8 L3 8 Z"/>
          <path d="M5 8v10M9 8v10M15 8v10M19 8v10"/>
          <path d="M3 21h18"/>
        </svg>
      </div>
    </div>

  </div>
</section>
<section class="why-matters">
  <div class="wrap">
    <div class="why-matters-grid reveal">
      <div>
        <div class="eyebrow">Why It Matters</div>
        <h2>Access you cannot buy — only earn.</h2>
      </div>
      <p>Five+ years of impeccable filings have earned OMA a level of institutional trust reserved for a small handful of consultancies in the Emirates. That trust translates into priority processing, single points of contact and zero-rework mandates for our clients.</p>
    </div>
  </div>
</section>

<section class="auth-directory">
  <div class="wrap">
    <div class="auth-grid reveal">

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M12 3v18M6 8l6-5 6 5M4 8h4M16 8h4M5 8l-2 5h6l-2-5M19 8l-2 5h6l-2-5"/></svg></div>
        <span class="auth-tag">ADJD</span>
        <h4>Abu Dhabi Judicial Department</h4>
        <p class="desc">Notarisation, legal translation, court filings and executive letters.</p>
        <ul>
          <li>Notary services</li>
          <li>Power of attorney</li>
          <li>Legal translation</li>
          <li>Case filings</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M12 3l8 4v5c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V7z"/><circle cx="12" cy="10" r="2.6"/></svg></div>
        <span class="auth-tag">ICP</span>
        <h4>Federal Authority for Identity, Citizenship, Customs &amp; Ports (ICP)</h4>
        <p class="desc">Emirates ID, visas, entry permits and residency across the UAE.</p>
        <ul>
          <li>Emirates ID</li>
          <li>Entry permits</li>
          <li>Residency stamping</li>
          <li>Family sponsorship</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M4 20h16M6 20V10l6-5 6 5v10M10 20v-6h4v6"/></svg></div>
        <span class="auth-tag">DED</span>
        <h4>Department of Economic Development</h4>
        <p class="desc">Trade name reservation, initial approvals and commercial licenses.</p>
        <ul>
          <li>Trade licenses</li>
          <li>Trade name reservation</li>
          <li>License renewals</li>
          <li>Amendments</li>
          <li>Liquidation</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><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>
        <span class="auth-tag">MOHRE</span>
        <h4>Ministry of Human Resources &amp; Emiratisation</h4>
        <p class="desc">Work permits, labour contracts and Emiratisation compliance.</p>
        <ul>
          <li>Work permits</li>
          <li>Labour contracts</li>
          <li>WPS setup</li>
          <li>Emiratisation quotas</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 3.8 5.7 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.7-3.8-9s1.3-6.5 3.8-9z"/></svg></div>
        <span class="auth-tag">MoET</span>
        <h4>Ministry of Economy &amp; Tourism</h4>
        <p class="desc">Trademarks, agency registrations and tourism licensing.</p>
        <ul>
          <li>Trademark filings</li>
          <li>Agency registrations</li>
          <li>Franchise approvals</li>
          <li>Tourism licenses</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 9v11"/></svg></div>
        <span class="auth-tag">RAK Licensing</span>
        <h4>Ras Al Khaimah Government Licensing</h4>
        <p class="desc">Mainland and free zone licenses across Ras Al Khaimah jurisdictions.</p>
        <ul>
          <li>RAK mainland licenses</li>
          <li>RAKEZ setup</li>
          <li>RAK ICC</li>
          <li>Amendments</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M12 2c3 3 5 6 5 9a5 5 0 0 1-10 0c0-3 2-6 5-9z"/></svg></div>
        <span class="auth-tag">Civil Defense</span>
        <h4>Civil Defense</h4>
        <p class="desc">Fire safety approvals, drawings and occupancy compliance.</p>
        <ul>
          <li>Fire safety NOC</li>
          <li>Drawing approvals</li>
          <li>Occupancy permits</li>
          <li>Renewals</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M12 21s-7-4.3-9.5-9C1 8.5 2.5 5 6 5c2 0 3.3 1 4 2 .7-1 2-2 4-2 3.5 0 5 3.5 3.5 7-2.5 4.7-9.5 9-9.5 9z"/><path d="M9 12h2l1-2 2 4 1-2h2"/></svg></div>
        <span class="auth-tag">DoH</span>
        <h4>Department of Health</h4>
        <p class="desc">Healthcare facility licensing and professional credentialing.</p>
        <ul>
          <li>Facility licensing</li>
          <li>Professional licensing</li>
          <li>Malaffi onboarding</li>
          <li>Renewals</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><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"/></svg></div>
        <span class="auth-tag">AD Police</span>
        <h4>Abu Dhabi Police</h4>
        <p class="desc">Security approvals, good conduct certificates and traffic services.</p>
        <ul>
          <li>Good conduct certificates</li>
          <li>Security NOCs</li>
          <li>Traffic services</li>
          <li>Site clearances</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><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>
        <span class="auth-tag">DMT</span>
        <h4>Department of Municipalities &amp; Transport</h4>
        <p class="desc">Municipality approvals, Tawtheeq and building permits.</p>
        <ul>
          <li>Tawtheeq</li>
          <li>Municipality NOCs</li>
          <li>Building permits</li>
          <li>Signage approvals</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M9 3h6l1 5h-8z"/><path d="M6 21V8h12v13"/><path d="M9 12h2M13 12h2M9 15h2M13 15h2M9 18h2M13 18h2"/><path d="M3 21h18"/></svg></div>
        <span class="auth-tag">ADGM</span>
        <h4>Abu Dhabi Global Market</h4>
        <p class="desc">International financial centre and free economic zone of Abu Dhabi</p>
        <ul>
          <li>Setting up & registeration</li>
          <li>Change ownership</li>
          <li>Legal documentation</li>
          <li>Translation & attestation</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

      <div class="auth-card">
        <div class="ai"><svg viewBox="0 0 24 24" stroke-width="1.4"><path d="M4 20h16M6 20V10l6-5 6 5v10M10 20v-6h4v6"/><path d="M9 6h6"/></svg></div>
        <span class="auth-tag">MoFA</span>
        <h4>Ministry of Foreign Affairs</h4>
        <p class="desc">Attestations, consular legalisation and Apostille services.</p>
        <ul>
          <li>Attestations</li>
          <li>Apostille</li>
          <li>Consular legalisation</li>
          <li>Document verification</li>
        </ul>
        <a href="{{ route('contact') }}" class="req-link">Request Assistance →</a>
      </div>

    </div>
  </div>
</section>
<section class="concierge-section">
  <div class="wrap">
    <div class="concierge-panel reveal">
      <div>
        <div class="eyebrow">Concierge Government Desk</div>
        <h2>One point of contact for every authority.</h2>
        <p>Assign your mandate to a single relationship manager. We handle every submission, follow-up and clearance across the twelve authorities above.</p>
      </div>
      <div class="concierge-actions">
        <a href="{{ route('contact') }}" class="btn gold"><span>Book Consultation →</span></a>
        <a href="{{ route('services') }}" class="btn ghost"><span>View Services →</span></a>
      </div>
    </div>
  </div>
</section>

@endsection