@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">About Us</li>
      </ol>
    </nav>
    <h1 class="reveal">About VK Gardening & Landscaping</h1>
    <p class="text-white-50 mt-2 reveal delay-1">Australia's trusted outdoor and home care professionals</p>
  </div>
</section>

{{-- ABOUT STORY --}}
<section class="about-home">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-6 reveal">
        <div class="about-img-wrap">
          <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="#e8f5e9"/>
            <ellipse cx="280" cy="400" rx="300" ry="100" fill="#4caf50"/>
            <ellipse cx="120" cy="250" rx="110" ry="130" fill="#2e7d32"/>
            <ellipse cx="120" cy="210" rx="88" ry="105" fill="#388e3c"/>
            <rect x="108" y="340" width="24" height="70" fill="#795548"/>
            <ellipse cx="440" cy="240" rx="120" ry="140" fill="#1b5e20"/>
            <ellipse cx="440" cy="195" rx="95" ry="112" fill="#2e7d32"/>
            <rect x="428" y="340" width="26" height="60" fill="#795548"/>
            <rect x="190" y="180" width="210" height="160" fill="#eceff1"/>
            <polygon points="174,180 295,100 416,180" fill="#546e7a"/>
            <rect x="210" y="200" width="55" height="55" fill="#90caf9" rx="5"/>
            <rect x="330" y="200" width="55" height="55" fill="#90caf9" rx="5"/>
            <rect x="248" y="285" width="70" height="55" fill="#6d4c41" rx="4"/>
            <ellipse cx="295" cy="440" rx="170" ry="40" fill="#33691e"/>
            <circle cx="90" cy="50" r="45" fill="#ffd54f" opacity=".9"/>
          </svg>
          <div class="exp-badge">
            <span class="num">12+</span>
            <span class="txt">Years<br>Serving<br>Australia</span>
          </div>
        </div>
      </div>
      <div class="col-lg-6 reveal delay-2">
        <span class="section-badge"><i class="fas fa-leaf me-2"></i>Our Story</span>
        <h2 class="section-title">Built on a Passion for <span>Beautiful Outdoors</span></h2>
        <div class="divider-leaf"><i class="fas fa-seedling"></i></div>
        <p class="text-muted mb-3" style="line-height:1.8">VK Gardening, Landscaping & Home Maintenance was founded over a decade ago with a simple mission: to help Australians create outdoor spaces they truly love. What started as a small local gardening operation has grown into a comprehensive home and garden service company serving customers right across Australia.</p>
        <p class="text-muted mb-4" style="line-height:1.8">We combine deep local knowledge of Australian climate and native plants with globally inspired design ideas. Every member of our team shares the same values: quality, reliability and genuine care for every client and property we work on.</p>
        <ul class="check-list mb-4">
          <li><i class="fas fa-check-circle"></i> Australian owned and proudly operated</li>
          <li><i class="fas fa-check-circle"></i> 500+ completed residential and commercial projects</li>
          <li><i class="fas fa-check-circle"></i> Expert team of certified horticulturalists and landscapers</li>
          <li><i class="fas fa-check-circle"></i> Fully insured with public liability coverage</li>
        </ul>
      </div>
    </div>
  </div>
</section>

{{-- VALUES --}}
<section class="services-section bg-pale py-5">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-heart me-2"></i>Our Values</span>
      <h2 class="section-title">What We <span>Stand For</span></h2>
    </div>
    <div class="row g-4">
      <div class="col-md-4 reveal delay-1">
        <div class="why-card" style="background:var(--white);border:1px solid rgba(45,106,53,.1);color:var(--text-dark)">
          <div class="icon" style="background:var(--green-pale);border-color:rgba(45,106,53,.2)"><i class="fas fa-leaf" style="color:var(--green-primary)"></i></div>
          <h5 style="color:var(--green-dark)">Sustainability</h5>
          <p style="color:var(--text-light)">We prioritise eco-friendly methods, native plantings and water-wise solutions that respect Australia's unique environment.</p>
        </div>
      </div>
      <div class="col-md-4 reveal delay-2">
        <div class="why-card" style="background:var(--white);border:1px solid rgba(45,106,53,.1);color:var(--text-dark)">
          <div class="icon" style="background:var(--green-pale);border-color:rgba(45,106,53,.2)"><i class="fas fa-star" style="color:var(--green-primary)"></i></div>
          <h5 style="color:var(--green-dark)">Excellence</h5>
          <p style="color:var(--text-light)">We never cut corners. Every job is completed to the highest standard, from a simple lawn mow to a full landscape installation.</p>
        </div>
      </div>
      <div class="col-md-4 reveal delay-3">
        <div class="why-card" style="background:var(--white);border:1px solid rgba(45,106,53,.1);color:var(--text-dark)">
          <div class="icon" style="background:var(--green-pale);border-color:rgba(45,106,53,.2)"><i class="fas fa-handshake" style="color:var(--green-primary)"></i></div>
          <h5 style="color:var(--green-dark)">Integrity</h5>
          <p style="color:var(--text-light)">Honest, transparent communication and fair pricing. We build lasting relationships based on trust with every client.</p>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- STATS --}}
