@extends('layouts.site')
@section('title','Our Services — Zuma Super App')
@section('description','15 integrated services in one app — rides, food, pharmacy, e-commerce, real estate, jobs, freelance, courier, travel, wallet, loans, social, affiliate, AI, and finance.')
@push('styles')
<style>
.services-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:70px;z-index:90;overflow-x:auto;-webkit-overflow-scrolling:touch}
.services-nav-inner{display:flex;gap:0;white-space:nowrap;padding:0 24px}
.sn-link{padding:14px 18px;font-size:.82rem;font-weight:700;color:var(--ink-3);border-bottom:2px solid transparent;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-block}
.sn-link:hover,.sn-link.active{color:var(--primary);border-bottom-color:var(--primary)}
.service-section{padding:96px 0;scroll-margin-top:130px}
.service-section:nth-child(even){background:var(--bg)}
.service-section:nth-child(odd){background:#fff}
.ss-split{display:grid;gap:56px;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.ss-split{grid-template-columns:1fr 1fr}}
.ss-split.rev{direction:rtl}
.ss-split.rev>*{direction:ltr}
.ss-visual{border-radius:20px;overflow:hidden;height:380px;background-size:cover;background-position:center;position:relative}
.ss-badge{position:absolute;top:20px;left:20px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 4px 20px rgba(0,0,0,.12);font-size:.78rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.ss-icon-big{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:20px}
.ss-content h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.ss-content .desc{color:var(--ink-2);line-height:1.8;margin-bottom:20px;font-size:1rem}
.ss-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:9px}
.ss-features li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-2)}
.ss-features li::before{content:'✓';color:var(--green);font-weight:800;flex-shrink:0;margin-top:1px}
.ss-cta{display:flex;gap:12px;flex-wrap:wrap}
.service-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:700;border:1.5px solid currentColor;margin-bottom:12px}
</style>
@endpush
@section('content')
<div class="page-hero">
    <div class="wrap">
        <div class="breadcrumb"><a href="/">Home</a> <i class="fas fa-chevron-right" style="font-size:.6rem"></i> Services</div>
        <h1>15 Services. One App. One Wallet.</h1>
        <p>Everything you need — from a ride home to buying property, ordering medicine, and growing your business.</p>
    </div>
</div>

<nav class="services-nav">
    <div class="services-nav-inner">
        <a class="sn-link" href="#rides">🚗 Rides</a>
        <a class="sn-link" href="#food">🍽️ Food</a>
        <a class="sn-link" href="#pharmacy">💊 Pharmacy</a>
        <a class="sn-link" href="#ecommerce">🛒 E-Commerce</a>
        <a class="sn-link" href="#realestate">🏠 Real Estate</a>
        <a class="sn-link" href="#jobs">💼 Jobs</a>
        <a class="sn-link" href="#freelance">🎨 Freelance</a>
        <a class="sn-link" href="#courier">📦 Courier</a>
        <a class="sn-link" href="#travel">✈️ Travel</a>
        <a class="sn-link" href="#wallet">💳 Wallet</a>
        <a class="sn-link" href="#loans">📈 Loans</a>
        <a class="sn-link" href="#social">📱 Social</a>
        <a class="sn-link" href="#affiliate">🤝 Affiliate</a>
        <a class="sn-link" href="#finance">📊 Finance</a>
        <a class="sn-link" href="#ai">🤖 AI</a>
    </div>
</nav>

{{-- 1. Rides --}}
<section class="service-section" id="rides">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80')">
                <div class="ss-badge">🚗 AI Surge Pricing</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Rides</span>
                <div class="ss-icon-big" style="background:#E8F0FE;color:#1A73E8">🚗</div>
                <h2>Get a Ride in Under 5 Minutes</h2>
                <p class="desc">AI-powered ride hailing across Nairobi, Kampala, and Dar es Salaam. Standard, premium, boda, school runs, corporate accounts, and emergency rides.</p>
                <ul class="ss-features">
                    <li>AI surge pricing — fairer for riders, better earning for drivers</li>
                    <li>Real-time driver tracking from pickup to drop-off</li>
                    <li>7 ride types: standard, premium, shared, corporate, school, emergency, women-only</li>
                    <li>Instant wallet payment — no cash friction</li>
                    <li>Driver ratings and trip history in-app</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Book a ride <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Drive with Zuma</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 2. Food --}}
