const { Button, Badge, Card, CardContent, CardHeader, CardTitle, CardDescription, Icon, Alert } = window.BeyonddoDesignSystem_2c6c3a;

const SECTION_ICONS = ['compass', 'shield-check', 'landmark', 'sparkles', 'lock', 'server', 'flag', 'globe'];
const STATUS_CODES = ['UNVERIFIED', 'PENDING', 'VERIFIED', 'REJECTED', 'SUSPENDED'];
const STATUS_TONES = ['neutral', 'external', 'verified', 'danger', 'danger'];

function TrustScreen({ t }) {
  const tt = t.trust;
  return (
    <main>
      <section style={{ background: 'var(--wash-hero)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <Eyebrow>{tt.eyebrow}</Eyebrow>
          <h1 style={{ fontSize: 'var(--text-display)', letterSpacing: 'var(--tracking-display)', fontWeight: 800, maxWidth: '30ch' }}>{tt.title}</h1>
          <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-body)', maxWidth: '62ch', lineHeight: 'var(--leading-relaxed)' }}>
            {tt.sub}
          </p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)' }}>
        {tt.sections.map(([title, body], si) => (
          <Card key={title} tone="flat">
            <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <Icon name={SECTION_ICONS[si]} size={22} style={{ color: 'var(--rose-700)' }} />
              <h2 style={{ fontSize: 'var(--text-h4)' }}>{title}</h2>
              <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)' }}>{body}</p>
            </CardContent>
          </Card>
        ))}
      </section>

      <section style={{ background: 'var(--background-alt)', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-12)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <h2 style={{ fontSize: 'var(--text-h1)' }}>{tt.statusTitle}</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {tt.statusLabels.map((label, si) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)', padding: 'var(--space-3) 0', borderBottom: '1px solid var(--border-subtle)' }}>
                  <span className="bd-numeric" style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{STATUS_CODES[si]}</span>
                  <span style={{ flex: 1, fontSize: 'var(--text-body)', color: 'var(--text-heading)' }}>{label}</span>
                  <Badge tone={STATUS_TONES[si]}>{label}</Badge>
                </div>
              ))}
            </div>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{tt.statusNote}</span>
          </div>
          <Card>
            <CardHeader>
              <CardTitle as="h2">{tt.reportTitle}</CardTitle>
              <CardDescription>{tt.reportDesc}</CardDescription>
            </CardHeader>
            <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
                {tt.reasons.map((r) => (
                  <Badge key={r} tone="neutral">{r}</Badge>
                ))}
              </div>
              <Alert tone="warning" title={tt.payTitle}>{tt.payBody}</Alert>
              <Button variant="outline" iconLeft={<Icon name="flag" size={16} />}>{tt.reportCta}</Button>
            </CardContent>
          </Card>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { TrustScreen });