@extends('frontend.layouts.app')
@section('content')

<section class="page-hero">
  <div class="container content">
    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
        <li class="breadcrumb-item active">Landscaping</li>
      </ol>
    </nav>
    <h1 class="reveal">Landscaping Services</h1>
    <p class="text-white-50 mt-2 reveal delay-1">Design, build and transform your outdoor space into something extraordinary</p>
  </div>
</section>

<section class="services-section">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-drafting-compass me-2"></i>Landscaping</span>
      <h2 class="section-title">Professional <span>Landscape</span> Services</h2>
      <p class="text-muted" style="max-width:600px;margin:0 auto">From initial concept through to final installation, we transform ordinary outdoor spaces into breathtaking living environments.</p>
    </div>

    @php
      $landscapeServices = [
        ['id'=>'landscape-design','icon'=>'fas fa-drafting-compass','title'=>'Landscape Design','desc'=>'Bespoke landscape design tailored to your property, lifestyle and budget. Our experienced designers create detailed plans that balance beauty, function and sustainability.'],
        ['id'=>'3d-design','icon'=>'fas fa-cube','title'=>'3D Garden Planning','desc'=>'Visualise your dream garden before a single plant is placed with our advanced 3D planning technology. See exactly how your transformed space will look.'],
        ['id'=>'consultation','icon'=>'fas fa-comments','title'=>'Design Consultation','desc'=>'A thorough on-site consultation with our landscape designers to understand your vision, assess your space and develop the perfect plan for your property.'],
        ['id'=>'landscape-install','icon'=>'fas fa-tools','title'=>'Landscape Installation','desc'=>'Professional installation of all landscape elements from plants and trees to hard landscaping features, carried out by our skilled, experienced installation teams.'],
        ['id'=>'retaining-walls','icon'=>'fas fa-border-all','title'=>'Retaining Walls','desc'=>'Expertly designed and constructed retaining walls to manage slopes, prevent erosion and create beautiful terraced gardens using quality materials including stone, timber and concrete.'],
        ['id'=>'paving','icon'=>'fas fa-th-large','title'=>'Paving & Pathways','desc'=>'Stunning paved areas, driveways, pathways and outdoor entertaining zones using a wide range of materials including natural stone, concrete pavers, brick and more.'],
        ['id'=>'pergolas','icon'=>'fas fa-archway','title'=>'Pergolas & Decking','desc'=>'Custom-designed pergolas, decks and outdoor living structures that extend your living space and add year-round functionality and value to your property.'],
        ['id'=>'water-features','icon'=>'fas fa-water','title'=>'Water Features','desc'=>'Create tranquillity and beauty with a custom water feature. From bubbling garden fountains to elegant ponds and cascading waterfalls, we design and install them all.'],
        ['id'=>'drainage','icon'=>'fas fa-faucet','title'=>'Drainage Solutions','desc'=>'Solve waterlogging and erosion problems with professional drainage systems including surface drains, agricultural pipes, soakwells and rain gardens.'],
        ['id'=>'lighting','icon'=>'fas fa-lightbulb','title'=>'Outdoor Lighting','desc'=>'Illuminate your garden beautifully with professionally designed and installed outdoor lighting. Enhance safety, extend outdoor living hours and add dramatic effect.'],
      ];
    @endphp

    <div class="row g-4">
      @foreach($landscapeServices as $i => $svc)
      <div class="col-md-6 col-lg-4 reveal delay-{{ ($i % 3) + 1 }}">
        <div class="service-card" id="{{ $svc['id'] }}">
          <div class="card-img">
            <div style="height:200px;background:linear-gradient(135deg,#b8d4be,#1a4a20);display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:rgba(255,255,255,.8)">
              <i class="{{ $svc['icon'] }}"></i>
            </div>
            <span class="tag">Landscaping</span>
          </div>
          <div class="card-body">
            <div class="card-icon"><i class="{{ $svc['icon'] }}"></i></div>
            <h5>{{ $svc['title'] }}</h5>
            <p>{{ $svc['desc'] }}</p>
            <a href="{{ route('contact') }}" class="learn-more">Get a Quote <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="cta-section">
  <div class="container">
    <div class="reveal">
      <h2>Transform Your Outdoor Space Today</h2>
      <p>Talk to our landscape design team and discover what's possible for your property.</p>
      <div class="d-flex justify-content-center gap-3 flex-wrap">
        <a href="{{ route('contact') }}" class="btn-gold"><i class="fas fa-clipboard-list me-2"></i>Get Free Quote</a>
        <a href="tel:{{ preg_replace('/\s+/', '', $settings['phone'] ?? '+61406473886') }}" class="btn btn-outline-light rounded-pill px-4 fw-bold">
          <i class="fas fa-phone me-2"></i>{{ $settings['phone'] ?? '+61 406 473 886' }}
        </a>
      </div>
    </div>
  </div>
</section>

@endsection