/* global React, Eyebrow, Reveal, tr */
/* ─── STORY: WHY WORKER-FIRST ─────────────────────────────────── */

// SVG illustrations baked inline — small narrative diagrams, not decorative slop

const TrappedDiagram = () => (
  <svg viewBox="0 0 240 90" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    {/* worker stick */}
    <g fill="#E87B1E">
      <circle cx="40" cy="32" r="7" />
      <rect x="34" y="40" width="12" height="22" rx="2" />
      <rect x="36" y="62" width="3" height="10" rx="1" />
      <rect x="41" y="62" width="3" height="10" rx="1" />
    </g>
    {/* boxes representing platform layers compressing */}
    <g fill="none" stroke="#1F5266" strokeWidth="1.5" opacity="0.55">
      <rect x="68" y="20" width="42" height="50" rx="3" />
      <rect x="114" y="20" width="42" height="50" rx="3" />
      <rect x="160" y="20" width="42" height="50" rx="3" />
    </g>
    {/* arrows pointing inward */}
    <g stroke="#143844" strokeWidth="1.2" fill="none">
      <path d="M 60 45 L 66 45" markerEnd="url(#a1)" />
      <path d="M 204 45 L 210 45" />
    </g>
    {/* labels */}
    <text x="89" y="48" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="#1F5266" letterSpacing="0.08em">FEE</text>
    <text x="135" y="48" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="#1F5266" letterSpacing="0.08em">SURGE</text>
    <text x="181" y="48" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="#1F5266" letterSpacing="0.08em">PENALTY</text>
    {/* dashed ground */}
    <line x1="10" y1="78" x2="230" y2="78" stroke="#B6C0C5" strokeDasharray="2 3" />
  </svg>
);

const TransparentDiagram = () => (
  <svg viewBox="0 0 240 90" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    {/* single transparent line: full fare → worker */}
    <rect x="20" y="38" width="200" height="14" rx="3" fill="#F4EDDF" stroke="#E5D9BC" />
    <rect x="20" y="38" width="180" height="14" rx="3" fill="#E87B1E" />
    <rect x="200" y="38" width="18" height="14" fill="#1F5266" />
    {/* tiny welfare nick */}
    <rect x="195" y="38" width="5" height="14" fill="#F5A93C" />

    <text x="20" y="32" fontFamily="JetBrains Mono" fontSize="7" fill="#3F5560" letterSpacing="0.08em">FARE PAID</text>
    <text x="218" y="32" fontFamily="JetBrains Mono" fontSize="7" fill="#3F5560" letterSpacing="0.08em" textAnchor="end">PLATFORM + WELFARE</text>

    <text x="115" y="68" fontFamily="JetBrains Mono" fontSize="8" fill="#E87B1E" textAnchor="middle" fontWeight="700" letterSpacing="0.08em">89.5% → KARMIK</text>
  </svg>
);

const WelfareDiagram = () => (
  <svg viewBox="0 0 240 90" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    {/* drops of welfare collecting */}
    <g fill="#F5A93C">
      <circle cx="40" cy="22" r="4" />
      <circle cx="80" cy="22" r="4" />
      <circle cx="120" cy="22" r="4" />
      <circle cx="160" cy="22" r="4" />
      <circle cx="200" cy="22" r="4" />
    </g>
    {/* funnel lines */}
    <g stroke="#F5A93C" strokeWidth="1" fill="none" opacity="0.6">
      <line x1="40" y1="26" x2="120" y2="50" />
      <line x1="80" y1="26" x2="120" y2="50" />
      <line x1="120" y1="26" x2="120" y2="50" />
      <line x1="160" y1="26" x2="120" y2="50" />
      <line x1="200" y1="26" x2="120" y2="50" />
    </g>
    {/* welfare pool jar */}
    <g>
      <rect x="92" y="50" width="56" height="28" rx="4" fill="#1F5266" />
      <rect x="92" y="50" width="56" height="28" rx="4" fill="none" stroke="#143844" strokeWidth="1" />
      <text x="120" y="68" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fontWeight="700" fill="#F5A93C" letterSpacing="0.1em">WELFARE POOL</text>
    </g>
  </svg>
);

