<?php
$pageTitle = 'Home';
$currentPage = 'home';
require_once __DIR__ . '/backend/includes/site_settings.php';
$siteSettings = getSiteSettings();
$homePhone = $siteSettings['contact_phone'] ?? '+234 800 000 0000';
$homePhone2 = $siteSettings['contact_phone_2'] ?? '+234 800 111 1111';
require_once __DIR__ . '/backend/includes/head.php';
require_once __DIR__ . '/backend/includes/navbar.php';
?>

<!-- HERO -->
<section style="background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);padding:100px 0 80px;position:relative;overflow:hidden">
  <div style="position:absolute;inset:0;opacity:.08;background-image:radial-gradient(#f97316 1px,transparent 1px);background-size:30px 30px;pointer-events:none"></div>
  <div style="position:absolute;top:-120px;right:-120px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.18) 0%,transparent 70%);pointer-events:none"></div>

  <style>
  @keyframes heroFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  @keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes orbPulse{0%,100%{box-shadow:0 0 80px rgba(249,115,22,.5),0 0 160px rgba(249,115,22,.15);transform:scale(1)}50%{box-shadow:0 0 100px rgba(249,115,22,.65),0 0 200px rgba(249,115,22,.25);transform:scale(1.03)}}
  @keyframes floatCard1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes floatCard2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes floatCard3{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .hero-anim{opacity:0;animation:heroFadeUp .7s cubic-bezier(.22,.68,0,1.1) forwards}
  .hero-anim-d1{animation-delay:.15s}
  .hero-anim-d2{animation-delay:.3s}
  .hero-anim-d3{animation-delay:.45s}
  .hero-anim-d4{animation-delay:.6s}
  .hero-anim-d5{animation-delay:.75s}
  .hero-orb{animation:orbPulse 4s ease-in-out infinite}
  .hero-float-1{animation:floatCard1 3.5s ease-in-out infinite;animation-delay:.2s}
  .hero-float-2{animation:floatCard2 4s ease-in-out infinite;animation-delay:.5s}
  .hero-float-3{animation:floatCard3 3.8s ease-in-out infinite;animation-delay:.8s}
  </style>

  <div style="max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:2">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center" class="hero-grid">

      <div>
        <div class="hero-anim hero-anim-d1" style="display:inline-flex;align-items:center;gap:8px;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.35);border-radius:999px;padding:6px 16px;color:#f97316;font-size:13px;font-weight:600;margin-bottom:28px">
          <svg width="14" height="14" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>
          Nigeria's Most Trusted Gas Delivery
        </div>
        <h1 class="hero-anim hero-anim-d2" style="font-size:clamp(36px,5vw,64px);font-weight:900;line-height:1.1;margin-bottom:24px;color:#fff">
          Gas Delivered <span style="color:#f97316">Safe &amp; Fast</span><br>to Your Door
        </h1>
        <p class="hero-anim hero-anim-d3" style="font-size:18px;color:#94a3b8;line-height:1.7;margin-bottom:36px;max-width:480px">
          Stiles Energy brings certified LPG cylinders directly to your home or business. Same-day delivery, real-time tracking, and zero hassle.
        </p>
        <div class="hero-anim hero-anim-d4" style="margin-bottom:40px">
          <a href="/stile-lpg/services.php" class="btn-primary" style="padding:16px 36px;font-size:16px;border-radius:12px;box-shadow:0 8px 28px rgba(249,115,22,.45)">
            Order Now
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </a>
        </div>
        <div class="hero-anim hero-anim-d5" style="display:flex;gap:20px;flex-wrap:wrap">
          <?php foreach(['DPR Certified','Insured Deliveries','4.9 Rating','Same-Day Delivery'] as $b): ?>
          <div style="display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:13px">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f97316" 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"/></svg>
            <?= $b ?>
          </div>
          <?php endforeach; ?>
        </div>
      </div>

      <div style="display:flex;justify-content:center;align-items:center">
        <div style="position:relative;width:320px;height:320px">
          <div class="hero-orb" style="position:absolute;inset:0;background:radial-gradient(circle at 35% 40%,#ff8c00,#f97316,#ea580c);border-radius:50%;box-shadow:0 0 80px rgba(249,115,22,.6),0 0 160px rgba(249,115,22,.2);display:flex;align-items:center;justify-content:center">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>
          </div>
          <!-- Floating stats cards (3 cards) -->
          <div class="hero-float-1" style="position:absolute;top:10px;left:-20px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px;z-index:2">
            <div style="background:#fef3c7;border-radius:8px;padding:7px;display:flex"><svg width="16" height="16" fill="none" stroke="#d97706" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path stroke-linecap="round" d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg></div>
            <div>
              <div style="font-size:16px;font-weight:800;color:#0f172a">500+</div>
              <div style="font-size:11px;color:#64748b">Happy Clients</div>
            </div>
          </div>
          <div class="hero-float-2" style="position:absolute;bottom:10px;left:-20px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px;z-index:2">
            <div style="background:#dcfce7;border-radius:8px;padding:7px;display:flex"><svg width="16" height="16" fill="none" stroke="#16a34a" stroke-width="2" viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></div>
            <div>
              <div style="font-size:16px;font-weight:800;color:#0f172a">1000+</div>
              <div style="font-size:11px;color:#64748b">Deliveries</div>
            </div>
          </div>
          <div class="hero-float-3" style="position:absolute;bottom:10px;right:-20px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px;z-index:2">
            <div style="background:#fce7f3;border-radius:8px;padding:7px;display:flex"><svg width="16" height="16" fill="none" stroke="#db2777" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
            <div>
              <div style="font-size:16px;font-weight:800;color:#0f172a">50+</div>
              <div style="font-size:11px;color:#64748b">Locations</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- CTA bar -->
    <div class="hero-anim" style="animation-delay:.9s;margin-top:60px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="background:rgba(249,115,22,.2);border-radius:50%;padding:10px;display:flex">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14z"/></svg>
        </div>
        <div>
          <div style="color:#fff;font-weight:700;font-size:16px">Call Us: <?= htmlspecialchars($homePhone) ?> / <?= htmlspecialchars($homePhone2) ?></div>
          <div style="color:#94a3b8;font-size:13px">Available 24/7 for emergency deliveries</div>
        </div>
      </div>
      <a href="/stile-lpg/contact.php" style="background:#f97316;color:#fff;padding:12px 24px;border-radius:10px;font-weight:700;text-decoration:none;font-size:14px">Request Delivery</a>
    </div>
  </div>
</section>

<!-- STATS BAR -->
<section style="background:#fff;padding:48px 0;border-bottom:1px solid #e2e8f0">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px">
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:2px" class="stats-grid anim-fade-up">
      <?php $stats = [
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#f97316" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path stroke-linecap="round" d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>','value'=>'500+','label'=>'Happy Customers','color'=>'#f97316','bg'=>'#fff7ed'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#2563eb" stroke-width="1.8" viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>','value'=>'1,000+','label'=>'Deliveries Made','color'=>'#2563eb','bg'=>'#eff6ff'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#16a34a" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>','value'=>'50+','label'=>'Coverage Areas','color'=>'#16a34a','bg'=>'#f0fdf4'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#d97706" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>','value'=>'4.9','label'=>'Average Rating','color'=>'#d97706','bg'=>'#fffbeb'],
      ];
      foreach($stats as $s): ?>
      <div style="text-align:center;padding:32px 24px;border-right:1px solid #f1f5f9">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:16px;background:<?= $s['bg'] ?>;margin-bottom:12px"><?= $s['svg'] ?></div>
        <div style="font-size:36px;font-weight:900;color:#0f172a"><?= $s['value'] ?></div>
        <div style="font-size:14px;color:#64748b;margin-top:4px"><?= $s['label'] ?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- WHY CHOOSE US -->
<section style="padding:80px 0;background:#f8f9fb">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px">
    <div style="text-align:center;margin-bottom:56px" class="anim-fade-up">
      <h2 style="font-size:40px;font-weight:900;color:#0f172a;margin-bottom:16px">Built on Safety &amp; Trust</h2>
      <p style="font-size:17px;color:#64748b;max-width:520px;margin:0 auto">We go beyond delivery — we bring peace of mind with every cylinder.</p>
    </div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px" class="features-grid">
      <?php $features = [
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#f97316" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>','title'=>'DPR Certified','desc'=>'Fully licensed by the Department of Petroleum Resources for safe LPG operations.','color'=>'#f97316','bg'=>'#fff7ed'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#2563eb" stroke-width="1.8" viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>','title'=>'Fast Delivery','desc'=>'Same-day and scheduled deliveries to homes, offices, and industrial clients.','color'=>'#2563eb','bg'=>'#eff6ff'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#7c3aed" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>','title'=>'Always Available','desc'=>'24/7 ordering through our app and website with real-time order tracking.','color'=>'#7c3aed','bg'=>'#f5f3ff'],
        ['svg'=>'<svg width="26" height="26" fill="none" stroke="#d97706" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>','title'=>'Verified Quality','desc'=>'Every cylinder is weighed, inspected, and certified before dispatch.','color'=>'#d97706','bg'=>'#fffbeb'],
      ];
      foreach($features as $f): ?>
      <div class="card-hover anim-fade-up" style="background:#fff;border-radius:20px;padding:32px;border:1px solid #e2e8f0;box-shadow:0 4px 20px rgba(0,0,0,.04)">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:<?= $f['bg'] ?>;margin-bottom:20px"><?= $f['svg'] ?></div>
        <h3 style="font-size:20px;font-weight:800;color:#0f172a;margin-bottom:10px"><?= $f['title'] ?></h3>
        <p style="font-size:14px;color:#64748b;line-height:1.7"><?= $f['desc'] ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- CEO SECTION -->
<section style="padding:80px 0;background:#fff;overflow:hidden">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px">
    <div class="ceo-section" style="display:grid;grid-template-columns:400px 1fr;gap:60px;align-items:center">
      <div class="ceo-image-wrapper anim-fade-left">
        <div style="position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15)">
          <img src="/stile-lpg/backend/uploads/ceo.jpeg" alt="CEO Stiles Energy" style="width:100%;height:auto;display:block;object-fit:cover">
          <div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(15,23,42,.95),transparent);padding:1.5rem;color:#fff">
            <div style="font-weight:900;font-size:1.25rem">Chidi Enujiofor</div>
            <div style="color:#fbbf24;font-size:.9rem;font-weight:600;margin-top:.25rem">Chief Executive Officer</div>
          </div>
        </div>
      </div>
      <div class="ceo-content anim-fade-right">
        <div style="display:inline-block;background:#fff7ed;border:1px solid #fed7aa;color:#ea580c;padding:.5rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.05em;margin-bottom:1.5rem">MEET OUR LEADER</div>
        <h2 style="font-size:36px;font-weight:900;color:#0f172a;margin-bottom:20px;line-height:1.2">Driving Energy Innovation Across Nigeria</h2>
        <div style="color:#475569;font-size:16px;line-height:1.8;margin-bottom:24px">
          <p style="margin-bottom:16px">Chidi Enujiofor is a dynamic entrepreneur and energy sector executive, serving as the Chief Executive Officer of Stiles Energy Resources. He is widely recognized for his strategic leadership, innovative mindset, and commitment to delivering sustainable and efficient energy solutions.</p>
          <p style="margin-bottom:16px">With a strong background in business development and operations, Chidi has positioned Stiles Energy Resources as a forward-thinking company focused on reliability, growth, and value creation. Under his leadership, the company continues to explore opportunities across energy supply, infrastructure, and resource management, contributing to economic development and energy accessibility.</p>
          <p style="margin-bottom:16px">Chidi's leadership style is defined by discipline, vision, and a results-driven approach. He is deeply committed to building partnerships, maintaining high operational standards, and driving innovation within the energy sector.</p>
          <p style="margin:0">Beyond his professional achievements, Chidi is guided by strong personal values rooted in integrity, perseverance, and faith. He believes in continuous growth, empowering teams, and creating lasting impact through responsible business practices.</p>
        </div>
        <div style="display:flex;gap:16px;flex-wrap:wrap">
          <div style="background:#f0fdf4;border:1px solid #bbf7d0;padding:.75rem 1.25rem;border-radius:12px">
            <div style="color:#15803d;font-weight:900;font-size:1.5rem">15+</div>
            <div style="color:#166534;font-size:.8rem;font-weight:600">Years Experience</div>
          </div>
          <div style="background:#eff6ff;border:1px solid #bfdbfe;padding:.75rem 1.25rem;border-radius:12px">
            <div style="color:#1e40af;font-weight:900;font-size:1.5rem">5000+</div>
            <div style="color:#1e3a8a;font-size:.8rem;font-weight:600">Happy Customers</div>
          </div>
          <div style="background:#fef3c7;border:1px solid #fde68a;padding:.75rem 1.25rem;border-radius:12px">
            <div style="color:#92400e;font-weight:900;font-size:1.5rem">50+</div>
            <div style="color:#78350f;font-size:.8rem;font-weight:600">Team Members</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
