<section class="hero">
  <div class="hero-bg" style="background-image:url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1600&q=80')"></div>
  <div class="hero-overlay"></div>
  <div class="container">
    <div class="hero-content">
      <h1>Crowning Your <span>Property Success</span></h1>
      <p>Professional property management, tenant services, and real estate advisory in Nairobi. We help owners, tenants, and investors get the most from property.</p>
      <div class="hero-buttons">
        <a href="/properties" class="btn btn-primary btn-lg">Browse Properties</a>
        <a href="/contact" class="btn btn-light btn-lg">Talk to Us</a>
      </div>
    </div>
  </div>
</section>

<section class="section section-alt">
  <div class="container text-center">
    <h2 class="section-title mx-auto">Our Services</h2>
    <p class="section-subtitle mx-auto">Comprehensive property solutions tailored to owners, tenants, landlords, and investors.</p>
    <div class="grid grid-3">
      <% services.slice(0, 6).forEach(function(service) { %>
        <article class="service-card">
          <div class="service-icon">
            <%- include('../partials/service-icon', { icon: service.icon }) %>
          </div>
          <h3><a href="/services/<%= service.slug %>"><%= service.title %></a></h3>
          <p><%= service.short_description %></p>
        </article>
      <% }); %>
    </div>
    <div style="margin-top:2.5rem">
      <a href="/services" class="btn btn-secondary">View All Services</a>
    </div>
  </div>
</section>

<% if (featured && featured.length > 0) { %>
<section class="section">
  <div class="container">
    <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem">
      <div>
        <h2 class="section-title">Featured Properties</h2>
        <p class="section-subtitle" style="margin-bottom:0">Hand-picked listings for rent and sale across Nairobi.</p>
      </div>
      <a href="/properties" class="btn btn-outline">View All Properties</a>
    </div>
    <div class="grid grid-3">
      <% featured.forEach(function(property) { %>
        <%- include('../partials/property-card', { property: property }) %>
      <% }); %>
    </div>
  </div>
</section>
<% } %>

<section class="section section-alt">
  <div class="container">
    <div style="text-align:center;margin-bottom:3rem">
      <h2 class="section-title mx-auto">Why Choose CrownKey?</h2>
      <p class="section-subtitle mx-auto">We combine local expertise with professional systems to protect and grow your property interests.</p>
    </div>
    <div class="why-grid">
      <div class="why-item">
        <div class="why-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        </div>
        <div>
          <h3>Trusted Local Expertise</h3>
          <p>Deep knowledge of Nairobi neighbourhoods, market trends, and regulatory requirements.</p>
        </div>
      </div>
      <div class="why-item">
        <div class="why-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
        </div>
        <div>
          <h3>Transparent Finances</h3>
          <p>Clear rent collection, disbursement, and financial reporting so you always know where you stand.</p>
        </div>
      </div>
      <div class="why-item">
        <div class="why-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
        </div>
        <div>
          <h3>Responsive Support</h3>
          <p>Phone, WhatsApp, and email support for owners and tenants whenever you need assistance.</p>
        </div>
      </div>
      <div class="why-item">
        <div class="why-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
        </div>
        <div>
          <h3>Full Compliance</h3>
          <p>Lease agreements, renewals, and legal processes handled in line with Kenyan law.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="cta-section">
  <div class="container">
    <h2>Ready to Work With Us?</h2>
    <p>Whether you need property management, a tenant, or advice on your next investment, we are here to help.</p>
    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
      <a href="/contact" class="btn btn-primary btn-lg">Get in Touch</a>
      <a href="<%= whatsappLink(company.whatsapp, 'Hello CrownKey Properties, I would like to inquire about your services.') %>" class="btn btn-light btn-lg" target="_blank">WhatsApp Us</a>
    </div>
  </div>
</section>
