<?php
$page_title = 'Service & Installation';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-wrench" style="color:#f59e0b; margin-right:10px;"></i>Service & Installation</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Installation booking, AMC plans, technician visits, spare parts, and video support.</p>
    </div>
    <button style="background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none; padding:10px 20px; border-radius:8px; font-size:0.9rem; cursor:pointer; font-weight:600;"><i class="fas fa-plus"></i> Book Service</button>
</div>
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">INSTALLATIONS</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">8</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-tools"></i> All Completed</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">AMC PLAN</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">Gold</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-shield-alt"></i> Valid till Mar 2027</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">NEXT SERVICE</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">May 12</div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-calendar-check"></i> Scheduled</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">SERVICE RATING</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">4.8/5</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;">⭐⭐⭐⭐⭐</div>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-calendar-alt" style="color:#f59e0b; margin-right:8px;"></i>Service Bookings</h3>
        <?php
        $services = [
            ['Installation — Double Bowl Sink', 'May 12, 10 AM', 'Technician: Ravi K.', '#10b981', 'Confirmed'],
            ['AMC Routine Service', 'Jun 8, 2 PM', 'Preventive check', '#3b82f6', 'Scheduled'],
            ['Faucet Repair', 'Apr 20', 'Washer replaced', '#10b981', 'Completed'],
        ];
        foreach ($services as $s): ?>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:10px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <div style="font-weight:600; font-size:0.9rem;"><?= $s[0] ?></div>
                <span style="background:<?= $s[3] ?>15; color:<?= $s[3] ?>; padding:3px 8px; border-radius:6px; font-size:0.7rem; font-weight:bold;"><?= $s[4] ?></span>
            </div>
            <div style="font-size:0.8rem; color:#64748b;"><?= $s[1] ?> · <?= $s[2] ?></div>
        </div>
        <?php endforeach; ?>
        <div style="display:flex; gap:10px; margin-top:10px;">
            <button style="flex:1; background:#f59e0b; color:#fff; border:none; padding:10px; border-radius:8px; font-size:0.85rem; cursor:pointer; font-weight:600;"><i class="fas fa-tools"></i> Book Installation</button>
            <button style="flex:1; background:#3b82f6; color:#fff; border:none; padding:10px; border-radius:8px; font-size:0.85rem; cursor:pointer; font-weight:600;"><i class="fas fa-user-cog"></i> Technician Visit</button>
        </div>
    </div>
    <div style="display:flex; flex-direction:column; gap:24px;">
        <div class="card" style="margin-bottom:0;">
            <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-cog" style="color:#8b5cf6; margin-right:8px;"></i>Spare Parts</h3>
            <?php
            $parts = [
                ['Drain Strainer', '₹280', 'In Stock'],
                ['Faucet Cartridge', '₹450', 'In Stock'],
                ['Soap Dispenser Pump', '₹350', 'In Stock'],
            ];
            foreach ($parts as $p): ?>
            <div style="display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f1f5f9;">
                <span style="font-size:0.9rem;"><?= $p[0] ?></span>
                <div style="display:flex; align-items:center; gap:10px;">
                    <span style="font-weight:bold;"><?= $p[1] ?></span>
                    <button style="background:#2563eb; color:#fff; border:none; padding:4px 10px; border-radius:4px; font-size:0.75rem; cursor:pointer;">Order</button>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="card" style="margin-bottom:0; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;">
            <h3 style="margin:0 0 8px; font-size:1.1rem;"><i class="fas fa-video"></i> Video Support</h3>
            <p style="margin:0 0 15px; font-size:0.85rem; opacity:0.85;">Connect with a technician via live video for instant troubleshooting.</p>
            <button style="background:#fff; color:#d97706; border:none; padding:10px 20px; border-radius:8px; font-size:0.9rem; cursor:pointer; font-weight:700; width:100%;">Start Video Call</button>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
