@extends('frontend.layouts.app')

@section('content')

{{-- ===== HERO SWIPER SLIDER ===== --}}
<section class="hero-slider-section">
  <div class="swiper hero-swiper">
    <div class="swiper-wrapper">

      @forelse($banners as $banner)
      <div class="swiper-slide hero-slide {{ $banner->slide_class ?? 'slide-' . $loop->iteration }}">
        <div class="slide-bg"></div>
        <div class="slide-overlay"></div>
        <div class="slide-scene" aria-hidden="true">
          @if($banner->image)
            <img src="{{ Storage::url($banner->image) }}" style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;" alt="{{ $banner->title }}">
          @else
            {{-- Decorative SVG scene per slide --}}
            @include('frontend.partials.slide-svg', ['index' => $loop->index + 1])
          @endif
        </div>
        <div class="container slide-content">
          <div class="row align-items-center min-vh-slider">
            <div class="col-lg-7">
              @if($banner->badge_text)
              <div class="slide-badge"><i class="{{ $banner->badge_icon ?? 'fas fa-leaf' }} me-2"></i>{{ $banner->badge_text }}</div>
              @endif
              <h1 class="slide-title">{!! nl2br(e($banner->title)) !!}</h1>
              @if($banner->description)
              <p class="slide-text">{{ $banner->description }}</p>
              @endif
              <div class="slide-btns">
                <a href="{{ route('contact') }}" class="btn-primary-vk"><i class="fas fa-clipboard-list me-2"></i>Get Free Quote</a>
                @if($banner->button_text && $banner->button_url)
                <a href="{{ $banner->button_url }}" class="slide-btn-ghost"><i class="fas fa-arrow-right me-2"></i>{{ $banner->button_text }}</a>
                @endif
              </div>
              <div class="slide-stats">
                <div class="slide-stat"><span class="num" data-target="500" data-suffix="+">500+</span><span class="lbl">Projects</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="12" data-suffix="+">12+</span><span class="lbl">Yrs Experience</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="98" data-suffix="%">98%</span><span class="lbl">Satisfaction</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="25" data-suffix="+">25+</span><span class="lbl">Expert Team</span></div>
              </div>
            </div>
          </div>
        </div>
        @if($banner->float_badge_title)
        <div class="slide-float-badge">
          <div class="slide-float-icon"><i class="{{ $banner->float_badge_icon ?? 'fas fa-star' }}"></i></div>
          <div><strong>{{ $banner->float_badge_title }}</strong><span>{{ $banner->float_badge_subtitle }}</span></div>
        </div>
        @endif
      </div>
      @empty
      {{-- Default slides when no banners in DB --}}
      <div class="swiper-slide hero-slide slide-1">
        <div class="slide-bg"></div>
        <div class="slide-overlay"></div>
        <div class="slide-scene" aria-hidden="true">
          <svg viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
            <defs><radialGradient id="sun1" cx="15%" cy="15%" r="20%"><stop offset="0%" stop-color="#ffd54f" stop-opacity=".9"/><stop offset="100%" stop-color="#ffd54f" stop-opacity="0"/></radialGradient></defs>
            <ellipse cx="180" cy="130" rx="90" ry="90" fill="url(#sun1)"/>
            <ellipse cx="720" cy="800" rx="900" ry="350" fill="#1b5e20" opacity=".55"/>
            <ellipse cx="200" cy="750" rx="500" ry="300" fill="#2e7d32" opacity=".5"/>
            <ellipse cx="1300" cy="760" rx="500" ry="300" fill="#388e3c" opacity=".45"/>
            <ellipse cx="1200" cy="380" rx="130" ry="150" fill="#1b5e20" opacity=".8"/>
            <ellipse cx="1200" cy="330" rx="105" ry="120" fill="#2e7d32" opacity=".9"/>
            <rect x="1188" y="500" width="26" height="80" fill="#5d4037" opacity=".8"/>
            <ellipse cx="180" cy="430" rx="90" ry="105" fill="#2e7d32" opacity=".75"/>
            <rect x="170" y="515" width="20" height="60" fill="#5d4037" opacity=".7"/>
            <rect x="0" y="580" width="1440" height="120" fill="#33691e" opacity=".6"/>
            <circle cx="500" cy="575" r="10" fill="#ff8f00" opacity=".8"/>
            <circle cx="540" cy="568" r="8" fill="#ffca28" opacity=".8"/>
            <circle cx="860" cy="570" r="10" fill="#ce93d8" opacity=".8"/>
          </svg>
        </div>
        <div class="container slide-content">
          <div class="row align-items-center min-vh-slider">
            <div class="col-lg-7">
              <div class="slide-badge"><i class="fas fa-leaf me-2"></i>Lawn & Garden Experts</div>
              <h1 class="slide-title">Your Outdoor <span class="slide-accent">Paradise</span><br>Starts Here</h1>
              <p class="slide-text">Expert gardening and lawn care tailored to the Australian lifestyle. From lush lawns to flourishing gardens — we keep every green space thriving.</p>
              <div class="slide-btns">
                <a href="{{ route('contact') }}" class="btn-primary-vk"><i class="fas fa-clipboard-list me-2"></i>Get Free Quote</a>
                <a href="{{ route('garden') }}" class="slide-btn-ghost"><i class="fas fa-leaf me-2"></i>Garden Services</a>
              </div>
              <div class="slide-stats">
                <div class="slide-stat"><span class="num" data-target="500" data-suffix="+">500+</span><span class="lbl">Projects</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="12" data-suffix="+">12+</span><span class="lbl">Yrs Experience</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="98" data-suffix="%">98%</span><span class="lbl">Satisfaction</span></div>
                <div class="slide-stat-div"></div>
                <div class="slide-stat"><span class="num" data-target="25" data-suffix="+">25+</span><span class="lbl">Expert Team</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="slide-float-badge">
          <div class="slide-float-icon"><i class="fas fa-star"></i></div>
          <div><strong>5-Star Rated</strong><span>200+ Google Reviews</span></div>
        </div>
      </div>

      <div class="swiper-slide hero-slide slide-2">
        <div class="slide-bg"></div>
        <div class="slide-overlay"></div>
        <div class="container slide-content">
          <div class="row align-items-center min-vh-slider">
            <div class="col-lg-7 offset-lg-5 text-lg-end">
              <div class="slide-badge justify-content-lg-end"><i class="fas fa-drafting-compass me-2"></i>Professional Landscaping</div>
              <h1 class="slide-title">Design. Build. <span class="slide-accent">Transform.</span></h1>
              <p class="slide-text">From concept to completion — our landscape designers create stunning outdoor living spaces tailored to the Australian climate and your unique lifestyle.</p>
              <div class="slide-btns justify-content-lg-end">
                <a href="{{ route('contact') }}" class="btn-primary-vk"><i class="fas fa-clipboard-list me-2"></i>Get Free Quote</a>
                <a href="{{ route('landscaping') }}" class="slide-btn-ghost"><i class="fas fa-mountain me-2"></i>Landscaping</a>
              </div>
              <div class="slide-features">
                <span><i class="fas fa-check-circle me-2"></i>Landscape Design & 3D Plans</span>
                <span><i class="fas fa-check-circle me-2"></i>Retaining Walls & Paving</span>
                <span><i class="fas fa-check-circle me-2"></i>Water Features & Lighting</span>
                <span><i class="fas fa-check-circle me-2"></i>Pergolas & Decking</span>
              </div>
            </div>
          </div>
        </div>
        <div class="slide-float-badge left">
          <div class="slide-float-icon"><i class="fas fa-award"></i></div>
          <div><strong>Award-Winning</strong><span>Design Team</span></div>
        </div>
      </div>

      <div class="swiper-slide hero-slide slide-5">
        <div class="slide-bg"></div>
        <div class="slide-overlay"></div>
        <div class="container slide-content text-center">
          <div class="row justify-content-center align-items-center min-vh-slider">
            <div class="col-lg-8">
              <div class="slide-badge justify-content-center"><i class="fas fa-star me-2"></i>Proudly Serving All of Australia</div>
              <h1 class="slide-title text-center">Ready to <span class="slide-accent">Transform</span><br>Your Property?</h1>
              <p class="slide-text text-center mx-auto" style="max-width:580px">Expert gardening, landscaping and home maintenance — all under one trusted Australian team. Get your free, no-obligation quote today.</p>
              <div class="slide-btns justify-content-center">
                <a href="{{ route('contact') }}" class="btn-primary-vk" style="font-size:1.05rem;padding:.9rem 2.4rem"><i class="fas fa-clipboard-list me-2"></i>Get Free Quote</a>
                <a href="tel:{{ preg_replace('/\s+/', '', $settings['phone'] ?? '+61406473886') }}" class="slide-btn-ghost"><i class="fas fa-phone me-2"></i>{{ $settings['phone'] ?? '+61 406 473 886' }}</a>
              </div>
              <div class="slide-icon-row">
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-leaf"></i></div><span>Gardening</span></div>
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-mountain"></i></div><span>Landscaping</span></div>
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-wrench"></i></div><span>Maintenance</span></div>
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-solar-panel"></i></div><span>Solar Clean</span></div>
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-water"></i></div><span>Water Features</span></div>
                <div class="slide-icon-item"><div class="slide-icon-circle"><i class="fas fa-spray-can"></i></div><span>Pressure Clean</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      @endforelse

    </div>

    <div class="swiper-button-prev hero-prev"><i class="fas fa-chevron-left"></i></div>
    <div class="swiper-button-next hero-next"><i class="fas fa-chevron-right"></i></div>
    <div class="swiper-pagination hero-pagination"></div>
    <div class="hero-slide-counter"><span class="current">01</span><span class="sep">/</span><span class="total">03</span></div>
    <div class="hero-progress"><div class="hero-progress-bar"></div></div>
  </div>
