/* global React, Eyebrow, Reveal, tr */
/* ─── PILOT MAP (Malad West) ──────────────────────────────────── */

function PilotMap({ lang }) {
  return (
    <section className="section" id="pilot">
      <div className="wrap">
        <div className="map-grid">
          <Reveal>
            <div>
              <Eyebrow>
                {tr(lang, {
                  en: 'Pilot scope · 10 days',
                  hi: 'पायलट · 10 दिन',
                  mr: 'पायलट · 10 दिवस',
                  gu: 'પાયલટ · 10 દિવસ',
                })}
              </Eyebrow>
              <h2 className="headline headline--lg" style={{ marginTop: 18, maxWidth: '14ch' }}>
                {tr(lang, {
                  en: '50 Nagriks.',
                  hi: '50 नागरिक।',
                  mr: '50 नागरिक.',
                  gu: '50 નાગરિક.',
                })}
                <br />
                {tr(lang, {
                  en: 'One neighbourhood.',
                  hi: 'एक मोहल्ला।',
                  mr: 'एक परिसर.',
                  gu: 'એક વિસ્તાર.',
                })}
                <br />
                <span className="italic h-sun">
                  {tr(lang, {
                    en: 'Met in person.',
                    hi: 'व्यक्तिगत मुलाक़ात।',
                    mr: 'वैयक्तिक भेट.',
                    gu: 'વ્યક્તિગત મુલાકાત.',
                  })}
                </span>
              </h2>
              <p className="lead" style={{ marginTop: 22 }}>
                {tr(lang, {
                  en: 'Cab service first. The pickup polygon stays locked to Malad West. Every Karmik is onboarded face-to-face. Every Nagrik is invited individually. Every fare is observed end-to-end.',
                  hi: 'पहले कैब सेवा। पिकअप क्षेत्र मलाड वेस्ट तक सीमित। हर कर्मिक का आमने-सामने ऑनबोर्डिंग। हर नागरिक को व्यक्तिगत निमंत्रण। हर किराये का अंत-से-अंत निरीक्षण।',
                  mr: 'प्रथम कॅब सेवा. पिकअप क्षेत्र मलाड वेस्टपुरते मर्यादित. प्रत्येक कर्मिकाचे समोरासमोर ऑनबोर्डिंग. प्रत्येक नागरिकाला वैयक्तिक आमंत्रण. प्रत्येक भाड्याचे टोकापासून टोकापर्यंत निरीक्षण.',
                  gu: 'પ્રથમ કેબ સેવા. પિકઅપ વિસ્તાર મલાડ વેસ્ટ સુધી મર્યાદિત. દરેક કર્મિકનું રૂબરૂ ઓનબોર્ડિંગ. દરેક નાગરિકને વ્યક્તિગત આમંત્રણ. દરેક ભાડાનું છેડેથી છેડે અવલોકન.',
                })}
              </p>

              <div style={{
                marginTop: 26,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 10,
                fontFamily: 'var(--mono)',
                fontSize: 11,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: 'var(--teal)',
                padding: '8px 14px',
                background: 'var(--paper-warm)',
                border: '1px solid var(--paper-edge)',
                borderRadius: 999,
              }}>
                <span className="pulse" style={{ background: 'var(--sun-light)' }} />
                {tr(lang, {
                  en: 'Not live yet · preparation phase',
                  hi: 'अभी लाइव नहीं · तैयारी',
                  mr: 'अद्याप लाइव्ह नाही · तयारी',
                  gu: 'હજુ લાઇવ નથી · તૈયારી',
                })}
              </div>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="map-frame">
              <div className="map-frame__chip">
                {tr(lang, {
                  en: 'Pilot zone',
                  hi: 'पायलट क्षेत्र',
                  mr: 'पायलट क्षेत्र',
                  gu: 'પાયલટ વિસ્તાર',
                })}
              </div>

              <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                {/* faint grid */}
                <g stroke="rgba(255,255,255,0.05)" strokeWidth="1">
                  {Array.from({ length: 9 }, (_, i) => (
                    <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="300" />
                  ))}
                  {Array.from({ length: 7 }, (_, i) => (
                    <line key={`h${i}`} x1="0" y1={i * 50} x2="400" y2={i * 50} />
                  ))}
                </g>
                {/* arabian sea hint */}
                <path
                  d="M 0 80 Q 20 110 18 150 Q 14 200 22 240 Q 28 270 12 300 L 0 300 Z"
                  fill="rgba(245,169,60,0.06)"
                  stroke="rgba(245,169,60,0.2)"
                  strokeWidth="1"
                />
                {/* secondary roads */}
                <g stroke="rgba(255,255,255,0.12)" strokeWidth="1.2" fill="none">
                  <path d="M 60 30 Q 130 80 200 100 T 380 130" />
                  <path d="M 40 230 Q 120 200 200 220 T 380 240" />
                  <path d="M 100 0 Q 110 70 130 130 T 160 300" />
                  <path d="M 240 0 Q 250 60 240 130 T 260 300" />
                </g>
                {/* pilot polygon */}
                <path
                  d="M 90 110 L 220 100 L 250 160 L 230 240 L 110 235 L 80 180 Z"
                  fill="rgba(232, 123, 30, 0.16)"
                  stroke="#E87B1E"
                  strokeWidth="2"
                  strokeDasharray="5 5"
                />
                {/* anchor */}
                <g>
                  <circle cx="165" cy="170" r="8" fill="#E87B1E" />
                  <circle cx="165" cy="170" r="16" fill="none" stroke="#E87B1E" strokeWidth="1.5" opacity="0.5">
                    <animate attributeName="r" values="14;22;14" dur="2.4s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
                  </circle>
                </g>
                {/* karmik dots inside polygon */}
                <g fill="#F5A93C" opacity="0.85">
                  <circle cx="130" cy="135" r="3" />
                  <circle cx="195" cy="125" r="3" />
                  <circle cx="220" cy="180" r="3" />
                  <circle cx="135" cy="200" r="3" />
                  <circle cx="180" cy="215" r="3" />
                </g>
                {/* labels */}
                <text x="178" y="172" fill="#F5A93C" fontSize="11" fontFamily="Plus Jakarta Sans" fontWeight="700">Mith Chowky</text>
                <text x="178" y="187" fill="rgba(255,255,255,0.55)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="0.12em">PILOT ANCHOR</text>
                <text x="92" y="98" fill="rgba(255,255,255,0.55)" fontSize="9.5" fontFamily="Plus Jakarta Sans" fontWeight="700" letterSpacing="0.16em">MALAD WEST</text>
              </svg>

              <div className="map-frame__legend">
                <span>Arabian Sea · West</span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Stats strip */}
        <Reveal delay={3}>
          <div style={{
            marginTop: 56,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: 24,
            padding: '28px 32px',
            background: 'var(--paper-warm)',
            border: '1px solid var(--paper-edge)',
            borderRadius: 22,
          }}>
            <StatBlock value="10" label={tr(lang, { en: 'Pilot days', hi: 'पायलट दिन', mr: 'पायलट दिवस', gu: 'પાયલટ દિવસ' })} />
            <StatBlock value="50" label={tr(lang, { en: 'Nagriks', hi: 'नागरिक', mr: 'नागरिक', gu: 'નાગરિક' })} />
            <StatBlock value="1" label={tr(lang, { en: 'Neighbourhood', hi: 'मोहल्ला', mr: 'परिसर', gu: 'વિસ્તાર' })} />
            <StatBlock value="1" label={tr(lang, { en: 'Service · cab', hi: 'सेवा · कैब', mr: 'सेवा · कॅब', gu: 'સેવા · કેબ' })} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const StatBlock = ({ value, label }) => (
  <div>
    <div style={{
      fontFamily: 'var(--display)',
      fontWeight: 800,
      fontSize: 'clamp(40px, 4.4vw, 56px)',
      letterSpacing: '-0.028em',
      lineHeight: 0.95,
      color: 'var(--ink-1000)',
    }}>
      {value}
    </div>
    <div style={{
      marginTop: 8,
      fontFamily: 'var(--mono)',
      fontWeight: 600,
      fontSize: 11,
      letterSpacing: '0.18em',
      textTransform: 'uppercase',
      color: 'var(--teal)',
    }}>
      {label}
    </div>
  </div>
);

Object.assign(window, { PilotMap });