@keyframes ceoFadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.ceo-section{animation:ceoFadeIn 1s ease-out}
@media(max-width:900px){.ceo-section{grid-template-columns:1fr!important}}
</style>

<!-- SERVICES SPLIT -->
<section style="padding:80px 0;background:#fff">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center" class="split-grid">
      <div class="anim-fade-left">
        <h2 style="font-size:38px;font-weight:900;color:#0f172a;margin-bottom:16px">Everything You Need, Delivered</h2>
        <p style="font-size:16px;color:#64748b;line-height:1.7;margin-bottom:28px">From domestic cooking gas to commercial bulk supply — Stiles Energy covers it all.</p>
        <div style="display:flex;flex-direction:column;gap:14px;margin-bottom:36px">
          <?php foreach(['Residential cylinder refill & delivery','Commercial bulk LPG supply','Industrial gas solutions','Cylinder sales & exchange','Emergency same-day delivery','Subscription-based auto-refill'] as $item): ?>
          <div style="display:flex;align-items:center;gap:10px">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            <span style="font-size:15px;color:#475569"><?= $item ?></span>
          </div>
          <?php endforeach; ?>
        </div>
        <a href="/stile-lpg/services.php" class="btn-primary">
          View All Services
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px" class="anim-fade-right">
        <?php $services = [
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>','title'=>'Cooking Gas','desc'=>'3kg to 50kg cylinders','color'=>'#f97316','bg'=>'#fff7ed'],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2M5 21H3m4-10h2m4 0h2M9 7h2m4 0h2"/></svg>','title'=>'Commercial','desc'=>'Bulk supply for businesses','color'=>'#2563eb','bg'=>'#eff6ff'],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/></svg>','title'=>'Industrial','desc'=>'High-pressure systems','color'=>'#7c3aed','bg'=>'#f5f3ff'],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>','title'=>'Express','desc'=>'2-hour delivery','color'=>'#16a34a','bg'=>'#f0fdf4'],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>','title'=>'Smart Refill','desc'=>'Auto-scheduled orders','color'=>'#d97706','bg'=>'#fffbeb'],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>','title'=>'Eco LPG','desc'=>'Carbon-offset certified','color'=>'#0891b2','bg'=>'#ecfeff'],
        ];
        foreach($services as $s): ?>
        <div style="background:#f8f9fb;border-radius:16px;padding:20px;border:1px solid #e2e8f0;display:flex;gap:14px;align-items:flex-start">
          <div style="background:<?= $s['bg'] ?>;border-radius:10px;padding:10px;color:<?= $s['color'] ?>;flex-shrink:0;display:flex"><?= $s['svg'] ?></div>
          <div>
            <div style="font-weight:700;color:#0f172a;font-size:14px"><?= $s['title'] ?></div>
            <div style="color:#64748b;font-size:12px;margin-top:2px"><?= $s['desc'] ?></div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section style="padding:80px 0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);position:relative;overflow:hidden">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px;position:relative">
    <div style="text-align:center;margin-bottom:56px" class="anim-fade-up">
      <h2 style="font-size:40px;font-weight:900;color:#fff;margin-bottom:12px">3 Simple Steps to Gas Delivery</h2>
      <p style="color:#94a3b8;font-size:16px">Order in under 2 minutes, delivered to your door.</p>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:32px" class="steps-grid">
      <?php $steps = [
        ['step'=>'01','title'=>'Place Your Order','desc'=>'Choose your cylinder size on our website or app. Enter your delivery address and confirm.','svg'=>'<svg width="34" height="34" fill="none" stroke="#f97316" stroke-width="1.8" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><path stroke-linecap="round" d="M9 7h6M9 11h6M9 15h4"/></svg>','color'=>'#f97316','step_n'=>'Step 1'],
        ['step'=>'02','title'=>'We Prepare &amp; Dispatch','desc'=>'Our team inspects, weighs, and seals your cylinder. A certified driver is assigned.','svg'=>'<svg width="34" height="34" fill="none" stroke="#7c3aed" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>','color'=>'#7c3aed','step_n'=>'Step 2'],
        ['step'=>'03','title'=>'Doorstep Delivery','desc'=>'Track your order live. Our driver delivers, hands you the receipt, and you are done.','svg'=>'<svg width="34" height="34" fill="none" stroke="#16a34a" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>','color'=>'#16a34a','step_n'=>'Step 3'],
      ];
      foreach($steps as $s): ?>
      <div class="anim-scale" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px;position:relative;overflow:hidden">
        <div style="position:absolute;top:-10px;right:16px;font-size:80px;font-weight:900;color:rgba(255,255,255,.04);line-height:1;user-select:none"><?= $s['step'] ?></div>
        <div style="margin-bottom:20px"><?= $s['svg'] ?></div>
        <div style="font-size:12px;font-weight:700;color:<?= $s['color'] ?>;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px"><?= $s['step_n'] ?></div>
        <h3 style="font-size:20px;font-weight:800;color:#fff;margin-bottom:12px"><?= $s['title'] ?></h3>
        <p style="font-size:14px;color:#94a3b8;line-height:1.7"><?= $s['desc'] ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section style="padding:80px 0;background:#fff">
  <div style="max-width:1200px;margin:0 auto;padding:0 24px">
    <div style="text-align:center;margin-bottom:56px" class="anim-fade-up">
      <h2 style="font-size:40px;font-weight:900;color:#0f172a;margin-bottom:12px">What Our Customers Say</h2>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:28px" class="testimonials-grid">
      <?php $testimonials = [
        ['name'=>'Amaka O.','role'=>'Homeowner, Lagos Island','quote'=>'I switched from my old supplier last year. Stiles Energy is faster, cheaper, and the app makes it so easy to reorder.','initials'=>'AO','color'=>'#f97316'],
        ['name'=>'Mr. Balogun','role'=>'Restaurant Owner, Ikeja','quote'=>'We run a busy kitchen. Stiles handles our bulk orders every week without fail. Highly professional team.','initials'=>'MB','color'=>'#2563eb'],
        ['name'=>'Chidinma E.','role'=>'Estate Manager, VI','quote'=>'Managing gas supply for 40 apartments used to be a nightmare. Now Stiles handles everything. 10 out of 10.','initials'=>'CE','color'=>'#7c3aed'],
      ];
      foreach($testimonials as $t): ?>
      <div class="anim-fade-up" style="background:#f8f9fb;border-radius:20px;border:1px solid #e2e8f0;padding:32px">
        <div style="display:flex;gap:4px;margin-bottom:20px">
          <?php for($i=0;$i<5;$i++): ?><svg width="18" height="18" fill="#f97316" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><?php endfor; ?>
        </div>
        <p style="font-size:15px;color:#475569;line-height:1.7;margin-bottom:24px;font-style:italic">"<?= $t['quote'] ?>"</p>
        <div style="display:flex;align-items:center;gap:12px">
          <div style="width:44px;height:44px;border-radius:50%;background:<?= $t['color'] ?>22;color:<?= $t['color'] ?>;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px"><?= $t['initials'] ?></div>
          <div>
            <div style="font-weight:700;color:#0f172a;font-size:14px"><?= $t['name'] ?></div>
            <div style="color:#94a3b8;font-size:12px"><?= $t['role'] ?></div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- APP CTA -->
