/* global React, Eyebrow, Reveal, MiniMark, tr */
/* ─── INTERACTIVE NAGRIK JOURNEY (illustrative phone preview) ───── */

function NagrikJourney({ lang }) {
  const [step, setStep] = React.useState(0);
  const TOTAL = 4;

  const next = () => setStep((s) => Math.min(TOTAL - 1, s + 1));
  const prev = () => setStep((s) => Math.max(0, s - 1));
  const reset = () => setStep(0);

  return (
    <section className="section section--civic" id="journey">
      <div className="wrap">
        <Reveal>
          <Eyebrow>
            {tr(lang, {
              en: 'Illustrative journey · Nagrik',
              hi: 'उदाहरण यात्रा · नागरिक',
              mr: 'उदाहरण प्रवास · नागरिक',
              gu: 'ઉદાહરણ પ્રવાસ · નાગરિક',
            })}
          </Eyebrow>
        </Reveal>

        <Reveal delay={1}>
          <h2 className="headline headline--lg" style={{ marginTop: 18, maxWidth: '16ch' }}>
            {tr(lang, {
              en: 'Step through',
              hi: 'मलाड वेस्ट',
              mr: 'मलाड वेस्टमध्ये',
              gu: 'મલાડ વેસ્ટમાં',
            })}{' '}
            <span className="italic h-teal">
              {tr(lang, {
                en: 'a cab in Malad West.',
                hi: 'में कैब की प्रीव्यू।',
                mr: 'एक कॅब अनुभवा.',
                gu: 'એક કેબ અનુભવો.',
              })}
            </span>
          </h2>
        </Reveal>

        <div className="phone-grid">
          <Reveal>
            <div>
              <PhoneDevice step={step} lang={lang} />
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div>
              <div className="phone-steps" aria-label="Journey steps">
                {Array.from({ length: TOTAL }).map((_, i) => (
                  <span
                    key={i}
                    className={
                      'phone-step-dot ' +
                      (i === step ? 'active' : i < step ? 'done' : '')
                    }
                  />
                ))}
                <span className="label" style={{ marginLeft: 'auto' }}>
                  {String(step + 1).padStart(2, '0')} / {String(TOTAL).padStart(2, '0')}
                </span>
              </div>

              <JourneyCopy step={step} lang={lang} />

              <div className="phone-stepper">
                <button onClick={prev} disabled={step === 0}>
                  ← {tr(lang, { en: 'Back', hi: 'पीछे', mr: 'मागे', gu: 'પાછળ' })}
                </button>
                {step < TOTAL - 1 ? (
                  <button className="primary" onClick={next}>
                    {tr(lang, {
                      en: 'Next',
                      hi: 'आगे',
                      mr: 'पुढे',
                      gu: 'આગળ',
                    })}{' '}
                    →
                  </button>
                ) : (
                  <button className="primary" onClick={reset}>
                    {tr(lang, {
                      en: 'Start over',
                      hi: 'फिर से शुरू',
                      mr: 'पुन्हा सुरू',
                      gu: 'ફરી શરૂ',
                    })}
                  </button>
                )}
              </div>

              <p style={{
                marginTop: 22,
                fontSize: 12,
                color: 'var(--ink-500)',
                lineHeight: 1.6,
                fontStyle: 'italic',
                maxWidth: 420,
              }}>
                {tr(lang, {
                  en: 'Concept preview. Booking, matching, fares, and payments are not live. The numbers shown here describe the model we are building toward.',
                  hi: 'कॉन्सेप्ट प्रीव्यू। बुकिंग, मिलान, किराये और भुगतान लाइव नहीं हैं। यहाँ दिखाए गए आँकड़े वह मॉडल बताते हैं जिसकी ओर हम बढ़ रहे हैं।',
                  mr: 'कॉन्सेप्ट प्रीव्ह्यू. बुकिंग, जुळवणी, भाडे आणि देयके लाइव्ह नाहीत. इथे दाखवलेले आकडे आम्ही ज्या मॉडेलकडे जात आहोत ते दर्शवतात.',
                  gu: 'કોન્સેપ્ટ પ્રિવ્યૂ. બુકિંગ, મેચિંગ, ભાડું અને ચૂકવણી લાઇવ નથી. અહીં દેખાડેલા આંકડા એ મોડેલ બતાવે છે જે તરફ અમે જઈ રહ્યા છીએ.',
                })}
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* Copy block per step */
function JourneyCopy({ step, lang }) {
  const COPY = [
    {
      kicker: tr(lang, { en: 'Step 01', hi: 'चरण 01', mr: 'पायरी 01', gu: 'પગથિયું 01' }),
      title: tr(lang, {
        en: 'Pick up from Mith Chowky',
        hi: 'मीठ चौकी से शुरू',
        mr: 'मीठ चौकीमधून सुरू',
        gu: 'મીઠ ચોકીથી શરૂ',
      }),
      body: tr(lang, {
        en: 'Pickup is locked to the pilot polygon — Malad West only — for the first 10 days. The map shows nearby corners the Nagrik can choose, in their own language.',
        hi: 'पिकअप पहले 10 दिनों के लिए पायलट क्षेत्र तक सीमित — सिर्फ़ मलाड वेस्ट। नक्शा नागरिक की भाषा में आस-पास के कोने दिखाता है।',
        mr: 'पहिल्या 10 दिवसांसाठी पिकअप पायलट क्षेत्रापुरते मर्यादित — फक्त मलाड वेस्ट. नकाशा नागरिकाच्या भाषेत जवळचे कोपरे दाखवतो.',
        gu: 'પ્રથમ 10 દિવસ માટે પિકઅપ પાયલટ વિસ્તારમાં મર્યાદિત — ફક્ત મલાડ વેસ્ટ. નકશો નાગરિકની ભાષામાં નજીકના ખૂણા દેખાડે છે.',
      }),
    },
    {
      kicker: tr(lang, { en: 'Step 02', hi: 'चरण 02', mr: 'पायरी 02', gu: 'પગથિયું 02' }),
      title: tr(lang, {
        en: 'Match in plain language',
        hi: 'सादी भाषा में मेल',
        mr: 'सोप्या भाषेत जुळणी',
        gu: 'સાદી ભાષામાં મેચ',
      }),
      body: tr(lang, {
        en: 'A named Karmik — onboarded in person — accepts the trip. Distance, ETA, fare. No surge, no mystery breakdown, no anonymous pool.',
        hi: 'व्यक्तिगत ऑनबोर्ड किया गया एक नामज़द कर्मिक सवारी स्वीकार करता है। दूरी, ETA, किराया। कोई सर्ज नहीं, कोई रहस्य नहीं, कोई गुमनाम पूल नहीं।',
        mr: 'वैयक्तिकरित्या ऑनबोर्ड केलेला नावाचा कर्मिक प्रवास स्वीकारतो. अंतर, ETA, भाडे. सर्ज नाही, रहस्य नाही, अनामिक पूल नाही.',
        gu: 'વ્યક્તિગત રીતે ઓનબોર્ડ થયેલ નામધારી કર્મિક સવારી સ્વીકારે છે. અંતર, ETA, ભાડું. કોઈ સર્જ નહીં, કોઈ રહસ્ય નહીં, કોઈ અનામી પૂલ નહીં.',
      }),
    },
    {
      kicker: tr(lang, { en: 'Step 03', hi: 'चरण 03', mr: 'पायरी 03', gu: 'પગથિયું 03' }),
      title: tr(lang, {
        en: 'On the trip',
        hi: 'यात्रा के दौरान',
        mr: 'प्रवासादरम्यान',
        gu: 'યાત્રા દરમિયાન',
      }),
      body: tr(lang, {
        en: 'A live route preview, the Karmik\'s name, and a single contact button. Nothing nudging the rider to tip, upgrade, or rate inside the trip itself.',
        hi: 'लाइव रूट, कर्मिक का नाम, और एक संपर्क बटन। यात्रा के दौरान न टिप, न अपग्रेड, न रेटिंग के लिए कोई दबाव।',
        mr: 'लाइव्ह मार्ग, कर्मिकाचे नाव, आणि एक संपर्क बटण. प्रवासादरम्यान टिप, अपग्रेड किंवा रेटिंगसाठी कोणताही दबाव नाही.',
        gu: 'લાઇવ રૂટ, કર્મિકનું નામ, અને એક સંપર્ક બટન. યાત્રા દરમિયાન ટિપ, અપગ્રેડ કે રેટિંગ માટે કોઈ દબાણ નહીં.',
      }),
    },
    {
      kicker: tr(lang, { en: 'Step 04', hi: 'चरण 04', mr: 'पायरी 04', gu: 'પગથિયું 04' }),
      title: tr(lang, {
        en: 'The receipt — same on both sides',
        hi: 'रसीद — दोनों तरफ़ वही',
        mr: 'पावती — दोन्ही बाजूंना तीच',
        gu: 'રસીદ — બંને બાજુએ એ જ',
      }),
      body: tr(lang, {
        en: 'Fare, 9% platform fee, 1.5% welfare pool, and the exact amount reaching the Karmik. The Karmik\'s app shows the same numbers, in the same order.',
        hi: 'किराया, 9% प्लेटफ़ॉर्म शुल्क, 1.5% कल्याण कोष, और कर्मिक तक पहुँची हुई पूरी रक़म। कर्मिक का ऐप वही संख्याएँ, उसी क्रम में दिखाता है।',
        mr: 'भाडे, 9% प्लॅटफॉर्म शुल्क, 1.5% कल्याण निधी, आणि कर्मिकापर्यंत पोहोचलेली अचूक रक्कम. कर्मिकाचे अ‍ॅप तेच आकडे त्याच क्रमाने दाखवते.',
        gu: 'ભાડું, 9% પ્લેટફોર્મ ફી, 1.5% કલ્યાણ ફંડ, અને કર્મિક સુધી પહોંચેલી ચોક્કસ રકમ. કર્મિકની એપ એ જ આંકડા એ જ ક્રમમાં દેખાડે છે.',
      }),
    },
  ];
  const c = COPY[step];
  return (
    <div key={step} style={{
      animation: 'fadeSwap 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both',
    }}>
      <style>{`@keyframes fadeSwap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }`}</style>
      <div className="label" style={{ color: 'var(--sun-deep)' }}>{c.kicker}</div>
      <h3 style={{
        fontFamily: 'var(--display)',
        fontWeight: 700,
        fontSize: 'clamp(22px, 2.4vw, 30px)',
        letterSpacing: '-0.018em',
        lineHeight: 1.18,
        color: 'var(--ink-1000)',
        margin: '10px 0 14px',
        maxWidth: 460,
      }}>{c.title}</h3>
      <p style={{
        fontSize: 15,
        lineHeight: 1.65,
        color: 'var(--ink-700)',
        margin: 0,
        maxWidth: 460,
      }}>{c.body}</p>
    </div>
  );
}

/* The phone bezel + screen contents per step */
function PhoneDevice({ step, lang }) {
  return (
    <div className="phone">
      <div className="phone__notch" />
      <div className="phone__screen">
        <div className="phone__statusbar">
          <span>9:41</span>
          <span style={{ opacity: 0.8 }}>5G · 86%</span>
        </div>
        <div className="phone__body">
          {step === 0 && <ScreenPickup lang={lang} />}
          {step === 1 && <ScreenMatch lang={lang} />}
          {step === 2 && <ScreenTrip lang={lang} />}
          {step === 3 && <ScreenReceipt lang={lang} />}
        </div>
      </div>
    </div>
  );
}

/* ─── Screen 1: Pickup ────────────────────────────────────────── */
function ScreenPickup({ lang }) {
  return (
    <div style={{ padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em', color: 'var(--teal)', textTransform: 'uppercase' }}>
          {tr(lang, { en: 'Pilot · Malad West', hi: 'पायलट · मलाड वेस्ट', mr: 'पायलट · मलाड वेस्ट', gu: 'પાયલટ · મલાડ વેસ્ટ' })}
        </span>
        <MiniMark size={20} />
      </div>

      <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 19, letterSpacing: '-0.018em', color: 'var(--ink-1000)', lineHeight: 1.2 }}>
        {tr(lang, {
          en: 'Where from?',
          hi: 'कहाँ से?',
          mr: 'कुठून?',
          gu: 'ક્યાંથી?',
        })}
      </div>

      {/* Map area */}
      <div style={{
        flex: 1, minHeight: 0,
        background: '#F4EDDF',
        borderRadius: 14,
        border: '1px solid #E5D9BC',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 240 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          {/* roads */}
          <g stroke="#D6C9A8" strokeWidth="6" fill="none" strokeLinecap="round">
            <path d="M 0 80 Q 80 70 120 90 T 240 100" />
            <path d="M 0 160 Q 60 150 130 170 T 240 180" />
            <path d="M 80 0 Q 90 80 110 130 T 130 240" />
            <path d="M 170 0 Q 175 60 165 130 T 180 240" />
          </g>
          {/* pilot polygon */}
          <path
            d="M 60 70 L 190 60 L 210 130 L 195 200 L 80 200 L 50 130 Z"
            fill="rgba(232,123,30,0.13)"
            stroke="#E87B1E"
            strokeWidth="1.5"
            strokeDasharray="4 4"
          />
          {/* pickup pin */}
          <g>
            <circle cx="125" cy="135" r="8" fill="#E87B1E" />
            <circle cx="125" cy="135" r="14" fill="none" stroke="#E87B1E" strokeWidth="1.2" opacity="0.45" />
            <circle cx="125" cy="135" r="22" fill="none" stroke="#E87B1E" strokeWidth="1" opacity="0.22" />
          </g>
          {/* nearby corners */}
          <g fill="#1F5266">
            <circle cx="80" cy="100" r="3" />
            <circle cx="172" cy="106" r="3" />
            <circle cx="100" cy="180" r="3" />
            <circle cx="178" cy="170" r="3" />
          </g>
          <text x="135" y="138" fontFamily="Plus Jakarta Sans" fontSize="8" fontWeight="700" fill="#143844">Mith Chowky</text>
        </svg>
        <div style={{
          position: 'absolute', top: 8, right: 8,
          background: 'rgba(20, 56, 68, 0.92)', color: 'white',
          padding: '4px 8px', borderRadius: 8,
          fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>
          {tr(lang, { en: 'Pilot zone', hi: 'पायलट क्षेत्र', mr: 'पायलट क्षेत्र', gu: 'પાયલટ વિસ્તાર' })}
        </div>
      </div>

      <div style={{
        padding: '12px 14px',
        background: '#FAF7F1',
        border: '1px solid #ECEFF1',
        borderRadius: 12,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: 999, background: 'var(--sun)',
        }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 12.5, color: 'var(--ink-1000)' }}>
            {tr(lang, {
              en: 'Mith Chowky · Corner',
              hi: 'मीठ चौकी · कोना',
              mr: 'मीठ चौकी · कोपरा',
              gu: 'મીઠ ચોકી · ખૂણો',
            })}
          </div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>
            {tr(lang, {
              en: 'Malad West · 400064',
              hi: 'मलाड वेस्ट · 400064',
              mr: 'मलाड वेस्ट · 400064',
              gu: 'મલાડ વેસ્ટ · 400064',
            })}
          </div>
        </div>
      </div>

      <button style={{
        appearance: 'none', border: 0,
        background: 'var(--sun)',
        color: 'var(--paper)',
        padding: '12px 16px',
        borderRadius: 12,
        fontFamily: 'var(--display)', fontWeight: 700, fontSize: 13.5,
        cursor: 'default',
        pointerEvents: 'none',
      }}>
        {tr(lang, {
          en: 'Request a cab',
          hi: 'कैब बुक करें',
          mr: 'कॅब बुक करा',
          gu: 'કેબ બુક કરો',
        })}
      </button>
    </div>
  );
}

/* ─── Screen 2: Match ──────────────────────────────────────────── */
function ScreenMatch({ lang }) {
  return (
    <div style={{ padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em', color: 'var(--teal)', textTransform: 'uppercase' }}>
          {tr(lang, { en: 'Karmik found', hi: 'कर्मिक मिला', mr: 'कर्मिक सापडला', gu: 'કર્મિક મળ્યો' })}
        </span>
        <MiniMark size={20} />
      </div>

      {/* Karmik card */}
      <div style={{
        padding: 14,
        background: '#F4EDDF',
        border: '1px solid #E5D9BC',
        borderRadius: 14,
        display: 'flex',
        alignItems: 'center',
        gap: 14,
      }}>
        <div style={{
          width: 46, height: 46, borderRadius: 14,
          background: 'var(--teal)', color: 'var(--paper)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--display)', fontWeight: 800, fontSize: 17,
        }}>
          PK
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 14, color: 'var(--ink-1000)', letterSpacing: '-0.01em' }}>
            Pratik K.
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-700)', marginTop: 3 }}>
            {tr(lang, {
              en: 'Hatchback · MH-04 ▪️ 8421',
              hi: 'हैचबैक · MH-04 ▪️ 8421',
              mr: 'हॅचबॅक · MH-04 ▪️ 8421',
              gu: 'હેચબેક · MH-04 ▪️ 8421',
            })}
          </div>
        </div>
        <div style={{
          fontFamily: 'var(--display)', fontWeight: 800, fontSize: 14, color: 'var(--sun-deep)',
        }}>
          4 min
        </div>
      </div>

      {/* Trip preview */}
      <div style={{
        padding: 14,
        background: '#FAF7F1',
        border: '1px solid #ECEFF1',
        borderRadius: 14,
        display: 'grid',
        gap: 10,
      }}>
        <PreviewRow
          dot="var(--sun)"
          title={tr(lang, { en: 'Mith Chowky', hi: 'मीठ चौकी', mr: 'मीठ चौकी', gu: 'મીઠ ચોકી' })}
          sub={tr(lang, { en: 'Pickup', hi: 'पिकअप', mr: 'पिकअप', gu: 'પિકઅપ' })}
        />
        <div style={{ width: 1, height: 14, background: 'var(--ink-200)', marginLeft: 5 }} />
        <PreviewRow
          dot="var(--teal)"
          title={tr(lang, { en: 'Inorbit Mall · Gate 2', hi: 'इनऑर्बिट मॉल · गेट 2', mr: 'इनऑर्बिट मॉल · गेट 2', gu: 'ઇનઓર્બિટ મોલ · ગેટ 2' })}
          sub={tr(lang, { en: 'Drop', hi: 'ड्रॉप', mr: 'ड्रॉप', gu: 'ડ્રોપ' })}
        />
      </div>

      {/* Fare row */}
      <div style={{
        padding: '14px 16px',
        background: 'var(--teal-deep)',
        color: 'var(--paper)',
        borderRadius: 14,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginTop: 'auto',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'rgba(250,247,241,0.6)',
          }}>
            {tr(lang, { en: 'Fare · printed', hi: 'किराया · छपा हुआ', mr: 'भाडे · छापलेले', gu: 'ભાડું · છપાયેલ' })}
          </div>
          <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, color: 'var(--paper)', letterSpacing: '-0.01em' }}>
            ₹100.00
          </div>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--sun-light)', textAlign: 'right', lineHeight: 1.5 }}>
          {tr(lang, { en: 'No surge', hi: 'सर्ज नहीं', mr: 'सर्ज नाही', gu: 'સર્જ નહીં' })}
          <br />
          {tr(lang, { en: 'No mystery', hi: 'रहस्य नहीं', mr: 'रहस्य नाही', gu: 'રહસ્ય નહીં' })}
        </div>
      </div>
    </div>
  );
}

const PreviewRow = ({ dot, title, sub }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <span style={{ width: 10, height: 10, borderRadius: 999, background: dot, flexShrink: 0 }} />
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 12.5, color: 'var(--ink-1000)' }}>{title}</div>
      <div style={{ fontSize: 10, color: 'var(--ink-500)', marginTop: 2, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{sub}</div>
    </div>
  </div>
);

/* ─── Screen 3: Trip in progress ───────────────────────────────── */
function ScreenTrip({ lang }) {
  return (
    <div style={{ padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em', color: 'var(--sun-deep)', textTransform: 'uppercase' }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--sun)', marginRight: 6, verticalAlign: 'middle' }} />
          {tr(lang, { en: 'On trip', hi: 'सवारी जारी', mr: 'प्रवास सुरू', gu: 'યાત્રા ચાલુ' })}
        </span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-500)' }}>ETA 11 min</span>
      </div>

      {/* Map with route */}
      <div style={{
        flex: 1, minHeight: 0,
        background: '#F4EDDF',
        borderRadius: 14,
        border: '1px solid #E5D9BC',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 240 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          <g stroke="#D6C9A8" strokeWidth="6" fill="none" strokeLinecap="round">
            <path d="M 0 80 Q 80 70 120 90 T 240 100" />
            <path d="M 0 160 Q 60 150 130 170 T 240 180" />
            <path d="M 80 0 Q 90 80 110 130 T 130 240" />
            <path d="M 170 0 Q 175 60 165 130 T 180 240" />
          </g>
          {/* route path */}
          <path d="M 50 170 Q 90 150 120 130 T 195 70" stroke="#E87B1E" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeDasharray="6 5" />
          {/* origin */}
          <circle cx="50" cy="170" r="6" fill="#1F5266" />
          {/* car (moving along) */}
          <g transform="translate(118 132)">
            <circle cx="0" cy="0" r="10" fill="var(--sun)" />
            <circle cx="0" cy="0" r="16" fill="none" stroke="var(--sun)" strokeWidth="1.5" opacity="0.4" />
          </g>
          {/* destination */}
          <g>
            <circle cx="195" cy="70" r="6" fill="#E87B1E" />
            <rect x="200" y="60" width="32" height="16" rx="3" fill="#143844" />
            <text x="216" y="71" textAnchor="middle" fontFamily="Plus Jakarta Sans" fontSize="8" fontWeight="700" fill="#F5A93C">DROP</text>
          </g>
        </svg>
      </div>

      {/* Driver bar */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: 14,
        background: 'var(--paper-warm)',
        border: '1px solid var(--paper-edge)',
        borderRadius: 14,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 14,
          background: 'var(--teal)', color: 'var(--paper)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--display)', fontWeight: 800, fontSize: 16,
        }}>
          PK
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 13.5, color: 'var(--ink-1000)' }}>
            Pratik K.
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-700)', marginTop: 2 }}>
            MH-04 ▪️ 8421
          </div>
        </div>
        <button style={{
          appearance: 'none',
          border: '1.5px solid var(--teal)',
          background: 'transparent',
          color: 'var(--teal)',
          padding: '8px 12px',
          borderRadius: 10,
          fontFamily: 'var(--display)', fontWeight: 700, fontSize: 12,
          cursor: 'default', pointerEvents: 'none',
        }}>
          {tr(lang, { en: 'Call', hi: 'कॉल', mr: 'कॉल', gu: 'કૉલ' })}
        </button>
      </div>
    </div>
  );
}

