import React from "react";

export default function CompetitiveEdge() {
  return (
    <section id="comparison" className="comparison-section">
      <div className="container">
        <div className="comparison-layout">
          {/* Comparison matrix Table */}
          <div className="table-wrapper">
            <table className="comparison-table">
              <thead>
                <tr>
                  <th>Capability</th>
                  <th className="col-highlight">Doormile</th>
                  <th>Aggregators</th>
                  <th>Local Couriers</th>
                  <th>Software Platforms</th>
                </tr>
              </thead>
              <tbody>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <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 className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="no-text">No</td>
                  <td className="partial-text">Yes</td>
                  <td className="no-text">No</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <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 className="col-highlight"><span className="advanced-badge">✓ Advanced</span></td>
                  <td className="partial-text">Basic</td>
                  <td className="no-text">No</td>
                  <td className="partial-text">Advanced</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                    </svg>
                    EV-aware planning
                  </td>
                  <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="no-text">No</td>
                  <td className="no-text">No</td>
                  <td className="no-text">No</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <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 className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="partial-text">Partial</td>
                  <td className="no-text">No</td>
                  <td className="partial-text">Yes</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    Real-time tracking
                  </td>
                  <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="partial-text">Yes</td>
                  <td className="no-text">No</td>
                  <td className="partial-text">Yes</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                    Verified handling
                  </td>
                  <td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="no-text">No</td>
                  <td className="partial-text">Partial</td>
                  <td className="no-text">No</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <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 className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
                  <td className="no-text">No</td>
                  <td className="no-text">No</td>
                  <td className="no-text">No</td>
                </tr>
                <tr className="table-row-hover">
                  <td className="capability-cell">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
                      <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 className="col-highlight"><span className="advanced-badge">✓ High</span></td>
                  <td className="no-text">Low</td>
                  <td className="partial-text">Medium</td>
                  <td className="no-text">Low</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* Strategic Moat Side cards */}
          <div className="moat-panel">
            <div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
              <div className="elementor-widget-container">
                <div className="section-header">
                  <span className="section-tag">Competitive Edge</span>
                  <h3 className="logico-title" style={{ marginTop: "10px", marginBottom: "15px" }}>Where Doormile Sits And Why It Wins</h3>
                  <p className="section-desc">A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}