/* Mobile · Soil Passport / financing */

function MobilePassport() {
  const { lang } = useGA();
  return (
    <MobileShell tab="passport">
      <MobileHeader
        kicker="§ SP-K3-2026 · VERIFIED"
        en={I18N.en.soilPassport}
        ka={I18N.ka.soilPassport}
        ru={I18N.ru.soilPassport}
        right={
          <Pill color="green" size="sm"><LiveDot size={5} /> SIGNED</Pill>
        }
      />

      <div style={{ padding: '14px 18px 24px' }}>
        {/* Passport card */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(140deg, #1F1810 0%, #0F0D08 100%)',
          border: '1px solid rgba(255,214,10,0.45)',
          borderRadius: 14, padding: 20,
          boxShadow: '0 20px 50px rgba(0,0,0,0.5)',
        }}>
          {/* hologram texture */}
          <div style={{ position: 'absolute', top: -30, right: -30, width: 200, height: 200,
            background: 'conic-gradient(from 0deg, rgba(255,214,10,0.18), transparent 50%, rgba(255,165,0,0.18), transparent)',
            opacity: 0.5, borderRadius: '50%', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div className="ga-kicker" style={{ color: 'var(--yellow)' }}>VERIFIED · SP-K3-2026</div>
                <div className="ga-disp" style={{ fontSize: 22, fontWeight: 600, marginTop: 6,
                  letterSpacing: '-0.02em' }}>Saperavi · K-3</div>
                <div className="ga-mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 3 }}>
                  KAKHETI · 41.95°N 45.81°E · 4.8 ha
                </div>
              </div>
              <BrandMark size={30} />
            </div>

            <div style={{ marginTop: 18,
              paddingTop: 14, borderTop: '1px dashed rgba(255,214,10,0.3)',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <PassStat k="Default Risk · 12mo" v="4.6%" sub="↓ 38% vs avg" big />
              <PassStat k="Indicative Rate" v="8.2%" sub="−4.2 pp" big />
              <PassStat k="Compliance Score" v="98 / 100" sub="3 events · 0 missed" />
              <PassStat k="Dynamic Collateral" v="₾148,000" sub="harvest q3·2026" />
            </div>

            <div style={{ marginTop: 18, paddingTop: 14,
              borderTop: '1px dashed rgba(255,214,10,0.3)' }}>
              <div className="ga-kicker">Underwritten by</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {['BANK OF GEORGIA', 'TBC AGRI', 'AXA · CEE'].map((b) => (
                  <span key={b} style={{
                    fontFamily: 'var(--f-mono)', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.1em',
                    padding: '4px 8px',
                    background: 'rgba(255,255,255,0.04)',
                    border: '1px solid var(--line-2)',
                    borderRadius: 3,
                  }}>{b}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Financing offers */}
        <div className="ga-kicker" style={{ margin: '22px 4px 10px' }}>Pre-Approved Offers · 3</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { bank: 'Bank of Georgia · AgriCash', amt: '₾60k', rate: '8.2%', term: '12 mo', tag: 'BEST RATE' },
            { bank: 'TBC Agri · Harvest Line',    amt: '₾90k', rate: '8.9%', term: '18 mo' },
            { bank: 'Cartu Group · Seasonal',     amt: '₾40k', rate: '9.4%', term: '6 mo' },
          ].map((o, i) => (
            <div key={i} style={{
              background: i === 0 ? 'linear-gradient(180deg, rgba(255,214,10,0.05), var(--bg-2))' : 'var(--bg-2)',
              border: `1px solid ${i === 0 ? 'rgba(255,214,10,0.4)' : 'var(--line-2)'}`,
              borderRadius: 10, padding: '14px 16px',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div className="ga-disp" style={{ fontSize: 14, fontWeight: 600 }}>{o.bank}</div>
                  <div style={{ marginTop: 3, fontFamily: 'var(--f-mono)', fontSize: 10.5, color: 'var(--ink-3)' }}>
                    {o.term} · harvest-backed · auto-disburse
                  </div>
                </div>
                {o.tag && <Pill color="yellow" size="sm" solid>{o.tag}</Pill>}
              </div>
              <div style={{ marginTop: 12, paddingTop: 12, borderTop: '0.5px solid var(--line)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div style={{ display: 'flex', gap: 18 }}>
                  <div>
                    <div className="ga-kicker" style={{ fontSize: 8.5 }}>UP TO</div>
                    <div className="ga-mono" style={{ fontSize: 18, fontWeight: 600 }}>{o.amt}</div>
                  </div>
                  <div>
                    <div className="ga-kicker" style={{ fontSize: 8.5 }}>RATE</div>
                    <div className="ga-mono" style={{ fontSize: 18, fontWeight: 600, color: i === 0 ? 'var(--yellow)' : 'var(--ink)' }}>{o.rate}</div>
                  </div>
                </div>
                <GhostButton color={i === 0 ? 'yellow' : 'ghost'} solid={i === 0} size="sm">Apply →</GhostButton>
              </div>
            </div>
          ))}
        </div>

        {/* Signed ledger */}
        <div className="ga-kicker" style={{ margin: '22px 4px 10px',
          display: 'flex', justifyContent: 'space-between' }}>
          <span>Signed Ledger · Last 30 days</span>
          <span style={{ color: 'var(--ink-2)' }}>view all 47</span>
        </div>

        <Panel pad={0}>
          {[
            { d: '23 MAR', t: 'Frost shield · zone B', vol: '4.2 mm', sig: '9C32A1', ok: true },
            { d: '15 MAR', t: 'Irrigate · zone D',     vol: '8.6 mm', sig: 'B14F03', ok: true },
            { d: '12 MAR', t: 'Fertilize · zone A',    vol: '12 kg',  sig: '4D8829', ok: true },
            { d: '08 MAR', t: 'Pruning · audit · zone C', vol: '—',   sig: 'C19E51', ok: true },
            { d: '03 MAR', t: 'Soil sample · K3',      vol: '6 cores', sig: '7A12FE', ok: true },
          ].map((r, i, arr) => (
            <div key={i} style={{
              padding: '12px 16px',
              borderBottom: i < arr.length - 1 ? '0.5px solid var(--line)' : 'none',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span className="ga-mono" style={{ width: 50, fontSize: 10, color: 'var(--ink-3)' }}>{r.d}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{r.t}</div>
                <div className="ga-mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{r.vol}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span className="ga-mono" style={{ fontSize: 10.5, color: 'var(--green)' }}>·#{r.sig}</span>
                <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6" stroke="var(--green)" strokeWidth="1.2" fill="none"/><path d="M4 7.5l2 2 4-4.5" stroke="var(--green)" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          ))}
        </Panel>

        <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
          <GhostButton color="ghost" size="md" style={{ flex: 1 }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1v8m0 0L3 6m3 3l3-3M2 11h8" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Export PDF
          </GhostButton>
          <GhostButton color="yellow" solid size="md" style={{ flex: 1 }}>
            Share with bank →
          </GhostButton>
        </div>
      </div>
    </MobileShell>
  );
}

function PassStat({ k, v, sub, big }) {
  return (
    <div>
      <div className="ga-kicker" style={{ fontSize: 9 }}>{k}</div>
      <div className="ga-mono ga-tnum" style={{ fontSize: big ? 24 : 18, fontWeight: 600,
        color: 'var(--yellow)', marginTop: 4, letterSpacing: '-0.02em' }}>{v}</div>
      <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { MobilePassport });