// Delivery — direction-B section between Featured products and Trust strip.
// Two-column: copy left, single UAE-map SVG visual right. No zones, no fees,
// no terms — those would over-complicate. The map carries the message.

(function () {
  // The UAE silhouette path + dot positions are intentionally schematic.
  // Coordinates derived from the v2 brainstorm mockup. Don't "improve" the
  // outline — it reads as a brand illustration, not a Google Maps embed.
  const UAE_OUTLINE = "M 80 230 L 110 260 L 160 280 L 220 290 L 280 285 L 340 280 L 390 270 L 440 245 L 470 215 L 490 185 L 510 145 L 525 105 L 530 70 L 510 55 L 480 60 L 445 70 L 415 85 L 380 100 L 350 105 L 320 110 L 290 120 L 260 130 L 230 140 L 200 155 L 170 175 L 140 195 L 110 215 Z";

  // Dubai is the origin (6px orange dot + truck). Other 6 emirates are 4px ink dots.
  const EMIRATES = [
    { name: 'Abu Dhabi',      x: 220, y: 240, lx: 220, ly: 262, anchor: 'middle' },
    { name: 'Sharjah',        x: 385, y: 158, lx: 395, ly: 155, anchor: 'start'  },
    { name: 'Ajman',          x: 395, y: 145, lx: 405, ly: 142, anchor: 'start'  },
    { name: 'Umm Al Quwain',  x: 405, y: 130, lx: 415, ly: 127, anchor: 'start'  },
    { name: 'Ras Al Khaimah', x: 420, y: 105, lx: 430, ly: 102, anchor: 'start'  },
    { name: 'Fujairah',       x: 480, y: 195, lx: 490, ly: 198, anchor: 'start'  },
  ];

  window.Delivery = function Delivery() {
    return (
      <section className="delivery-section" aria-labelledby="delivery-h">
        <div className="rail delivery-inner">
          <div className="delivery-text">
            <div className="label-mono">Delivery</div>
            <h2 id="delivery-h" className="delivery-h">
              We deliver to all{' '}
              <span className="delivery-h-accent">seven emirates.</span>
            </h2>
            <p className="delivery-body">
              From Al Quoz to your site — our trucks run daily across the U.A.E. Same-day in Dubai when you order before noon; next morning across the rest of the country.
            </p>
            <div className="delivery-meta">
              <div className="delivery-meta-item">
                <strong className="tnum">7</strong>
                <span>emirates served</span>
              </div>
              <div className="delivery-meta-item">
                <strong>Same-day</strong>
                <span>in Dubai</span>
              </div>
            </div>
          </div>

          <div className="uae-map-wrap">
            <svg
              className="uae-map"
              viewBox="0 0 600 380"
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-label="Delivery routes from Al Quoz to all seven emirates of the U.A.E."
            >
              {/* UAE silhouette */}
              <path d={UAE_OUTLINE} fill="var(--cream)" opacity="0.5" aria-hidden="true" />
              <path
                d={UAE_OUTLINE}
                fill="none"
                stroke="var(--ink)"
                strokeWidth="1.5"
                strokeLinejoin="round"
                opacity="0.7"
                aria-hidden="true"
              />

              {/* Dashed route lines from Dubai to each other emirate */}
              <g stroke="var(--orange)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" opacity="0.7" aria-hidden="true">
                {EMIRATES.map(e => (
                  <line key={e.name} x1="380" y1="175" x2={e.x} y2={e.y} />
                ))}
              </g>

              {/* Truck icon at Dubai */}
              <g transform="translate(370 165)" aria-hidden="true">
                <rect x="0" y="0" width="20" height="14" fill="var(--orange)" />
                <rect x="20" y="4" width="10" height="10" fill="var(--ink)" />
                <circle cx="6" cy="16" r="2" fill="var(--ink)" />
                <circle cx="22" cy="16" r="2" fill="var(--ink)" />
              </g>

              {/* Dubai (origin) */}
              <circle cx="380" cy="175" r="6" fill="var(--orange)" aria-hidden="true" />
              <text
                x="380" y="200"
                textAnchor="middle"
                fontFamily="ui-monospace, monospace"
                fontSize="10"
                fontWeight="700"
                fill="var(--ink)"
                letterSpacing="0.1em"
              >DUBAI</text>

              {/* Other six emirates */}
              {EMIRATES.map(e => (
                <g key={e.name} aria-hidden="true">
                  <circle cx={e.x} cy={e.y} r="4" fill="var(--ink)" />
                  <text
                    x={e.lx} y={e.ly}
                    textAnchor={e.anchor}
                    fontFamily="ui-monospace, monospace"
                    fontSize="9"
                    fill="var(--ink)"
                  >{e.name.toUpperCase()}</text>
                </g>
              ))}

              {/* North arrow */}
              <g transform="translate(60 60)" aria-hidden="true">
                <line x1="0" y1="14" x2="0" y2="0" stroke="var(--steel)" strokeWidth="1" />
                <polygon points="0,-2 -3,4 3,4" fill="var(--steel)" />
                <text
                  x="0" y="-6"
                  textAnchor="middle"
                  fontFamily="ui-monospace, monospace"
                  fontSize="9"
                  fill="var(--steel)"
                  letterSpacing="0.1em"
                >N</text>
              </g>
            </svg>
            <div className="uae-map-cap label-mono">U.A.E · routes from Al Quoz</div>
          </div>
        </div>
      </section>
    );
  };
})();