<section class="service-section" id="food">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=800&q=80')">
                <div class="ss-badge">⚡ 30-Minute Delivery</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Food</span>
                <div class="ss-icon-big" style="background:#FEF3DA;color:#F57C00">🍽️</div>
                <h2>Your Favourite Restaurant. 30 Minutes.</h2>
                <p class="desc">Order from 100+ verified restaurants across East Africa. Track your delivery in real time. Pay with your Zuma Wallet.</p>
                <ul class="ss-features">
                    <li>100+ restaurants across Kenya, Uganda & Tanzania</li>
                    <li>AI pre-positioning puts drivers near restaurants before peak</li>
                    <li>60-second restaurant acceptance guarantee</li>
                    <li>Live GPS tracking from kitchen to door</li>
                    <li>Group orders, scheduled deliveries, and dietary filters</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Order food <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">List your restaurant</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 3. Pharmacy --}}
<section class="service-section" id="pharmacy">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&q=80')">
                <div class="ss-badge">💊 Licensed Pharmacies Only</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Health</span>
                <div class="ss-icon-big" style="background:#e8f5e9;color:#34A853">💊</div>
                <h2>Medicines, Doctors & Lab Tests. All Digital.</h2>
                <p class="desc">Buy medicines from licensed pharmacies, book a video consultation with a doctor, or schedule a lab test with home collection — all from one app.</p>
                <ul class="ss-features">
                    <li>500+ medicines from 30+ licensed pharmacy partners</li>
                    <li>Prescription upload & pharmacist verification in 30 min</li>
                    <li>Video doctor consultations from KES 500</li>
                    <li>Lab tests with home collection available</li>
                    <li>Controlled substances require verified prescriptions — always</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Order medicine <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Partner pharmacy</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 4. E-Commerce --}}
<section class="service-section" id="ecommerce">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=800&q=80')">
                <div class="ss-badge">🛒 50K+ Products</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Shop</span>
                <div class="ss-icon-big" style="background:#fce4ec;color:#c62828">🛒</div>
                <h2>Shop Across East Africa. Pay in Your Currency.</h2>
                <p class="desc">Electronics, fashion, groceries, home goods, beauty and more — from verified vendors across Kenya, Uganda and Tanzania. No dollar conversions.</p>
                <ul class="ss-features">
                    <li>50,000+ products from 500+ verified vendors</li>
                    <li>Pay in KES, UGX, or TZS via Zuma Wallet</li>
                    <li>Escrow holds payment until delivery confirmed</li>
                    <li>Buy Now Pay Later available on orders over KES 1,000</li>
                    <li>Vendor storefronts with ratings and reviews</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Shop now <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Sell on Zuma</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 5. Real Estate --}}
<section class="service-section" id="realestate">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=800&q=80')">
                <div class="ss-badge">🏠 Verified Listings Only</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Property</span>
                <div class="ss-icon-big" style="background:#ede7f6;color:#6a1b9a">🏠</div>
                <h2>Find, Rent, or Buy Property. Zero Fake Listings.</h2>
                <p class="desc">Every listing is physically verified before going live. Escrow-protected deposits. Agent accountability. The property market East Africa deserves.</p>
                <ul class="ss-features">
                    <li>Verified listings — no fake or outdated properties</li>
                    <li>Escrow deposits: your money is safe until lease is signed</li>
                    <li>Free viewings — no agent "viewing fees"</li>
                    <li>Rent, sale, and lease across all three countries</li>
                    <li>Agents rated by every viewer — bad agents are delisted</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Browse properties <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">List a property</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 6. Jobs --}}
<section class="service-section" id="jobs">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=800&q=80')">
                <div class="ss-badge">💼 200+ Active Jobs</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Jobs</span>
                <div class="ss-icon-big" style="background:#E8F0FE;color:#1A73E8">💼</div>
                <h2>Find Your Next Job Across East Africa</h2>
                <p class="desc">200+ verified job listings across 10 industries. Salary ranges always disclosed. Apply with your Zuma profile — no separate CV needed.</p>
                <ul class="ss-features">
                    <li>10 job categories: Tech, Finance, Healthcare, Hospitality & more</li>
                    <li>Salary range mandatory — no "competitive salary" ambiguity</li>
                    <li>Apply with Zuma profile (transaction history = verifiable work record)</li>
                    <li>Verified company profiles — fake employers blocked</li>
                    <li>Job alerts via push notification and SMS</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Find jobs <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Post a job</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 7. Freelance --}}