</section>

{{-- ===== SERVICES STRIP ===== --}}
<div class="services-strip">
  <div class="container">
    <div class="row g-0">
      <div class="col-6 col-md-3">
        <div class="strip-item">
          <span class="icon"><i class="fas fa-leaf"></i></span>
          <div><strong>Gardening</strong><span>Complete garden care</span></div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="strip-item">
          <span class="icon"><i class="fas fa-mountain"></i></span>
          <div><strong>Landscaping</strong><span>Design & install</span></div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="strip-item">
          <span class="icon"><i class="fas fa-hammer"></i></span>
          <div><strong>Home Maintenance</strong><span>Repairs & upkeep</span></div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="strip-item">
          <span class="icon"><i class="fas fa-shield-alt"></i></span>
          <div><strong>Fully Insured</strong><span>Licensed & trusted</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- ===== ABOUT HOME ===== --}}
<section class="about-home">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <div class="about-img-wrap reveal">
          <svg viewBox="0 0 560 460" xmlns="http://www.w3.org/2000/svg" style="border-radius:18px;width:100%;height:460px">
            <rect width="560" height="460" fill="#c8e6c9"/>
            <ellipse cx="200" cy="350" rx="220" ry="130" fill="#4caf50"/>
            <ellipse cx="140" cy="200" rx="100" ry="120" fill="#2e7d32"/>
            <ellipse cx="140" cy="170" rx="80" ry="95" fill="#388e3c"/>
            <rect x="130" y="300" width="22" height="65" fill="#795548"/>
            <ellipse cx="420" cy="220" rx="110" ry="125" fill="#1b5e20"/>
            <ellipse cx="420" cy="185" rx="88" ry="100" fill="#2e7d32"/>
            <rect x="410" y="320" width="22" height="55" fill="#795548"/>
            <rect x="200" y="200" width="190" height="150" fill="#eceff1"/>
            <polygon points="185,200 295,120 405,200" fill="#546e7a"/>
            <rect x="218" y="218" width="45" height="45" fill="#90caf9" rx="4"/>
            <rect x="330" y="218" width="45" height="45" fill="#90caf9" rx="4"/>
            <rect x="248" y="295" width="60" height="55" fill="#6d4c41" rx="4"/>
            <ellipse cx="295" cy="430" rx="160" ry="40" fill="#33691e"/>
            <ellipse cx="180" cy="340" rx="50" ry="30" fill="#558b2f"/>
            <ellipse cx="410" cy="335" rx="55" ry="32" fill="#558b2f"/>
            <circle cx="100" cy="55" r="42" fill="#ffd54f" opacity=".9"/>
          </svg>
          <div class="exp-badge">
            <span class="num">12+</span>
            <span class="txt">Years<br>Experience</span>
          </div>
        </div>
      </div>
      <div class="col-lg-6 reveal delay-2">
        <span class="section-badge"><i class="fas fa-leaf me-2"></i>About VK</span>
        <h2 class="section-title">Australia's Trusted Garden & Landscape Experts</h2>
        <div class="divider-leaf"><i class="fas fa-seedling"></i></div>
        <p class="text-muted mb-3" style="line-height:1.8">
          At VK Gardening, Landscaping & Home Maintenance, we're passionate about creating beautiful, sustainable outdoor spaces that truly reflect the Australian way of life. Based locally and serving communities nationwide, our expert team brings creativity, craftsmanship, and care to every project.
        </p>
        <p class="text-muted mb-4" style="line-height:1.8">
          From a weekend lawn tidy to a complete property transformation, we approach every job with the same dedication and attention to detail.
        </p>
        <ul class="check-list mb-4">
          <li><i class="fas fa-check-circle"></i> Fully licensed and insured professionals</li>
          <li><i class="fas fa-check-circle"></i> Eco-friendly and sustainable practices</li>
          <li><i class="fas fa-check-circle"></i> Personalised service tailored to your needs</li>
          <li><i class="fas fa-check-circle"></i> Competitive, transparent pricing</li>
          <li><i class="fas fa-check-circle"></i> Guaranteed satisfaction on all work</li>
        </ul>
        <div class="d-flex gap-3 flex-wrap">
          <a href="{{ route('about') }}" class="btn-primary-vk"><i class="fas fa-info-circle"></i> Learn More</a>
          <a href="{{ route('contact') }}" class="btn-outline-vk"><i class="fas fa-phone"></i> Call Us</a>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ===== FEATURED SERVICES ===== --}}
