/* global React, Eyebrow, Reveal, tr */
/* ─── TRANSPARENCY (₹100 breakdown) ───────────────────────────── */

function Transparency({ lang }) {
  return (
    <section className="section section--tone" id="transparency">
      <div className="wrap">
        <Reveal>
          <Eyebrow>
            {tr(lang, {
              en: 'Illustrative · economic model',
              hi: 'उदाहरण · आर्थिक मॉडल',
              mr: 'उदाहरण · आर्थिक मॉडेल',
              gu: 'ઉદાહરણ · આર્થિક મોડેલ',
            })}
          </Eyebrow>
        </Reveal>

        <Reveal delay={1}>
          <h2 className="headline headline--lg" style={{ marginTop: 18, maxWidth: '17ch' }}>
            {tr(lang, {
              en: 'A ₹100 fare,',
              hi: '₹100 का किराया,',
              mr: '₹100 चे भाडे,',
              gu: '₹100 નું ભાડું,',
            })}{' '}
            <span className="italic h-sun">
              {tr(lang, {
                en: 'printed where everyone can see it.',
                hi: 'सबके सामने छपा हुआ।',
                mr: 'सर्वांसमोर छापलेले.',
                gu: 'બધાની સામે છપાયેલું.',
              })}
            </span>
          </h2>
        </Reveal>

        <div className="fare-grid">
          <Reveal>
            <div className="fare-card">
              <div className="label">
                {tr(lang, {
                  en: 'Nagrik pays',
                  hi: 'नागरिक भुगतान',
                  mr: 'नागरिक भरतो',
                  gu: 'નાગરિક ચૂકવે',
                })}
              </div>
              <div className="fare-amount" style={{ marginTop: 12 }}>
                ₹100<span className="decimals">.00</span>
              </div>

              <div className="fare-bar" aria-hidden="true">
                <span style={{ width: '89.5%' }} />
                <span style={{ width: '9%' }} />
                <span style={{ width: '1.5%' }} />
              </div>

              <div style={{ marginTop: 18 }}>
                <div className="fare-row lead">
                  <div className="left">
                    <span className="dot" style={{ background: 'var(--sun)' }} />
                    <span className="label-name lead">
                      {tr(lang, {
                        en: 'Karmik receives',
                        hi: 'कर्मिक को मिलता है',
                        mr: 'कर्मिकाला मिळते',
                        gu: 'કર્મિકને મળે છે',
                      })}
                    </span>
                  </div>
                  <div className="right">
                    <span className="pct">89.5%</span>
                    <span className="amt">₹89.50</span>
                  </div>
                </div>
                <div className="fare-row">
                  <div className="left">
                    <span className="dot" style={{ background: 'var(--teal)' }} />
                    <span className="label-name">
                      {tr(lang, {
                        en: 'Platform fee',
                        hi: 'प्लेटफ़ॉर्म शुल्क',
                        mr: 'प्लॅटफॉर्म शुल्क',
                        gu: 'પ્લેટફોર્મ ફી',
                      })}
                    </span>
                  </div>
                  <div className="right">
                    <span className="pct">9.0%</span>
                    <span className="amt">₹9.00</span>
                  </div>
                </div>
                <div className="fare-row">
                  <div className="left">
                    <span className="dot" style={{ background: 'var(--sun-light)' }} />
                    <span className="label-name">
                      {tr(lang, {
                        en: 'Welfare pool',
                        hi: 'कल्याण कोष',
                        mr: 'कल्याण निधी',
                        gu: 'કલ્યાણ ફંડ',
                      })}
                    </span>
                  </div>
                  <div className="right">
                    <span className="pct">1.5%</span>
                    <span className="amt">₹1.50</span>
                  </div>
                </div>
              </div>

              <p style={{
                marginTop: 22, paddingTop: 18,
                borderTop: '1px solid var(--ink-100)',
                fontSize: 12.5,
                color: 'var(--ink-500)',
                lineHeight: 1.65,
                margin: 0,
                paddingBottom: 0,
              }}>
                {tr(lang, {
                  en: 'Welfare pool transfers to a segregated bank account once Pvt Ltd incorporation completes. The worker owns the benefit — not us.',
                  hi: 'प्राइवेट लिमिटेड बनने पर कल्याण कोष अलग बैंक खाते में जाता है। लाभ कर्मिक का है — हमारा नहीं।',
                  mr: 'प्रायव्हेट लिमिटेड स्थापनेनंतर कल्याण निधी वेगळ्या बँक खात्यात जाते. लाभ कर्मिकाचा आहे — आमचा नाही.',
                  gu: 'પ્રાઇવેટ લિમિટેડ રચાયા પછી કલ્યાણ ફંડ અલગ બેંક ખાતામાં જાય છે. લાભ કર્મિકનો છે — અમારો નહીં.',
                })}
              </p>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="fare-aside">
              <div style={{ position: 'relative', zIndex: 1 }}>
                <div className="eyebrow on-dark" style={{ background: 'rgba(255,255,255,0.08)' }}>
                  <span className="dot" />
                  {tr(lang, {
                    en: 'What this means',
                    hi: 'इसका मतलब',
                    mr: 'याचा अर्थ',
                    gu: 'આનો અર્થ',
                  })}
                </div>
                <h3 style={{
                  marginTop: 22,
                  fontFamily: 'var(--display)',
                  fontWeight: 800,
                  fontSize: 'clamp(26px, 2.8vw, 34px)',
                  letterSpacing: '-0.022em',
                  lineHeight: 1.15,
                  color: 'var(--paper)',
                }}>
                  {tr(lang, {
                    en: 'No hidden take.',
                    hi: 'कोई छिपा शुल्क नहीं।',
                    mr: 'कोणतेही लपवलेले शुल्क नाही.',
                    gu: 'કોઈ છુપાયેલ ફી નહીં.',
                  })}
                  <br />
                  <span style={{
                    fontFamily: 'var(--serif)',
                    fontStyle: 'italic',
                    fontWeight: 500,
                    color: 'var(--sun-light)',
                  }}>
                    {tr(lang, {
                      en: 'Same numbers, both sides.',
                      hi: 'एक ही संख्या, दोनों तरफ़।',
                      mr: 'एकच आकडे, दोन्ही बाजूंना.',
                      gu: 'એ જ આંકડા, બંને બાજુએ.',
                    })}
                  </span>
                </h3>
                <p style={{
                  marginTop: 16,
                  fontSize: 14,
                  lineHeight: 1.7,
                  color: 'rgba(250,247,241,0.86)',
                  margin: '16px 0 0',
                }}>
                  {tr(lang, {
                    en: 'No surge that the worker never sees. No "convenience fee" hidden in another tab. The receipt is the entire economic model — printed on every fare, in both apps, in every language.',
                    hi: 'कोई सर्ज नहीं जो कर्मिक न देखे। कोई "सुविधा शुल्क" किसी और टैब में छिपा हुआ नहीं। रसीद ही पूरा आर्थिक मॉडल है — हर किराये पर, दोनों ऐप में, हर भाषा में छपा हुआ।',
                    mr: 'कर्मिकाला दिसत नाही असा कोणताही सर्ज नाही. दुसऱ्या टॅबमध्ये लपवलेले "सुविधा शुल्क" नाही. पावती हाच संपूर्ण आर्थिक मॉडेल आहे — प्रत्येक भाड्यावर, दोन्ही अ‍ॅपमध्ये, प्रत्येक भाषेत छापलेले.',
                    gu: 'કર્મિક ન જુએ એવો કોઈ સર્જ નહીં. બીજા ટેબમાં છુપાયેલી "સુવિધા ફી" નહીં. રસીદ એ જ સંપૂર્ણ આર્થિક મોડેલ છે — દરેક ભાડા પર, બંને એપમાં, દરેક ભાષામાં છપાય છે.',
                  })}
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Transparency });