<section class="service-section" id="freelance">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80')">
                <div class="ss-badge">🎨 Escrow-Protected</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Freelance</span>
                <div class="ss-icon-big" style="background:#fff3e0;color:#e65100">🎨</div>
                <h2>Hire Talent. Get Paid. No Payment Chasing.</h2>
                <p class="desc">100+ gigs across design, development, writing, marketing, video, and consulting. Escrow protects payment for clients and freelancers equally.</p>
                <ul class="ss-features">
                    <li>7 skill categories with pre-priced gigs</li>
                    <li>Escrow: client pays upfront, freelancer gets paid on delivery</li>
                    <li>Dispute resolution within 48 hours by Zuma team</li>
                    <li>Freelancer ratings and verified delivery history</li>
                    <li>Keep 85% of every project — lowest fees in East Africa</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Find a freelancer <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Offer your skills</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 8. Courier --}}
<section class="service-section" id="courier">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?w=800&q=80')">
                <div class="ss-badge">📦 Same-Day Available</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Courier</span>
                <div class="ss-icon-big" style="background:#fff3e0;color:#bf360c">📦</div>
                <h2>Same Day. Next Day. Cross-Border.</h2>
                <p class="desc">Send parcels across Nairobi, Kampala, or Dar es Salaam — or cross-border between all three countries. Real-time tracking. Instant booking.</p>
                <ul class="ss-features">
                    <li>Same-day, express, and standard delivery options</li>
                    <li>Cross-border corridors: KE↔UG, KE↔TZ, UG↔TZ</li>
                    <li>Real-time GPS tracking from pickup to delivery</li>
                    <li>Customs clearance handled by Zuma for cross-border</li>
                    <li>From KES 150 for city deliveries, KES 1,500 cross-border</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Send a parcel <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">Become a courier</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 9. Travel --}}
<section class="service-section" id="travel">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1516426122078-c23e76319801?w=800&q=80')">
                <div class="ss-badge">✈️ Book in KES · UGX · TZS</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Travel</span>
                <div class="ss-icon-big" style="background:#e3f2fd;color:#0277bd">✈️</div>
                <h2>Hotels, Safaris & Tours Across East Africa</h2>
                <p class="desc">Book hotels, safari packages, and adventure tours in your local currency via M-Pesa, MTN MoMo, or Airtel Money. No dollar conversions. No international card required.</p>
                <ul class="ss-features">
                    <li><strong>Kenya:</strong> Maasai Mara, Amboseli, Tsavo, Diani Beach, Lamu, Naivasha, Mount Kenya, Samburu, Lake Bogoria</li>
                    <li><strong>Uganda:</strong> Bwindi Impenetrable Forest (gorilla trekking), Murchison Falls, Queen Elizabeth NP, Kibale Forest, Rwenzori Mountains, Lake Victoria</li>
                    <li><strong>Tanzania:</strong> Serengeti, Ngorongoro Crater, Zanzibar Island, Kilimanjaro, Tarangire NP, Lake Manyara, Pemba Island, Selous</li>
                    <li>100+ hotels: budget guesthouses to 5-star beach resorts</li>
                    <li>Instant booking · Auto refund on cancellation · Corporate billing</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Book travel <i class="fas fa-arrow-right"></i></a>
                    <a href="/partners#apply" class="btn btn-outline">List your hotel / tour</a>
                </div>
            </div>
        </div>

        {{-- Destination grid --}}
        <div style="margin-top:56px">
            <h3 style="text-align:center;font-size:1.4rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin-bottom:32px" class="reveal">Featured Destinations</h3>
            <div style="display:grid;gap:16px;grid-template-columns:repeat(2,1fr)" class="reveal">
                @php
                $destinations = [
                    ['name'=>'Maasai Mara','country'=>'Kenya','flag'=>'🇰🇪','desc'=>'The greatest wildlife spectacle on Earth. Best Jul-Oct for the Great Migration.','img'=>'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=400&q=70'],
                    ['name'=>'Zanzibar','country'=>'Tanzania','flag'=>'🇹🇿','desc'=>'Pristine white beaches, spice tours, and Stone Town UNESCO World Heritage Site.','img'=>'https://images.unsplash.com/photo-1586002607893-48e47a3ffc45?w=400&q=70'],
                    ['name'=>'Bwindi Forest','country'=>'Uganda','flag'=>'🇺🇬','desc'=>'Track endangered mountain gorillas in the misty rainforest. A once-in-a-lifetime experience.','img'=>'https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?w=400&q=70'],
                    ['name'=>'Serengeti','country'=>'Tanzania','flag'=>'🇹🇿','desc'=>'Endless plains, 1.5 million wildebeest. Africa is most iconic national park.','img'=>'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=400&q=70'],
                    ['name'=>'Diani Beach','country'=>'Kenya','flag'=>'🇰🇪','desc'=>'80km of coral-white sand. Kitesurfing, diving, and fresh seafood on the Kenya coast.','img'=>'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=400&q=70'],
                    ['name'=>'Murchison Falls','country'=>'Uganda','flag'=>'🇺🇬','desc'=>'The world most powerful waterfall. Nile cruises with elephant, hippo and lion sightings.','img'=>'https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?w=400&q=70'],
                    ['name'=>'Mount Kilimanjaro','country'=>'Tanzania','flag'=>'🇹🇿','desc'=>'Africa highest peak at 5,895m. Book guided climbs from Arusha via ZUMA.','img'=>'https://images.unsplash.com/photo-1551009175-8a68da93d5f9?w=400&q=70'],
                    ['name'=>'Amboseli','country'=>'Kenya','flag'=>'🇰🇪','desc'=>'Iconic views of Kilimanjaro rising behind elephant herds. One of Kenya finest parks.','img'=>'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=400&q=70'],
                ];
                @endphp
                @foreach($destinations as $d)
                <div style="border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff">
                    <div style="height:140px;background-image:url('{{ $d['img'] }}');background-size:cover;background-position:center;position:relative">
                        <span style="position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700">{{ $d['flag'] }} {{ $d['country'] }}</span>
                    </div>
                    <div style="padding:16px">
                        <div style="font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:4px">{{ $d['name'] }}</div>
                        <div style="font-size:.82rem;color:var(--ink-3);line-height:1.5">{{ $d['desc'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- 10. Wallet --}}
<section class="service-section" id="wallet">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=800&q=80')">
                <div class="ss-badge">💳 KES · UGX · TZS</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Wallet</span>
                <div class="ss-icon-big" style="background:#e8f5e9;color:#1b5e20">💳</div>
                <h2>One Wallet. Three Currencies. Instant Transfers.</h2>
                <p class="desc">Top up from M-Pesa, MTN MoMo, Airtel Money, Tigo Pesa, HaloPesa, or card. Pay for any of the 15 services instantly. Send money across borders at 1.5% — not 8%.</p>
                <ul class="ss-features">
                    <li>Holds KES, UGX, and TZS simultaneously</li>
                    <li>Top up from 5 mobile money providers + Stripe</li>
                    <li>Cross-border transfers at 1.5% flat fee</li>
                    <li>Escrow sub-wallets for freelance, property & e-commerce</li>
                    <li>Transaction history, statements, and export to PDF</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Open wallet <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 11. Loans --}}