<section class="services-section">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-tools me-2"></i>What We Do</span>
      <h2 class="section-title">Our <span>Core Services</span></h2>
      <p class="text-muted" style="max-width:560px;margin:0 auto">Comprehensive solutions for every aspect of your outdoor and home care needs, delivered by experienced Australian professionals.</p>
    </div>
    <div class="row g-4">
      @foreach($featured->take(6) as $service)
      <div class="col-md-6 col-lg-4 reveal delay-{{ $loop->iteration }}">
        <div class="service-card">
          <div class="card-img">
            @if($service->featured_image)
              <img src="{{ Storage::url($service->featured_image) }}" alt="{{ $service->title }}">
            @else
              <div style="height:220px;background:linear-gradient(135deg,#c8e6c9,#2e7d32);display:flex;align-items:center;justify-content:center;font-size:4rem;color:rgba(255,255,255,.7)">
                <i class="{{ $service->icon ?? 'fas fa-leaf' }}"></i>
              </div>
            @endif
            <span class="tag">{{ $service->tag ?? $service->category?->name }}</span>
          </div>
          <div class="card-body">
            <div class="card-icon"><i class="{{ $service->icon ?? 'fas fa-leaf' }}"></i></div>
            <h5>{{ $service->title }}</h5>
            <p>{{ $service->short_description }}</p>
            <a href="{{ $service->anchor_id ? route('garden') . '#' . $service->anchor_id : route('service.show', $service) }}" class="learn-more">
              Learn More <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
      @endforeach
    </div>
    <div class="text-center mt-5 reveal">
      <a href="{{ route('garden') }}" class="btn-primary-vk"><i class="fas fa-th-large me-2"></i>View All Services</a>
    </div>
  </div>
