// Field app — this week's price + collection
const { Seal, Badge, Button, DataList, Card, Icon } = window.FF;

function PricesScreen() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <header className="ff-on-ink" style={{ background: 'var(--ff-ink)', padding: '18px 20px 22px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <Seal size={36} colour="paper" assetBase="../../" style={{ padding: 0 }} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ font: 'var(--type-title-3)', color: 'var(--ff-paper)' }}>Sok Chan</span>
          <span style={{ fontFamily: 'var(--ff-font-khmer)', fontSize: 13, lineHeight: 1.7, color: 'rgba(247,242,232,0.66)' }}>ឃុំឈូក · ក្រុមទី ៤</span>
        </div>
        <span style={{ marginLeft: 'auto', font: 'var(--type-mono)', fontSize: 11, color: 'rgba(247,242,232,0.5)' }}>ID 0247</span>
      </header>

      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Card padding="md" tone="accent">
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ff-pepper)' }}>This week · black pepper</span>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, margin: '10px 0 2px' }}>
            <span style={{ font: 'var(--type-mono)', fontSize: 34, fontWeight: 500, color: 'var(--text-strong)', fontVariantNumeric: 'tabular-nums' }}>34 000</span>
            <span style={{ font: 'var(--type-title-3)', color: 'var(--text-muted)' }}>៛/kg</span>
          </div>
          <span style={{ fontFamily: 'var(--ff-font-khmer)', fontSize: 14, lineHeight: 1.8, color: 'var(--text-muted)' }}>តម្លៃប្រចាំសប្តាហ៍ · អនុវត្តដល់ ០៩ សីហា</span>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <Badge tone="organic" icon="badge-check" size="sm">Organic</Badge>
            <Badge tone="fair" size="sm">Fair for Life premium</Badge>
          </div>
        </Card>

        <Card padding="md">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <Icon name="calendar" size={18} style={{ color: 'var(--ff-sea)' }} />
            <span style={{ font: 'var(--type-title-3)', fontSize: 16, color: 'var(--text-strong)' }}>Collection Thursday, 07:00</span>
          </div>
          <span style={{ display: 'block', fontFamily: 'var(--ff-font-khmer)', fontSize: 14, lineHeight: 1.8, color: 'var(--text-muted)', marginBottom: 14 }}>ការប្រមូលផល ថ្ងៃព្រហស្បតិ៍ ម៉ោង ៧ ព្រឹក នៅឃ្លាំងឃុំ</span>
          <DataList
            dense
            items={[
              { label: 'Place', value: 'Chhouk commune store' },
              { label: 'Bring', value: 'Sacks, farm card' },
              { label: 'Last delivery', value: '2026-07-30 · 214 kg', mono: true },
            ]}
          />
          <Button full size="lg" style={{ marginTop: 16 }} iconAfter="chevron-right">Confirm my delivery</Button>
        </Card>

        <Card padding="md" tone="sunken">
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Premium balance 2026</span>
          <DataList
            dense
            items={[
              { label: 'Paid to date', value: '$168', mono: true },
              { label: 'Community fund vote', value: 'Water storage', mono: false },
              { label: 'Training days', value: '3', mono: true },
            ]}
            style={{ marginTop: 10 }}
          />
        </Card>
      </div>
    </div>
  );
}
window.PricesScreen = PricesScreen;