<?php use App\Helpers\Helper; ?>
<meta name="app-url" content="<?= APP_URL ?>">

<!-- ===== HERO ===== -->
<?php
  $heroBgStyle = '';
  if (!empty($content['hero_bg_image'])) {
    $heroBgStyle = ' style="background-image:url(' . APP_URL . '/assets/images/' . $content['hero_bg_image'] . ')"';
  }
?>
<section class="hero-section"<?= $heroBgStyle ?>>
  <div class="hero-overlay"></div>
  <div class="hero-particles">
    <?php for($i=0;$i<10;$i++): $top=rand(10,90); $left=rand(5,95); $del=rand(0,6); ?>
    <span style="top:<?=$top?>%;left:<?=$left?>%;animation-delay:<?=$del?>s;animation-duration:<?=rand(6,10)?>s"></span>
    <?php endfor; ?>
  </div>
  <div class="container position-relative" style="z-index:3">
    <div class="row align-items-center g-5 py-5">
      <div class="col-lg-6 hero-content animate-fadeInUp">
        <div class="zr-brand-pill mb-4">
          <i class="bi bi-buildings-fill me-2"></i><?= Helper::e($content['hero_badge'] ?? 'Zabibu Residence — Dodoma') ?>
        </div>
        <h1 class="hero-title">
          <?= $content['hero_title'] ?? 'Your <span class="highlight">Premium</span><br>Home Awaits You' ?>
        </h1>
        <p class="hero-subtitle"><?= Helper::e($content['hero_subtitle'] ?? 'Zabibu Residence offers fully-managed, modern apartments and suites with flexible lease options — by the day, week, or month. Live comfortably, pay easily.') ?></p>
        <div class="hero-cta">
          <a href="<?= APP_URL ?>/residences" class="btn btn-zr-gold btn-xl">
            <i class="bi bi-buildings me-2"></i><?= Helper::e($content['hero_cta_primary'] ?? 'View Our Buildings') ?>
          </a>
          <a href="<?= APP_URL ?>/register" class="btn btn-outline-light btn-xl">
            <i class="bi bi-person-plus me-2"></i><?= Helper::e($content['hero_cta_secondary'] ?? 'Create Account') ?>
          </a>
        </div>
        <div class="hero-stats">
          <div class="hero-stat-item">
            <div class="number"><?= number_format($stats['properties']) ?>+</div>
            <div class="label">Buildings</div>
          </div>
          <div class="hero-stat-item">
            <div class="number"><?= number_format($stats['units']) ?>+</div>
            <div class="label">Units</div>
          </div>
          <div class="hero-stat-item">
            <div class="number"><?= number_format($stats['tenants']) ?>+</div>
            <div class="label">Residents</div>
          </div>
          <div class="hero-stat-item">
            <div class="number">24/7</div>
            <div class="label">Support</div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 d-none d-lg-block">
        <div class="hero-image-wrap position-relative">
          <?php
            $heroImg = !empty($content['hero_image'])
              ? APP_URL . '/assets/images/' . $content['hero_image']
              : 'https://images.unsplash.com/photo-1596005554384-d293674c91d7?w=700&q=80';
          ?>
          <img src="<?= $heroImg ?>" alt="Zabibu Residence Dodoma" class="hero-img">
          <div class="hero-floating-card card-1">
            <div class="d-flex align-items-center gap-2">
              <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:40px;height:40px;background:rgba(34,197,94,0.15)">
                <i class="bi bi-house-check-fill" style="color:#16a34a"></i>
              </div>
              <div>
                <div class="fw-700 small" style="color:#1e293b">Unit Available Now</div>
                <div style="font-size:0.72rem;color:#64748b">Zabibu Residence, Dodoma</div>
              </div>
            </div>
            <div class="fw-800 mt-2" style="color:#1a3c5e;font-size:1rem"><?= Helper::e($content['hero_floating_from'] ?? 'From TZS 25,000 /day') ?></div>
          </div>
          <div class="hero-floating-card card-2">
            <div class="d-flex align-items-center gap-1 mb-1">
              <?php for($s=0;$s<5;$s++): ?><i class="bi bi-star-fill" style="color:#f59e0b;font-size:0.8rem"></i><?php endfor; ?>
            </div>
            <div class="fw-700 small" style="color:#1e293b">"Excellent management!"</div>
            <div style="font-size:0.7rem;color:#64748b">— Resident Tenant</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Scroll indicator -->
  <div class="hero-scroll-hint">
    <a href="#our-buildings"><i class="bi bi-chevron-down"></i></a>
  </div>