<section style="padding:80px 0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);position:relative;overflow:hidden">
  <div style="max-width:900px;margin:0 auto;padding:0 24px;text-align:center;position:relative" class="anim-scale">
    <div style="display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:rgba(249,115,22,.2);margin-bottom:24px">
      <svg width="36" height="36" fill="none" stroke="#f97316" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>
    </div>
    <h2 style="font-size:42px;font-weight:900;color:#fff;margin-bottom:16px">Order Gas in 60 Seconds</h2>
    <p style="font-size:17px;color:#94a3b8;margin-bottom:40px;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto">Download the Stiles Energy app. Track deliveries live, manage subscriptions, and get exclusive app-only discounts.</p>
    <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:40px">
      <a href="#" style="display:flex;align-items:center;gap:12px;background:#fff;color:#0f172a;padding:14px 28px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px">
        <svg width="20" height="20" fill="none" stroke="#0f172a" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3"/></svg>
        <span>App Store</span>
      </a>
      <a href="#" style="display:flex;align-items:center;gap:12px;background:#fff;color:#0f172a;padding:14px 28px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px">
        <svg width="20" height="20" fill="none" stroke="#0f172a" stroke-width="2" viewBox="0 0 24 24"><polygon stroke-linecap="round" stroke-linejoin="round" points="5 3 19 12 5 21 5 3"/></svg>
        <span>Google Play</span>
      </a>
    </div>
    <div style="display:flex;justify-content:center;gap:32px;flex-wrap:wrap">
      <?php foreach(['Instant ordering','Live delivery tracking','Secure payments'] as $f): ?>
      <div style="display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:14px">
        <svg width="14" height="14" fill="none" stroke="#f97316" stroke-width="2.5" viewBox="0 0 24 24"><polyline stroke-linecap="round" stroke-linejoin="round" points="20 6 9 17 4 12"/></svg>
        <?= $f ?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- Responsive styles -->
<style>
@media(max-width:900px){
  .hero-grid,.split-grid{grid-template-columns:1fr!important}
  .features-grid,.steps-grid,.testimonials-grid{grid-template-columns:repeat(2,1fr)!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .features-grid,.steps-grid,.testimonials-grid,.stats-grid{grid-template-columns:1fr!important}
}
</style>

<?php require_once __DIR__ . '/backend/includes/footer.php'; ?>