<section class="why-section py-5">
  <div class="container position-relative">
    <div class="row g-4 text-center">
      <div class="col-6 col-md-3 reveal delay-1">
        <div class="hero-stat">
          <span class="num" data-target="500" data-suffix="+" style="color:#8bc34a;font-size:2.5rem;font-family:'Playfair Display',serif;font-weight:800">0+</span>
          <span class="lbl" style="color:rgba(255,255,255,.65);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:.3rem">Projects Completed</span>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-2">
        <div class="hero-stat">
          <span class="num" data-target="12" data-suffix="+" style="color:#8bc34a;font-size:2.5rem;font-family:'Playfair Display',serif;font-weight:800">0+</span>
          <span class="lbl" style="color:rgba(255,255,255,.65);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:.3rem">Years Experience</span>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-3">
        <div class="hero-stat">
          <span class="num" data-target="25" data-suffix="+" style="color:#8bc34a;font-size:2.5rem;font-family:'Playfair Display',serif;font-weight:800">0+</span>
          <span class="lbl" style="color:rgba(255,255,255,.65);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:.3rem">Team Members</span>
        </div>
      </div>
      <div class="col-6 col-md-3 reveal delay-4">
        <div class="hero-stat">
          <span class="num" data-target="98" data-suffix="%" style="color:#8bc34a;font-size:2.5rem;font-family:'Playfair Display',serif;font-weight:800">0%</span>
          <span class="lbl" style="color:rgba(255,255,255,.65);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:.3rem">Client Satisfaction</span>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- TEAM --}}
<section class="services-section py-5">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <span class="section-badge"><i class="fas fa-users me-2"></i>Our Team</span>
      <h2 class="section-title">Meet the <span>Experts</span></h2>
      <p class="text-muted" style="max-width:500px;margin:0 auto">Passionate professionals dedicated to transforming your outdoor spaces across Australia.</p>
    </div>
    <div class="row g-4">
      @foreach($team as $member)
      <div class="col-6 col-lg-3 reveal delay-{{ $loop->iteration }}">
        <div class="team-card">
          @if($member->photo)
            <div class="team-img" style="background:{{ $member->gradient ?? 'linear-gradient(135deg,#c8e6c9,#2e7d32)' }}">
              <img src="{{ Storage::url($member->photo) }}" alt="{{ $member->name }}" style="width:100%;height:100%;object-fit:cover;">
            </div>
          @else
            <div class="team-img" style="background:{{ $member->gradient ?? 'linear-gradient(135deg,#c8e6c9,#2e7d32)' }}">
              <i class="{{ $member->icon ?? 'fas fa-user' }}" style="color:#fff"></i>
            </div>
          @endif
          <div class="team-body">
            <h5>{{ $member->name }}</h5>
            <span>{{ $member->designation }}</span>
            @if($member->facebook || $member->instagram || $member->linkedin)
            <div class="footer-social justify-content-center mt-2">
              @if($member->facebook)<a href="{{ $member->facebook }}" target="_blank"><i class="fab fa-facebook-f"></i></a>@endif
              @if($member->instagram)<a href="{{ $member->instagram }}" target="_blank"><i class="fab fa-instagram"></i></a>@endif
              @if($member->linkedin)<a href="{{ $member->linkedin }}" target="_blank"><i class="fab fa-linkedin-in"></i></a>@endif
            </div>
            @endif
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="cta-section">
  <div class="container">
    <div class="reveal">
      <h2>Ready to Work with Australia's Best?</h2>
      <p>Contact our team today for a free, no-obligation quote on any gardening, landscaping or home maintenance service.</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