/* ─── Screen 4: Receipt ────────────────────────────────────────── */
function ScreenReceipt({ lang }) {
  return (
    <div style={{ padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em', color: 'var(--teal)', textTransform: 'uppercase' }}>
          {tr(lang, { en: 'Trip complete', hi: 'सवारी पूर्ण', mr: 'प्रवास पूर्ण', gu: 'યાત્રા પૂર્ણ' })}
        </span>
        <MiniMark size={20} />
      </div>

      <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 19, color: 'var(--ink-1000)', letterSpacing: '-0.018em', lineHeight: 1.2 }}>
        {tr(lang, { en: 'Your receipt', hi: 'आपकी रसीद', mr: 'तुमची पावती', gu: 'તમારી રસીદ' })}
        <br />
        <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 500, color: 'var(--sun)' }}>
          {tr(lang, { en: 'same on both sides.', hi: 'दोनों तरफ़ वही।', mr: 'दोन्ही बाजूंना तीच.', gu: 'બંને બાજુએ એ જ.' })}
        </span>
      </div>

      {/* Receipt rows */}
      <div style={{
        padding: 16,
        background: '#FAF7F1',
        border: '1px dashed var(--ink-200)',
        borderRadius: 14,
        display: 'grid',
        gap: 12,
      }}>
        <ReceiptRow
          label={tr(lang, { en: 'Fare', hi: 'किराया', mr: 'भाडे', gu: 'ભાડું' })}
          value="₹100.00"
          bold
        />
        <hr style={{ border: 0, borderTop: '1px dashed var(--ink-200)', margin: 0 }} />
        <ReceiptRow
          dot="var(--sun)"
          label={tr(lang, { en: 'Karmik receives', hi: 'कर्मिक को', mr: 'कर्मिकाला', gu: 'કર્મિકને' })}
          value="₹89.50"
          accent
        />
        <ReceiptRow
          dot="var(--teal)"
          label={tr(lang, { en: 'Platform · 9%', hi: 'प्लेटफ़ॉर्म · 9%', mr: 'प्लॅटफॉर्म · 9%', gu: 'પ્લેટફોર્મ · 9%' })}
          value="₹9.00"
        />
        <ReceiptRow
          dot="var(--sun-light)"
          label={tr(lang, { en: 'Welfare pool · 1.5%', hi: 'कल्याण · 1.5%', mr: 'कल्याण · 1.5%', gu: 'કલ્યાણ · 1.5%' })}
          value="₹1.50"
        />
      </div>

      <p style={{
        fontSize: 10.5, lineHeight: 1.6, color: 'var(--ink-500)', margin: 0,
        fontFamily: 'var(--mono)', letterSpacing: '0.04em',
      }}>
        {tr(lang, {
          en: 'No hidden line items. The Karmik\'s app shows the same numbers.',
          hi: 'कोई छिपी हुई पंक्ति नहीं। कर्मिक का ऐप यही दिखाता है।',
          mr: 'कोणत्याही लपवलेल्या ओळी नाहीत. कर्मिकाचे अ‍ॅप तेच दाखवते.',
          gu: 'કોઈ છુપાયેલી લાઇન નથી. કર્મિકની એપ એ જ બતાવે છે.',
        })}
      </p>
    </div>
  );
}

const ReceiptRow = ({ dot, label, value, bold, accent }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      {dot && <span style={{ width: 8, height: 8, borderRadius: 999, background: dot }} />}
      <span style={{
        fontFamily: 'var(--display)',
        fontWeight: bold ? 800 : 600,
        fontSize: 13,
        color: 'var(--ink-1000)',
      }}>{label}</span>
    </div>
    <span style={{
      fontFamily: 'var(--display)',
      fontWeight: accent ? 800 : 700,
      fontSize: accent ? 16 : 13.5,
      color: accent ? 'var(--sun)' : 'var(--ink-1000)',
      fontVariantNumeric: 'tabular-nums',
    }}>{value}</span>
  </div>
);

Object.assign(window, { NagrikJourney });