function Story({ lang }) {
  const cards = [
    {
      num: '01',
      title: tr(lang, {
        en: 'Today, the worker pays for the platform',
        hi: 'आज, कर्मिक मंच की क़ीमत चुकाता है',
        mr: 'आज, कर्मिक मंचाची किंमत भरतो',
        gu: 'આજે, કર્મિક પ્લેટફોર્મની કિંમત ચૂકવે છે',
      }),
      body: tr(lang, {
        en: 'Surge that the worker never sees. Convenience fees that vanish into the app. Penalties for declining rides. The cost of the system compounds onto the person at the bottom of it.',
        hi: 'सर्ज जो कर्मिक कभी नहीं देखता। सुविधा शुल्क जो ऐप में ग़ायब हो जाते हैं। सवारी मना करने पर दंड। व्यवस्था का बोझ नीचे खड़े इंसान पर पड़ता है।',
        mr: 'सर्ज जे कर्मिकाला कधीही दिसत नाही. सुविधा शुल्क जे अ‍ॅपमध्ये गायब होतात. प्रवास नाकारल्याबद्दल दंड. व्यवस्थेचा भार खाली असलेल्या व्यक्तीवर पडतो.',
        gu: 'સર્જ જે કર્મિક ક્યારેય જોતો નથી. સુવિધા ફી જે એપમાં ગાયબ થઈ જાય છે. સવારી નકારવા પર દંડ. વ્યવસ્થાનો ભાર નીચે ઊભી વ્યક્તિ પર પડે છે.',
      }),
      illus: <TrappedDiagram />,
    },
    {
      num: '02',
      title: tr(lang, {
        en: 'A receipt is a kind of trust',
        hi: 'एक रसीद एक तरह का भरोसा है',
        mr: 'एक पावती हा एक प्रकारचा विश्वास आहे',
        gu: 'એક રસીદ એક પ્રકારનો વિશ્વાસ છે',
      }),
      body: tr(lang, {
        en: 'On 1gigE, the receipt the Nagrik gets is the same receipt the Karmik gets. Same fare. Same fee. Same number reaching the driver. No hidden line items, on either side.',
        hi: '1gigE पर, नागरिक को मिलने वाली रसीद वही है जो कर्मिक को मिलती है। वही किराया। वही शुल्क। वही रक़म कर्मिक तक पहुँचती है। कोई छिपी हुई पंक्ति नहीं — किसी भी तरफ़ नहीं।',
        mr: '1gigE वर, नागरिकाला मिळणारी पावती तीच आहे जी कर्मिकाला मिळते. तेच भाडे. तेच शुल्क. तीच रक्कम चालकापर्यंत पोहोचते. कोणत्याही बाजूला लपवलेली ओळ नाही.',
        gu: '1gigE પર, નાગરિકને મળતી રસીદ એ જ છે જે કર્મિકને મળે છે. એ જ ભાડું. એ જ ફી. એ જ રકમ ડ્રાઇવર સુધી પહોંચે છે. કોઈ બાજુ છુપાયેલી લાઇન નહીં.',
      }),
      illus: <TransparentDiagram />,
    },
    {
      num: '03',
      title: tr(lang, {
        en: 'Welfare belongs to the worker',
        hi: 'कल्याण कर्मिक का है',
        mr: 'कल्याण कर्मिकाचे आहे',
        gu: 'કલ્યાણ કર્મિકનું છે',
      }),
      body: tr(lang, {
        en: '1.5% of every fare collects in a welfare pool — not a marketing line, a separate account once Pvt Ltd is incorporated. Portable. Tracked. Owned by the worker who earned it, not by us.',
        hi: 'हर किराये का 1.5% कल्याण कोष में जमा होता है — विज्ञापन का जुमला नहीं, प्राइवेट लिमिटेड बनते ही अलग खाता। पोर्टेबल। ट्रैक होने वाला। उस कर्मिक का जिसने इसे कमाया है, हमारा नहीं।',
        mr: 'प्रत्येक भाड्याचे 1.5% कल्याण निधीत जमा होते — जाहिरातीची ओळ नाही, प्रायव्हेट लिमिटेड स्थापनेनंतर वेगळे खाते. पोर्टेबल. ट्रॅक केले जाणारे. ज्या कर्मिकाने ते कमावले त्याचे, आमचे नाही.',
        gu: 'દરેક ભાડાનું 1.5% કલ્યાણ ફંડમાં જમા થાય છે — જાહેરાતની લાઇન નહીં, પ્રાઇવેટ લિમિટેડ રચાયા પછી અલગ ખાતું. પોર્ટેબલ. ટ્રેક થતું. જે કર્મિકે કમાવ્યું તેનું, અમારું નહીં.',
      }),
      illus: <WelfareDiagram />,
    },
  ];

  return (
    <section className="section" id="story">
      <div className="wrap">
        <Reveal>
          <Eyebrow>
            {tr(lang, {
              en: 'Why worker-first',
              hi: 'कर्मिक-प्रथम क्यों',
              mr: 'कर्मिक-प्रथम का',
              gu: 'કર્મિક-પ્રથમ શા માટે',
            })}
          </Eyebrow>
        </Reveal>

        <Reveal delay={1}>
          <h2 className="headline headline--lg" style={{ marginTop: 20, maxWidth: '17ch' }}>
            {tr(lang, {
              en: 'The work has',
              hi: 'काम बदला',
              mr: 'काम बदलले',
              gu: 'કામ બદલાયું',
            })}{' '}
            <span className="italic h-sun">
              {tr(lang, {
                en: 'changed.',
                hi: 'है।',
                mr: 'आहे.',
                gu: 'છે.',
              })}
            </span>
            <br />
            {tr(lang, {
              en: 'The economics',
              hi: 'अर्थव्यवस्था',
              mr: 'अर्थव्यवस्था',
              gu: 'અર્થશાસ્ત્ર',
            })}{' '}
            <span className="italic h-teal">
              {tr(lang, {
                en: 'have not.',
                hi: 'नहीं बदली।',
                mr: 'बदलली नाही.',
                gu: 'બદલાયું નથી.',
              })}
            </span>
          </h2>
        </Reveal>

        <Reveal delay={2}>
          <p className="lead" style={{ marginTop: 24 }}>
            {tr(lang, {
              en: 'India runs on people who move it — drivers, riders, fixers, helpers. Most of the platforms built around them quietly take more than they give. We are trying a different ground floor.',
              hi: 'भारत उन लोगों से चलता है जो इसे चलाते हैं — चालक, सवार, मरम्मतकर्ता, सहायक। उनके इर्द-गिर्द बने अधिकांश मंच जितना देते हैं उससे अधिक चुपचाप ले लेते हैं। हम एक अलग ज़मीनी मंज़िल आज़मा रहे हैं।',
              mr: 'भारत त्या लोकांवर चालतो जे ते चालवतात — चालक, स्वार, दुरुस्ती करणारे, मदतनीस. त्यांच्याभोवती बांधलेले बहुतेक मंच जितके देतात त्यापेक्षा जास्त गुपचूप घेतात. आम्ही एक वेगळी तळमजला प्रयत्न करत आहोत.',
              gu: 'ભારત એ લોકો પર ચાલે છે જે તેને ચલાવે છે — ડ્રાઇવર, સવાર, સમારકામ કરનાર, મદદગાર. તેમની આસપાસ બંધાયેલા મોટાભાગના પ્લેટફોર્મ આપે છે તેના કરતાં વધુ ચૂપચાપ લે છે. અમે એક અલગ ભોંયતળિયું પ્રયત્ન કરી રહ્યા છીએ.',
            })}
          </p>
        </Reveal>

        <div className="story-grid">
          {cards.map((c, i) => (
            <Reveal key={c.num} delay={i + 1}>
              <div className="story-card">
                <div className="story-card__num">{c.num}</div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                <div className="illus">{c.illus}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Story });
