@extends('layouts.app')
@section('title', 'Our Services — Paytell Company Limited')

@section('content')
<section style="background:var(--blue-900);padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,0.12);">
  <div class="wrap">
    <p style="font-size:12.5px;color:rgba(255,255,255,0.55);margin-bottom:14px;">Home › Services</p>
    <h1 style="font-family:'Barlow Semi Condensed';font-weight:700;font-size:38px;color:#fff;line-height:1.1;max-width:680px;margin-bottom:14px;">Everything Paytell does, in one place.</h1>
    <p style="font-size:15.5px;color:rgba(255,255,255,0.75);max-width:580px;">From heavy earthmoving machinery to forex exchange — seven service lines, one company.</p>
  </div>
</section>
<section class="section">
  <div class="wrap">
    <div class="sec-head">
      <div class="eyebrow">Our services</div>
      <h2>Choose a service to learn more.</h2>
      <p>Each service has its own page with full details, photos and a direct enquiry path.</p>
    </div>
    <div class="svc-grid">
<a href="{{ route('services.machinery') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">01</span>
    <h3>Heavy duty machinery</h3>
    <p>Sale and hire of wheel loaders, bulldozers, excavators and trucks. Certified for FAW, LiuGong, Ensign, Yutong, YTO and HXBG.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.servicing') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">02</span>
    <h3>Equipment servicing &amp; parts</h3>
    <p>Genuine spare parts and expert maintenance at our Paytell Service Centre in Accra.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.civil') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">03</span>
    <h3>Civil engineering</h3>
    <p>Construction of residential, commercial and public infrastructure to modern standards.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.road') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">04</span>
    <h3>Road construction</h3>
    <p>Road building and resurfacing for private estates and public infrastructure.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.quarry') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">05</span>
    <h3>Quarry services</h3>
    <p>Aggregate extraction and supply to construction sites across Ghana.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.realestate') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">06</span>
    <h3>Real estate &amp; land</h3>
    <p>Serviced plots in East Legon, Kwabenya, Kumasi and Takoradi, plus residential builds.</p>
    <span class="link">Explore service</span>
  </div>
</a>
<a href="{{ route('services.forex') }}" style="text-decoration:none;color:inherit;">
  <div class="svc-card" style="cursor:pointer;">
    <span class="num">07</span>
    <h3>Forex bureau</h3>
    <p>Currency exchange and forex trading through Paytell's financial services desk.</p>
    <span class="link">Explore service</span>
  </div>
</a></div>
  </div>
</section>
<section class="cta-band">
  <div class="wrap">
    <h2>Ready to talk?</h2>
    <p>Tell us your project and we'll match you to the right service.</p>
    <div class="btn-row" style="justify-content:center;display:flex;gap:14px;">
      <a href="{{ route('contact') }}" class="cta-btn" style="background:#fff;color:var(--crimson-600);">Contact us</a>
      <a href="{{ route('services.machinery') }}" class="cta-ghost" style="border-color:#fff;color:#fff;">View machinery</a>
    </div>
  </div>
</section>

@endsection