</section>

<!-- ===== QUICK UNIT SEARCH ===== -->
<section class="search-section">
  <div class="container">
    <div class="search-box shadow-lg">
      <div class="fw-700 mb-3" style="color:#1a3c5e;font-size:1rem"><i class="bi bi-search me-2"></i>Find Your Unit at Zabibu Residence</div>
      <form action="<?= APP_URL ?>/search" method="GET">
        <div class="row g-2 align-items-end">
          <div class="col-md-3">
            <label class="form-label small fw-600 text-muted mb-1">Unit Type</label>
            <select name="type_id" class="form-select">
              <option value="">All Types</option>
              <?php foreach ($types as $t): ?>
              <option value="<?= $t['id'] ?>"><?= Helper::e($t['name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label small fw-600 text-muted mb-1">Bedrooms</label>
            <select name="bedrooms" class="form-select">
              <option value="">Any</option>
              <?php foreach ([1,2,3,4,'5+'] as $b): ?>
              <option value="<?= $b ?>"><?= $b ?> Bed<?= $b!='1'?'s':'' ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label small fw-600 text-muted mb-1">Lease Duration</label>
            <select name="lease_type" class="form-select">
              <option value="">Any Duration</option>
              <option value="day">Daily Stay</option>
              <option value="week">Weekly Stay</option>
              <option value="month">Monthly Lease</option>
            </select>
          </div>
          <div class="col-md-3">
            <label class="form-label small fw-600 text-muted mb-1">Max Budget (TZS/mo)</label>
            <select name="max_price" class="form-select">
              <option value="">Any Budget</option>
              <?php foreach ([300000,500000,800000,1200000,2000000,5000000] as $p): ?>
              <option value="<?= $p ?>"><?= Helper::money($p) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100 py-2 fw-600">
              <i class="bi bi-search me-1"></i>Search Units
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- ===== OUR BUILDINGS ===== -->
<section class="featured-section" id="our-buildings">
  <div class="container">
    <div class="row align-items-end mb-5">
      <div class="col-md-7">
        <div class="section-tag"><?= Helper::e($content['buildings_tag'] ?? 'Our Properties') ?></div>
        <h2 class="section-title"><?= Helper::e($content['buildings_title'] ?? 'Zabibu Residence Buildings') ?></h2>
        <p class="section-subtitle"><?= Helper::e($content['buildings_subtitle'] ?? 'All properties are owned and managed by Zabibu Residence — your comfort is our responsibility.') ?></p>
      </div>
      <div class="col-md-5 text-md-end mt-3 mt-md-0">
        <div class="property-type-filter d-flex flex-wrap gap-2 justify-content-md-end">
          <button class="btn btn-outline-secondary btn-sm active" data-type="all">All</button>
          <?php foreach (array_slice($types,0,5) as $t): ?>
          <button class="btn btn-outline-secondary btn-sm" data-type="<?= $t['id'] ?>"><?= Helper::e($t['name']) ?></button>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <div class="row g-4">
      <?php
      $propImgs = [
        'https://images.unsplash.com/photo-1596005554384-d293674c91d7?w=600&q=70',
        'https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=600&q=70',
        'https://images.unsplash.com/photo-1560185007-cde436f6a4d0?w=600&q=70',
        'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=70',
        'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=70',
        'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=70',
      ];
      foreach ($featured as $idx => $p):
        $imgUrl = $propImgs[$idx % count($propImgs)];
      ?>
      <div class="col-lg-4 col-md-6 property-item" data-type="<?= $p['property_type_id'] ?>">
        <div class="card property-card h-100 border-0">
          <div class="property-img-wrap">
            <img src="<?= $imgUrl ?>" alt="<?= Helper::e($p['name']) ?>" loading="lazy">
            <div class="property-badge">
              <?php if ($p['is_featured']): ?><span class="badge bg-warning text-dark me-1"><i class="bi bi-star-fill me-1"></i>Featured</span><?php endif; ?>
              <span class="badge bg-<?= $p['available_units']>0?'success':'danger' ?>">
                <?= $p['available_units']>0 ? $p['available_units'].' Available' : 'Fully Occupied' ?>
              </span>
            </div>
          </div>
          <div class="property-body">
            <div class="d-flex justify-content-between align-items-start mb-2">
              <span class="badge text-white fw-600" style="background:#1a3c5e"><?= Helper::e($p['type_name'] ?? 'Apartment') ?></span>
              <span class="small" style="color:#64748b"><i class="bi bi-geo-alt me-1" style="color:#1a3c5e"></i><?= Helper::e($p['region_name'] ?? 'Dar es Salaam') ?></span>
            </div>
            <h5 class="fw-700 mb-1 fs-6">
              <a href="<?= APP_URL ?>/residences/<?= $p['id'] ?>" class="text-decoration-none stretched-link" style="color:#1e293b"><?= Helper::e($p['name']) ?></a>
            </h5>
            <?php if ($p['address']): ?>
            <p class="text-muted small mb-2"><i class="bi bi-pin-map me-1"></i><?= Helper::e($p['address']) ?></p>
            <?php endif; ?>
            <div class="property-meta mb-3">
              <span><i class="bi bi-layers me-1"></i><?= $p['total_floors'] ?> Floor<?= $p['total_floors']>1?'s':'' ?></span>
              <span><i class="bi bi-door-open me-1"></i><?= $p['total_units'] ?? '—' ?> Units</span>
              <span style="color:<?= ($p['available_units']??0)>0?'#16a34a':'#dc2626' ?>">
                <i class="bi bi-check-circle me-1"></i><?= $p['available_units'] ?? 0 ?> Free
              </span>
            </div>
            <?php if ($p['min_rent']): $mo=$p['min_rent']; $wk=$mo/4; $dy=$mo/30; ?>
            <div class="d-flex gap-2 mb-3">
              <div class="flex-fill text-center rounded-2 py-2" style="background:#f0f9ff;border:1px solid #bae6fd">
                <div class="fw-700" style="font-size:.8rem;color:#2563eb"><?= Helper::money($dy) ?></div>
                <div class="text-muted" style="font-size:.68rem">/day</div>
              </div>
              <div class="flex-fill text-center rounded-2 py-2" style="background:#f0fdf4;border:1px solid #bbf7d0">
                <div class="fw-700" style="font-size:.8rem;color:#16a34a"><?= Helper::money($wk) ?></div>
                <div class="text-muted" style="font-size:.68rem">/week</div>
              </div>
              <div class="flex-fill text-center rounded-2 py-2" style="background:#faf5ff;border:1px solid #e9d5ff">
                <div class="fw-700" style="font-size:.8rem;color:#7c3aed"><?= Helper::money($mo) ?></div>
                <div class="text-muted" style="font-size:.68rem">/month</div>
              </div>
            </div>
            <?php endif; ?>
            <div class="d-flex justify-content-end pt-2" style="border-top:1px solid #f1f5f9">
              <a href="<?= APP_URL ?>/residences/<?= $p['id'] ?>" class="btn btn-sm btn-primary fw-600 position-relative px-3" style="z-index:1">
                <i class="bi bi-eye me-1"></i>View Units
              </a>
            </div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

    <div class="text-center mt-5">
      <a href="<?= APP_URL ?>/residences" class="btn btn-outline-primary btn-lg px-5 fw-600">
        <i class="bi bi-buildings me-2"></i>View All Our Buildings <i class="bi bi-arrow-right ms-2"></i>
      </a>
    </div>
  </div>
</section>

<!-- ===== COUNTERS ===== -->
<section class="counters-section">
  <div class="container">
    <div class="row g-4 text-center">
      <?php foreach ([
        ['bi-buildings','number'=>$stats['properties'],'suffix'=>'','label'=>'Buildings'],
        ['bi-door-open','number'=>$stats['units'],'suffix'=>'+','label'=>'Total Units'],
        ['bi-people','number'=>$stats['tenants'],'suffix'=>'+','label'=>'Happy Residents'],
        ['bi-shield-check','number'=>'100','suffix'=>'%','label'=>'Managed In-House'],
      ] as $c): ?>
      <div class="col-6 col-md-3 counter-item">
        <div class="counter-icon mb-2"><i class="bi <?= $c[0] ?>"></i></div>
        <div class="counter-num" data-target="<?= $c['number'] ?>">0<span><?= $c['suffix'] ?></span></div>
        <p><?= $c['label'] ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ===== RESIDENT EXPERIENCE ===== -->
<section class="why-us-section">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag">Resident Life</div>
      <h2 class="section-title">Everything You Need, <span>All in One Place</span></h2>
      <p class="section-subtitle mx-auto">At Zabibu Residence, we take care of everything so you can focus on living</p>
    </div>
    <div class="row g-4">
      <?php foreach ([
        ['bi-house-heart','Comfortable Living Spaces','Modern, fully-furnished or unfurnished units with quality fittings. Apartments that feel like home.'],
        ['bi-phone-vibrate','Flexible Lease Terms','Stay for a day, a week, or a year. We offer daily, weekly, and monthly lease options to suit your needs.'],
        ['bi-cash-coin','Easy Rent Payment','Pay your rent via M-Pesa, Airtel Money, HaloPesa or bank transfer — quick, safe, and fully receipted.'],
        ['bi-tools','Maintenance On Demand','Submit maintenance requests via your tenant portal. Our team responds promptly to keep your unit in perfect condition.'],
        ['bi-file-earmark-check','Digital Lease Agreements','Your lease contract is managed digitally. Download, view, and track everything from your tenant dashboard.'],
        ['bi-headset','Dedicated Management','Our professional property management team is always available to assist residents with any concerns.'],
      ] as $w): ?>
      <div class="col-lg-4 col-md-6">
        <div class="why-card">
          <div class="icon-wrap"><i class="bi <?= $w[0] ?>"></i></div>
          <h5 class="fw-700 mb-2"><?= $w[1] ?></h5>
          <p class="text-muted small mb-0"><?= $w[2] ?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ===== HOW IT WORKS ===== -->
<section style="background:#f0f6ff;padding:5rem 0">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag">Simple Process</div>
      <h2 class="section-title">Move In <span>3 Easy Steps</span></h2>
    </div>
    <div class="row g-4 justify-content-center">
      <?php foreach ([
        ['1','bi-search','Browse Available Units','Browse our buildings and units online. Filter by type, size, price, and lease duration.'],
        ['2','bi-calendar-check','Submit a Booking','Pick your unit and submit a booking request in minutes. No upfront payment required.'],
        ['3','bi-house-door','Move In & Settle','Our team confirms your booking, prepares your lease, and welcomes you on move-in day.'],
      ] as $step): ?>
      <div class="col-md-4">
        <div class="hiw-card text-center">
          <div class="hiw-step"><?= $step[0] ?></div>
          <div class="hiw-icon"><i class="bi <?= $step[1] ?>"></i></div>
          <h5 class="fw-700 mb-2"><?= $step[2] ?></h5>
          <p class="text-muted small mb-0"><?= $step[3] ?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="text-center mt-5">
      <a href="<?= APP_URL ?>/residences" class="btn btn-primary btn-lg px-5 fw-600">
        <i class="bi bi-buildings me-2"></i>Start Browsing
      </a>
    </div>
  </div>
</section>

<!-- ===== TESTIMONIALS ===== -->
<?php if (!empty($testimonials)): ?>
<section class="testimonials-section">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag">Resident Reviews</div>
      <h2 class="section-title">What Our <span>Residents</span> Say</h2>
    </div>
    <div class="row g-4">
      <?php foreach (array_slice($testimonials,0,3) as $t): ?>
      <div class="col-md-4">
        <div class="testimonial-card h-100">
          <div class="quote-icon">&ldquo;</div>
          <p class="text-muted small mb-3" style="margin-top:-0.5rem"><?= Helper::e($t['message']) ?></p>
          <div class="stars mb-2">
            <?php for($s=0;$s<$t['rating'];$s++): ?><i class="bi bi-star-fill small"></i><?php endfor; ?>
          </div>
          <div class="d-flex align-items-center gap-2">
            <div class="avatar-sm bg-primary d-flex align-items-center justify-content-center text-white fw-700 rounded-circle">
              <?= strtoupper(substr($t['name'],0,1)) ?>
            </div>
            <div>
              <div class="fw-700 small" style="color:#1e293b"><?= Helper::e($t['name']) ?></div>
              <div style="font-size:0.72rem;color:#64748b"><?= Helper::e($t['title'] ?? 'Zabibu Resident') ?></div>
            </div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<!-- ===== FAQ ===== -->
<?php if (!empty($faqs)): ?>
<section class="faq-section">
  <div class="container">
    <div class="row g-5 align-items-start">
      <div class="col-lg-4">
        <div class="section-tag">FAQ</div>
        <h2 class="section-title">Common <span>Questions</span></h2>
        <p class="text-muted">Have more questions about living at Zabibu Residence? We're here to help.</p>
        <a href="<?= APP_URL ?>/contact" class="btn btn-primary mt-3 px-4 fw-600"><i class="bi bi-chat-dots me-2"></i>Contact Us</a>
      </div>
      <div class="col-lg-8">
        <div class="accordion" id="faqAccordion">
          <?php foreach ($faqs as $i => $faq): ?>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button <?= $i>0?'collapsed':'' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#faq<?= $faq['id'] ?>">
                <?= Helper::e($faq['question']) ?>
              </button>
            </h2>
            <div id="faq<?= $faq['id'] ?>" class="accordion-collapse collapse <?= $i===0?'show':'' ?>" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted small"><?= Helper::e($faq['answer']) ?></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </div>
</section>
<?php endif; ?>

<!-- ===== FINAL CTA ===== -->
<section class="zr-cta-section">
  <div class="zr-cta-overlay"></div>
  <div class="container position-relative text-center" style="z-index:2">
    <div class="zr-cta-icon mb-4"><i class="bi bi-buildings-fill"></i></div>
    <h2 style="font-family:'Playfair Display',serif;color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;margin-bottom:1rem">
      <?= Helper::e($content['cta_title'] ?? 'Ready to Call Zabibu Residence Home?') ?>
    </h2>
    <p style="color:rgba(255,255,255,0.8);font-size:1.05rem;max-width:560px;margin:0 auto 2.5rem">
      <?= Helper::e($content['cta_subtitle'] ?? 'Browse our available units today, submit a booking request, and our team will be in touch as soon as possible.') ?>
    </p>
    <div class="d-flex justify-content-center gap-3 flex-wrap">
      <a href="<?= APP_URL ?>/residences" class="btn btn-zr-gold btn-xl fw-700">
        <i class="bi bi-buildings me-2"></i>View Available Units
      </a>
      <a href="<?= APP_URL ?>/contact" class="btn btn-outline-light btn-xl">
        <i class="bi bi-telephone me-2"></i>Talk to Us
      </a>
    </div>
    <div class="d-flex justify-content-center gap-4 mt-4 flex-wrap">
      <div style="color:rgba(255,255,255,0.7);font-size:0.85rem"><i class="bi bi-check-circle-fill me-1" style="color:#22c55e"></i><?= Helper::e($content['cta_bullet_1'] ?? 'No registration fee') ?></div>
      <div style="color:rgba(255,255,255,0.7);font-size:0.85rem"><i class="bi bi-check-circle-fill me-1" style="color:#22c55e"></i><?= Helper::e($content['cta_bullet_2'] ?? 'Flexible lease terms') ?></div>
      <div style="color:rgba(255,255,255,0.7);font-size:0.85rem"><i class="bi bi-check-circle-fill me-1" style="color:#22c55e"></i><?= Helper::e($content['cta_bullet_3'] ?? 'Move in quickly') ?></div>
    </div>
  </div>
</section>