<section class="service-section" id="loans">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=800&q=80')">
                <div class="ss-badge">📈 60-Second Loans</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Credit</span>
                <div class="ss-icon-big" style="background:#fce4ec;color:#880e4f">📈</div>
                <h2>Credit for People Banks Won't Touch.</h2>
                <p class="desc">Your Zuma transaction history builds a credit score — from 0 to 900. Score above 600 unlocks instant loans up to KES 50,000 in 60 seconds. No collateral.</p>
                <ul class="ss-features">
                    <li>Zuma Credit Score built from your in-app behaviour</li>
                    <li>Micro-loans: KES 500 – 50,000 in 60 seconds</li>
                    <li>Business loans: KES 50,000 – 500,000 for verified partners</li>
                    <li>Buy Now Pay Later: split any purchase into 3 weekly instalments</li>
                    <li>No collateral, no guarantors, no branch visits</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Check my score <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 12. Social --}}
<section class="service-section" id="social">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=800&q=80')">
                <div class="ss-badge">📱 5 Platforms, 1 Dashboard</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Social Hub</span>
                <div class="ss-icon-big" style="background:#fce4ec;color:#ad1457">📱</div>
                <h2>Schedule All Your Social Media in One Click.</h2>
                <p class="desc">Connect Facebook, Instagram, X, TikTok and LinkedIn. Write once, schedule everywhere. AI suggests optimal posting times based on your past engagement.</p>
                <ul class="ss-features">
                    <li>Connect up to 5 social accounts</li>
                    <li>Write once — publish to all platforms simultaneously</li>
                    <li>AI-optimised posting time recommendations</li>
                    <li>Unified analytics across all platforms</li>
                    <li>Included free with all Zuma partner accounts</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Connect accounts <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 13. Affiliate --}}
