// Gap chart — burocracia ascendente vs benefício aproveitado descendente
const GapChart = () => {
  return (
    <svg viewBox="0 0 500 320" style={{ width: "100%", height: "auto", maxWidth: 520 }} role="img" aria-label="Gap entre burocracia e aproveitamento">
      <defs>
        <linearGradient id="gap-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#F37021" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="#F37021" stopOpacity="0.02"/>
        </linearGradient>
      </defs>

      {/* Axes */}
      <line x1="60" y1="40" x2="60" y2="270" stroke="#c3c6d1" strokeWidth="1"/>
      <line x1="60" y1="270" x2="470" y2="270" stroke="#c3c6d1" strokeWidth="1"/>

      {/* Y labels */}
      <text x="52" y="48" textAnchor="end" fontSize="11" fontWeight="600" fill="#43474f">Alta</text>
      <text x="52" y="158" textAnchor="end" fontSize="11" fontWeight="600" fill="#43474f">Média</text>
      <text x="52" y="270" textAnchor="end" fontSize="11" fontWeight="600" fill="#43474f">Baixa</text>

      {/* X labels */}
      <text x="70" y="295" fontSize="12" fontWeight="700" fill="#001e40">Sem orientação</text>
      <text x="460" y="295" textAnchor="end" fontSize="12" fontWeight="700" fill="#F37021">Com Dalla Costa</text>

      {/* Grid lines */}
      <line x1="60" y1="105" x2="470" y2="105" stroke="#eceef0"/>
      <line x1="60" y1="215" x2="470" y2="215" stroke="#eceef0"/>

      {/* Burocracia ascendente (navy) */}
      <path
        d="M 60 240 C 150 230, 250 200, 470 60"
        stroke="#001e40" strokeWidth="2.5" fill="none"
      />
      {/* Benefício descendente (orange) */}
      <path
        d="M 60 80 C 150 130, 250 200, 470 255"
        stroke="#F37021" strokeWidth="2.5" fill="none"
      />

      {/* Gap fill between the two */}
      <path
        d="M 60 240 C 150 230, 250 200, 470 60 L 470 255 C 250 200, 150 130, 60 80 Z"
        fill="url(#gap-fill)"
      />

      {/* Legend */}
      <g transform="translate(72 54)">
        <circle cx="0" cy="0" r="4" fill="#001e40"/>
        <text x="10" y="4" fontSize="11" fontWeight="600" fill="#001e40">Complexidade burocrática</text>
      </g>
      <g transform="translate(280 258)">
        <circle cx="0" cy="0" r="4" fill="#F37021"/>
        <text x="10" y="4" fontSize="11" fontWeight="600" fill="#F37021">Famílias/taxistas que aproveitam</text>
      </g>
    </svg>
  );
};

window.GapChart = GapChart;