doormile-site/includes/sections/about/competitive-edge.php

<section id="comparison" class="comparison-section">
        <div class="container">
            <div class="section-header">
                <span class="section-tag">Competitive Edge</span>
                <h2 class="section-title">Where Doormile Sits — And Why It Wins</h2>
                <p class="section-desc">A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.</p>
            </div>

            <div class="comparison-layout">
                <!-- Comparison matrix Table -->
                <div class="table-wrapper">
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>Capability</th>
                                <th class="col-highlight">Doormile</th>
                                <th>Aggregators</th>
                                <th>Local Couriers</th>
                                <th>Software Platforms</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
                                    Owned fleet control
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="no-text">No</td>
                                <td class="partial-text">Yes</td>
                                <td class="no-text">No</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="M12 6v6l4 2"></path></svg>
                                    Dynamic routing & dispatch
                                </td>
                                <td class="col-highlight"><span class="advanced-badge">✓ Advanced</span></td>
                                <td class="partial-text">Basic</td>
                                <td class="no-text">No</td>
                                <td class="partial-text">Advanced</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
                                    EV-aware planning
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="no-text">No</td>
                                <td class="no-text">No</td>
                                <td class="no-text">No</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                    Documentation & proof trail
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="partial-text">Partial</td>
                                <td class="no-text">No</td>
                                <td class="partial-text">Yes</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                    Real-time tracking
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="partial-text">Yes</td>
                                <td class="no-text">No</td>
                                <td class="partial-text">Yes</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                                    Verified handling
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="no-text">No</td>
                                <td class="partial-text">Partial</td>
                                <td class="no-text">No</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h38s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                                    Hyperlocal learning
                                </td>
                                <td class="col-highlight"><span class="yes-badge">✓ Yes</span></td>
                                <td class="no-text">No</td>
                                <td class="no-text">No</td>
                                <td class="no-text">No</td>
                            </tr>
                            <tr class="table-row-hover">
                                <td class="capability-cell">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="22" y1="12" x2="18" y2="12"></line><line x1="6" y1="12" x2="2" y2="12"></line><line x1="12" y1="6" x2="12" y2="2"></line><line x1="12" y1="22" x2="12" y2="18"></line></svg>
                                    SLA accountability
                                </td>
                                <td class="col-highlight"><span class="advanced-badge">✓ High</span></td>
                                <td class="no-text">Low</td>
                                <td class="partial-text">Medium</td>
                                <td class="no-text">Low</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Strategic Moat Side cards -->
                <div class="moat-panel">
                    <div class="moat-header-section">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                        </svg>
                        <h5>Strategic Moat</h5>
                    </div>

                    <div class="moat-list">
                        <!-- Accordion Card 1 -->
                        <div class="moat-card active" data-index="0">
                            <div class="moat-card-title">
                                Ownership &gt; Aggregation
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </div>
                            <div class="moat-card-content">
                                End-to-end control of the fleet eliminates delivery partner dependency and ensures highly predictable quality parameters and consistent operational delivery.
                            </div>
                        </div>

                        <!-- Accordion Card 2 -->
                        <div class="moat-card" data-index="1">
                            <div class="moat-card-title">
                                Intelligence &gt; Manual Ops
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </div>
                            <div class="moat-card-content">
                                Native algorithmic optimization drives every routing and dispatch decision at scale, removing human cognitive bottlenecking and localized dispatcher delays.
                            </div>
                        </div>

                        <!-- Accordion Card 3 -->
                        <div class="moat-card" data-index="2">
                            <div class="moat-card-title">
                                Trust &gt; Transactions
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </div>
                            <div class="moat-card-content">
                                Verified handling and transparent digital chain-of-custody trails build enterprise-grade credibility, protecting delicate logistics consignments.
                            </div>
                        </div>
                    </div>

                    <!-- Highlighted callout banner -->
                    <div class="moat-banner">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                        </svg>
                        <span>Doormile combines operational ownership with algorithmic optimization and trusted delivery execution.</span>
                    </div>
                </div>
            </div>
        </div>
    </section>