/* global React, Eyebrow, Reveal, tr */
/* ─── KARMIK · OPENS AFTER PILOT ─────────────────────────────── */

// Inline icons — simple paper-feeling glyphs, hand-drawn weight
const IcHeart = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
  </svg>
);
const IcCoin = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9" />
    <path d="M9 9h5a2 2 0 0 1 0 4H9m0 0h5a2 2 0 0 1 0 4H9m0-8v8m3-8v8" />
  </svg>
);
const IcUsers = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="9" cy="8" r="3.2" />
    <path d="M3 20a6 6 0 0 1 12 0" />
    <circle cx="17" cy="9" r="2.6" />
    <path d="M15 20a5 5 0 0 1 7-4.6" />
  </svg>
);
const IcId = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="14" rx="2" />
    <circle cx="9" cy="11" r="2" />
    <path d="M7 16h4M14 10h4M14 13h4" />
  </svg>
);

function KarmikFuture({ lang }) {
  const items = [
    {
      icon: <IcHeart />,
      title: tr(lang, {
        en: 'Dignity, not gamification',
        hi: 'सम्मान, गेम नहीं',
        mr: 'सन्मान, गेम नाही',
        gu: 'સન્માન, ગેમ નહીં',
      }),
      body: tr(lang, {
        en: 'No streaks, no badges, no incentive traps. A Karmik can stop driving without penalty — the Code on Social Security 2020 affirms that right; we build it in.',
        hi: 'कोई स्ट्रीक नहीं, कोई बैज नहीं, कोई इंसेंटिव जाल नहीं। कर्मिक बिना दंड के काम बंद कर सकता है — सामाजिक सुरक्षा संहिता 2020 इस अधिकार की पुष्टि करती है; हम इसे प्रणाली में बनाते हैं।',
        mr: 'कोणतेही स्ट्रीक नाहीत, बॅज नाहीत, इन्सेंटिव्ह सापळे नाहीत. कर्मिक दंडाशिवाय काम थांबवू शकतो — सामाजिक सुरक्षा संहिता 2020 या हक्काची पुष्टी करते; आम्ही ते प्रणालीत बांधतो.',
        gu: 'કોઈ સ્ટ્રીક નહીં, કોઈ બેજ નહીં, કોઈ ઇન્સેન્ટિવ ટ્રેપ નહીં. કર્મિક દંડ વિના કામ બંધ કરી શકે છે — સામાજિક સુરક્ષા સંહિતા 2020 આ અધિકારની પુષ્ટિ કરે છે; અમે તેને સિસ્ટમમાં બાંધીએ છીએ.',
      }),
    },
    {
      icon: <IcCoin />,
      title: tr(lang, {
        en: 'Fair earning, printed',
        hi: 'उचित कमाई, छपी हुई',
        mr: 'योग्य कमाई, छापलेली',
        gu: 'વાજબી કમાણી, છપાયેલી',
      }),
      body: tr(lang, {
        en: 'The same ₹89.50 the Nagrik sees is the ₹89.50 the Karmik sees — fare, 9% platform, 1.5% welfare pool. No silent deductions.',
        hi: 'जो ₹89.50 नागरिक देखता है, वही ₹89.50 कर्मिक देखता है — किराया, 9% प्लेटफ़ॉर्म, 1.5% कल्याण कोष। कोई चुपचाप कटौती नहीं।',
        mr: 'जे ₹89.50 नागरिक पाहतो, तेच ₹89.50 कर्मिक पाहतो — भाडे, 9% प्लॅटफॉर्म, 1.5% कल्याण निधी. कोणतीही गुपचूप कपात नाही.',
        gu: 'જે ₹89.50 નાગરિક જુએ છે, એ જ ₹89.50 કર્મિક જુએ છે — ભાડું, 9% પ્લેટફોર્મ, 1.5% કલ્યાણ ફંડ. કોઈ ચૂપચાપ કપાત નહીં.',
      }),
    },
    {
      icon: <IcId />,
      title: tr(lang, {
        en: 'KYC in person, not by upload',
        hi: 'KYC व्यक्तिगत, अपलोड नहीं',
        mr: 'KYC प्रत्यक्ष, अपलोड नाही',
        gu: 'KYC રૂબરૂ, અપલોડ નહીં',
      }),
      body: tr(lang, {
        en: 'Aadhaar OKYC, PAN, and bank verification are designed but not yet open to the public. Pilot Karmiks are onboarded in person, in their own language, with paper backups.',
        hi: 'आधार OKYC, PAN, और बैंक सत्यापन डिज़ाइन किए गए हैं लेकिन अभी सार्वजनिक रूप से खुले नहीं हैं। पायलट कर्मिकों का व्यक्तिगत ऑनबोर्डिंग — उनकी अपनी भाषा में, काग़ज़ी बैकअप के साथ।',
        mr: 'आधार OKYC, PAN, आणि बँक पडताळणी डिझाइन केली आहेत पण अद्याप सार्वजनिक नाहीत. पायलट कर्मिकांचे वैयक्तिक ऑनबोर्डिंग — त्यांच्या भाषेत, कागदी बॅकअपसह.',
        gu: 'આધાર OKYC, PAN, અને બેંક ચકાસણી ડિઝાઇન કરાયા છે પણ હજુ જાહેરમાં ખુલ્યા નથી. પાયલટ કર્મિકોનું વ્યક્તિગત ઓનબોર્ડિંગ — તેમની ભાષામાં, કાગળના બેકઅપ સાથે.',
      }),
    },
    {
      icon: <IcUsers />,
      title: tr(lang, {
        en: 'Community stewardship — later',
        hi: 'सामुदायिक संचालन — बाद में',
        mr: 'सामुदायिक संचालन — नंतर',
        gu: 'સામુદાયિક સંચાલન — પછી',
      }),
      body: tr(lang, {
        en: 'A separate stewardship layer for disputes and policy will open after pilot. Not in v1. Not selectable as a role today. Mentioned here so you know it is coming.',
        hi: 'विवाद और नीति के लिए एक अलग संचालन परत पायलट के बाद खुलेगी। v1 में नहीं। आज भूमिका के रूप में चयन योग्य नहीं। यहाँ इसलिए दर्ज है ताकि आपको पता रहे।',
        mr: 'विवाद आणि धोरणासाठी एक स्वतंत्र संचालन स्तर पायलटनंतर उघडेल. v1 मध्ये नाही. आज भूमिका म्हणून निवडण्यायोग्य नाही. हे माहित असावे म्हणून इथे आहे.',
        gu: 'વિવાદ અને નીતિ માટે એક અલગ સંચાલન સ્તર પાયલટ પછી ખુલશે. v1 માં નહીં. આજે ભૂમિકા તરીકે પસંદ થઈ શકતી નથી. તમને ખબર પડે માટે અહીં છે.',
      }),
    },
  ];

  return (
    <section className="section section--tone" id="karmik">
      <div className="wrap">
        <div className="split-2">
          <Reveal>
            <div>
              <Eyebrow>
                {tr(lang, {
                  en: 'Coming later · Karmik',
                  hi: 'बाद में · कर्मिक',
                  mr: 'नंतर येणार · कर्मिक',
                  gu: 'પછી આવનાર · કર્મિક',
                })}
              </Eyebrow>
              <h2 className="headline headline--md" style={{ marginTop: 18, maxWidth: '14ch' }}>
                {tr(lang, {
                  en: 'The Karmik app',
                  hi: 'कर्मिक ऐप',
                  mr: 'कर्मिक अ‍ॅप',
                  gu: 'કર્મિક એપ',
                })}
                <br />
                <span className="italic h-teal">
                  {tr(lang, {
                    en: 'opens after the pilot.',
                    hi: 'पायलट के बाद खुलेगा।',
                    mr: 'पायलटनंतर उघडेल.',
                    gu: 'પાયલટ પછી ખુલશે.',
                  })}
                </span>
              </h2>
              <p className="lead" style={{ marginTop: 22 }}>
                {tr(lang, {
                  en: 'During the 10-day pilot, Karmiks are onboarded in person — not by app. The numbers below describe what the Karmik side will hold when it opens.',
                  hi: '10-दिवसीय पायलट के दौरान, कर्मिकों का व्यक्तिगत ऑनबोर्डिंग होता है — ऐप से नहीं। नीचे की संख्याएँ बताती हैं कि खुलने पर कर्मिक की तरफ़ क्या होगा।',
                  mr: '10-दिवसीय पायलटदरम्यान, कर्मिकांचे वैयक्तिक ऑनबोर्डिंग होते — अ‍ॅपद्वारे नाही. खाली दिलेले आकडे उघडल्यावर कर्मिकाच्या बाजूला काय असेल ते सांगतात.',
                  gu: '10-દિવસના પાયલટ દરમિયાન, કર્મિકોનું વ્યક્તિગત ઓનબોર્ડિંગ થાય છે — એપ દ્વારા નહીં. નીચેના આંકડા જણાવે છે કે ખુલે ત્યારે કર્મિક બાજુએ શું હશે.',
                })}
              </p>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="karmik-list">
              {items.map((it, i) => (
                <div className="karmik-row" key={i}>
                  <div className="ic">{it.icon}</div>
                  <div>
                    <h4>{it.title}</h4>
                    <p>{it.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { KarmikFuture });