<section class="service-section" id="affiliate">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1553729459-efe14ef6055d?w=800&q=80')">
                <div class="ss-badge">🤝 Earn on Every Transaction</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma Affiliate</span>
                <div class="ss-icon-big" style="background:#e8f5e9;color:#2e7d32">🤝</div>
                <h2>Refer Friends. Earn on Every Service They Use. Forever.</h2>
                <p class="desc">Unlike one-time referral bonuses, Zuma pays you a commission on every transaction your referred users make across all 15 services — permanently.</p>
                <ul class="ss-features">
                    <li>Commission on rides (2%), food (2.5%), pharmacy (2%), hotels (3%) & more</li>
                    <li>Earn on every transaction — not just sign-up</li>
                    <li>Bronze → Silver → Gold → Platinum tiers with increasing rates</li>
                    <li>Commissions in Zuma Wallet — withdraw anytime</li>
                    <li>No maximum earning cap</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Get my referral link <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 14. Finance --}}
<section class="service-section" id="finance">
    <div class="wrap">
        <div class="ss-split rev">
            <div class="ss-visual reveal-right" style="background-image:url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=800&q=80')">
                <div class="ss-badge">📊 For African Entrepreneurs</div>
            </div>
            <div class="ss-content reveal-left">
                <span class="section-label">Zuma Finance Hub</span>
                <div class="ss-icon-big" style="background:#E8F0FE;color:#1A73E8">📊</div>
                <h2>Your Business Dashboard. Built for the Real Economy.</h2>
                <p class="desc">Track income, log expenses, send invoices, and see your 90-day cash flow projection — all from the same app you use for rides and shopping.</p>
                <ul class="ss-features">
                    <li>Automatic income tracking from all Zuma transactions</li>
                    <li>Receipt scanning and expense categorisation</li>
                    <li>Professional PDF invoices with M-Pesa payment links</li>
                    <li>30 and 60-day cash flow projection</li>
                    <li>Tax summary report for your accountant</li>
                </ul>
                <div class="ss-cta">
                    <a href="/" class="btn btn-primary">Open Finance Hub <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 15. AI --}}
<section class="service-section" id="ai">
    <div class="wrap">
        <div class="ss-split">
            <div class="ss-visual reveal-left" style="background-image:url('https://images.unsplash.com/photo-1555255707-c07966088b7b?w=800&q=80')">
                <div class="ss-badge">🤖 Powering All 15 Services</div>
            </div>
            <div class="ss-content reveal-right">
                <span class="section-label">Zuma AI Engine</span>
                <div class="ss-icon-big" style="background:#f3e5f5;color:#6a1b9a">🤖</div>
                <h2>One AI Engine. Fifteen Use Cases.</h2>
                <p class="desc">From surge pricing to fraud detection to credit scoring, a single AI system learns from the entire Zuma ecosystem to make every service smarter, faster, and safer.</p>
                <ul class="ss-features">
                    <li>Surge pricing: supply-demand computed every 90 seconds</li>
                    <li>Route optimisation: fastest path accounting for live traffic</li>
                    <li>Credit scoring: 40+ behavioural signals, 84% prediction accuracy</li>
                    <li>Fraud detection: every transaction scored in 200ms</li>
                    <li>Personalised recommendations across all services</li>
                </ul>
                <div class="ss-cta">
                    <a href="/blog/zuma-ai-engine-explained" class="btn btn-primary">Read how it works <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- CTA --}}
<section style="padding:80px 0;background:var(--ink);text-align:center">
    <div class="wrap">
        <h2 style="color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:16px" class="reveal">Ready to Try All 15 Services?</h2>
        <p style="color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 36px;font-size:1.05rem" class="reveal">Download Zuma, create an account in 60 seconds, and access everything — rides, food, pharmacy, property, jobs, and more.</p>
        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap" class="reveal">
            <a href="/" class="btn btn-white">Get the App <i class="fab fa-google-play"></i></a>
            <a href="/partners" class="btn btn-outline" style="color:#fff;border-color:rgba(255,255,255,.3)">Become a Partner <i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</section>

@push('scripts')
<script>
// Highlight active service nav link on scroll
const sections = document.querySelectorAll('.service-section');
const navLinks = document.querySelectorAll('.sn-link');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            navLinks.forEach(l => l.classList.remove('active'));
            const id = entry.target.id;
            const active = document.querySelector(`.sn-link[href="#${id}"]`);
            if (active) {
                active.classList.add('active');
                active.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            }
        }
    });
}, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });
sections.forEach(s => observer.observe(s));
</script>
@endpush
@endsection