</section>

{{-- ===== WHY CHOOSE US ===== --}}
<section class="why-section">
  <div class="container position-relative">
    <div class="text-center mb-5 reveal">
      <span class="section-badge" style="background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#aed581">
        <i class="fas fa-thumbs-up me-2"></i>Why VK
      </span>
      <h2 class="section-title" style="color:#fff">Why Choose <span style="color:#8bc34a">Us?</span></h2>
      <p style="color:rgba(255,255,255,.65);max-width:520px;margin:0 auto">We're committed to delivering excellence in every garden, lawn and home we care for across Australia.</p>
    </div>
    <div class="row g-4">
      <div class="col-6 col-lg-3 reveal delay-1">
        <div class="why-card">
          <div class="icon"><i class="fas fa-certificate"></i></div>
          <h5>Licensed & Certified</h5>
          <p>Fully licensed, insured and certified professionals you can trust with your home and garden.</p>
        </div>
      </div>
      <div class="col-6 col-lg-3 reveal delay-2">
        <div class="why-card">
          <div class="icon"><i class="fas fa-leaf"></i></div>
          <h5>Eco-Friendly Methods</h5>
          <p>We use sustainable, environmentally responsible techniques and products wherever possible.</p>
        </div>
      </div>
      <div class="col-6 col-lg-3 reveal delay-3">
        <div class="why-card">
          <div class="icon"><i class="fas fa-dollar-sign"></i></div>
          <h5>Transparent Pricing</h5>
          <p>No hidden fees. Clear, upfront quotes and fair pricing for every service we offer.</p>
        </div>
      </div>
      <div class="col-6 col-lg-3 reveal delay-4">
        <div class="why-card">
          <div class="icon"><i class="fas fa-headset"></i></div>
          <h5>Dedicated Support</h5>
          <p>Our friendly team is available 6 days a week to answer questions and schedule services.</p>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ===== PROCESS ===== --}}
<section class="process-section">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-list-ol me-2"></i>How It Works</span>
      <h2 class="section-title">Our Simple <span>Process</span></h2>
    </div>
    <div class="row g-4">
      <div class="col-6 col-md-3 reveal delay-1">
        <div class="step-item">
          <div class="step-num">1</div>
          <h5>Contact Us</h5>
          <p>Call, email, or fill in our online form to get in touch with our friendly team.</p>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-2">
        <div class="step-item">
          <div class="step-num">2</div>
          <h5>Free Assessment</h5>
          <p>We'll visit your property for a free on-site assessment and consultation.</p>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-3">
        <div class="step-item">
          <div class="step-num">3</div>
          <h5>Tailored Quote</h5>
          <p>Receive a detailed, transparent quote with no hidden costs or surprises.</p>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-4">
        <div class="step-item">
          <div class="step-num">4</div>
          <h5>We Get to Work</h5>
          <p>Our expert team delivers exceptional results on time and on budget.</p>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ===== TESTIMONIALS ===== --}}
<section class="testimonials">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-star me-2"></i>Client Reviews</span>
      <h2 class="section-title">What Our <span>Clients Say</span></h2>
    </div>
    <div class="row g-4">
      @foreach($testimonials as $t)
      <div class="col-md-4 reveal delay-{{ $loop->iteration }}">
        <div class="testimonial-card">
          <div class="stars">
            @for($i = 1; $i <= $t->rating; $i++)<i class="fas fa-star"></i>@endfor
          </div>
          <p>"{{ $t->message }}"</p>
          <div class="author">
            @if($t->avatar)
              <img src="{{ Storage::url($t->avatar) }}" alt="{{ $t->name }}" style="width:44px;height:44px;border-radius:50%;object-fit:cover;">
            @else
              <div class="avatar">{{ strtoupper(substr($t->name,0,1) . (strpos($t->name,' ') !== false ? substr($t->name, strpos($t->name,' ')+1, 1) : '')) }}</div>
            @endif
            <div>
              <strong>{{ $t->name }}</strong>
              <span>{{ $t->location }}</span>
            </div>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ===== CTA ===== --}}
<section class="cta-section">
  <div class="container">
    <div class="reveal">
      <h2>Ready to Transform Your Outdoor Space?</h2>
      <p>Get in touch with our friendly team today for a free quote. We service all areas across Australia.</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