// Sawtna · Website Components
// AI Assistant for Crisis Response · Future Stars Centre, North Darfur

const WC = {
  fieldGreen:     '#3F5424',
  fieldGreenDeep: '#2D3D19',
  sage:           '#5A6A40',
  cream:          '#F1ECDB',
  creamWarm:      '#E8E2CD',
  gold:           '#C9B583',
  goldDeep:       '#A8945F',
  ink:            '#1A1A1A',
  inkSoft:        '#4A4A45',
  night:          '#14180F',
  signalUrgent:   '#B5331F',
  signalHigh:     '#D68F2A',
  signalNormal:   '#5A7A2E',
  creamSoft:      'rgba(241,236,219,0.85)',
  creamDim:       'rgba(241,236,219,0.65)',
};

const WF = {
  serif:   '"Source Serif 4", Georgia, serif',
  sans:    'Inter, system-ui, sans-serif',
  ar:      '"IBM Plex Sans Arabic", system-ui, sans-serif',
  arSerif: 'Amiri, serif',
  mono:    '"JetBrains Mono", monospace',
};

const LOGO = {
  horizontal:     '/sawtna-design-system/logos/sawtna-lockup-horizontal.svg',
  horizontalDark: '/sawtna-design-system/logos/sawtna-lockup-horizontal-on-dark.svg',
  stacked:        '/sawtna-design-system/logos/sawtna-lockup-stacked.svg',
  mark:           '/sawtna-design-system/logos/sawtna-mark.svg',
  markDark:       '/sawtna-design-system/logos/sawtna-mark-on-dark.svg',
  favicon:        '/sawtna-design-system/logos/sawtna-favicon.svg',
};

// ─── Error boundary ──────────────────────────────────────────────────────────

class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(e) { return { error: e }; }
  render() {
    if (this.state.error) {
      return (
        <div style={{ maxWidth: 720, margin: '80px auto', padding: '0 32px', fontFamily: WF.sans }}>
          <p style={{ color: WC.inkSoft }}>Something went wrong loading this page. Please refresh to try again.</p>
        </div>
      );
    }
    return this.props.children;
  }
}

// ─── Page wrappers ────────────────────────────────────────────────────────────

function HomePage()       { return <Hero />; }
function ContextPage()    { return <><ContextHeroSection /><InformationalChaosSection /><TheProblemSection /></>; }
function ProductPage()    { return <><IntroducingAACRSection /><FiveAgentsSection /><OfflineArchitectureSection /></>; }
function TeamPage()       { return <TeamSection />; }
function DonorsPage()     { return <DonorSection />; }
function OpenSourcePage() { return <OpenSourceSection />; }

// ─── Header ──────────────────────────────────────────────────────────────────

function SiteHeader({ active = 'home', onNav }) {
  const items = [
    ['home',    'Home'],
    ['context', 'Context'],
    ['product', 'Product'],
    ['team',    'Team'],
    ['donors',  'Pilot'],
    ['open',    'Open source'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: WC.cream,
      borderBottom: `1px solid ${WC.creamWarm}`,
    }}>
      <div style={{
        maxWidth: 1120, margin: '0 auto', padding: '0 32px',
        height: 64, display: 'flex', alignItems: 'center', gap: 24,
      }}>
        <a href="#home" onClick={e => { e.preventDefault(); onNav && onNav('home'); }}
           style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', flexShrink: 0 }}>
          <img src={LOGO.horizontal} alt="Sawtna · AI Assistant for Crisis Response" style={{ height: 34 }} />
        </a>
        <nav style={{ display: 'flex', gap: 20, marginLeft: 'auto', alignItems: 'center' }}>
          {items.map(([id, label]) => (
            <a key={id} href={`#${id}`}
               aria-current={active === id ? 'page' : undefined}
               onClick={e => { e.preventDefault(); onNav && onNav(id); }}
               style={{
                 fontFamily: WF.sans, fontSize: 13.5, fontWeight: 500,
                 color: active === id ? WC.fieldGreen : WC.inkSoft,
                 textDecoration: 'none',
                 borderBottom: active === id ? `2px solid ${WC.gold}` : '2px solid transparent',
                 paddingBottom: 3,
               }}
               onMouseEnter={e => e.currentTarget.style.color = WC.fieldGreen}
               onMouseLeave={e => e.currentTarget.style.color = active === id ? WC.fieldGreen : WC.inkSoft}
            >{label}</a>
          ))}
        </nav>
        <button
          onClick={() => onNav && onNav('donors')}
          style={{
            flexShrink: 0, fontFamily: WF.sans, fontSize: 13, fontWeight: 600,
            background: WC.fieldGreen, color: WC.cream,
            padding: '8px 18px', borderRadius: 8, border: 0, cursor: 'pointer',
          }}
          onMouseEnter={e => e.currentTarget.style.background = WC.fieldGreenDeep}
          onMouseLeave={e => e.currentTarget.style.background = WC.fieldGreen}
        >Support the pilot</button>
      </div>
    </header>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section id="home" style={{
      background: WC.fieldGreen, color: WC.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', left: 0, top: 0, height: 6, width: '35%', background: WC.gold }} />
      <div style={{
        maxWidth: 1120, margin: '0 auto', padding: '96px 32px 88px',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: WF.sans, fontSize: 11.5, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: WC.gold, marginBottom: 20,
          }}>AI Assistant for Crisis Response · Future Stars Centre</div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', marginBottom: 22 }}>
            <h1 style={{
              fontFamily: WF.serif, fontWeight: 700,
              fontSize: 'clamp(2.25rem, 5.5vw, 4.5rem)',
              lineHeight: 1.05, letterSpacing: '-0.01em',
              color: WC.cream, margin: 0, flexShrink: 0,
            }}>Heard.<br />Sorted.<br />Acted on.</h1>
            <div style={{ width: 1, background: 'rgba(201,181,131,0.3)', alignSelf: 'stretch', flexShrink: 0 }} />
            <div lang="ar" dir="rtl" style={{
              fontFamily: WF.arSerif, fontWeight: 700,
              fontSize: 'clamp(2rem, 4.8vw, 4rem)',
              lineHeight: 1.35, color: WC.gold,
              textAlign: 'right',
              whiteSpace: 'nowrap', margin: 0,
            }}>
              مسموع.<br />مفروز.<br />متصرَّف فيه.
            </div>
          </div>
          <p style={{
            fontFamily: WF.sans, fontSize: 17, lineHeight: 1.6,
            color: WC.creamSoft, maxWidth: 520, margin: '0 0 30px',
          }}>
            Sawtna runs offline on the Android phones used by Emergency Response Room
            volunteers in Sudan. It transcribes voice messages in Sudanese Arabic, ranks
            them by urgency, and drafts the daily SitRep — without internet, on a Tecno Spark.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button style={{
              fontFamily: WF.sans, fontSize: 14, fontWeight: 600,
              background: WC.gold, color: WC.fieldGreenDeep,
              border: 0, padding: '12px 22px', borderRadius: 8, cursor: 'pointer',
            }}
            onClick={() => { window.location.hash = 'donors'; }}
            onMouseEnter={e => e.currentTarget.style.background = WC.goldDeep}
            onMouseLeave={e => e.currentTarget.style.background = WC.gold}
            >Read the pilot brief</button>
            <button style={{
              fontFamily: WF.sans, fontSize: 14, fontWeight: 600,
              background: 'transparent', color: WC.cream,
              border: `1px solid ${WC.creamSoft}`,
              padding: '12px 22px', borderRadius: 8, cursor: 'pointer',
            }}
            onClick={() => { window.location.hash = 'product'; }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(241,236,219,0.1)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >How it works</button>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <img src={LOGO.markDark} alt="" style={{ width: 'min(300px, 100%)', height: 'auto' }} />
        </div>
      </div>
    </section>
  );
}

// ─── Context page: Section 1 — video ─────────────────────────────────────────

function ContextHeroSection() {
  const stats = [
    { value: '12.6M', label: 'internally displaced',           source: 'UNHCR, Feb 2025' },
    { value: '26M',   label: 'facing acute food insecurity',   source: 'IPC, 2024'        },
    { value: '3.7M',  label: 'children acutely malnourished',  source: 'UNICEF, 2024'     },
    { value: '70%',   label: 'health facilities non-functional', source: 'WHO, 2024'       },
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(1.875rem, 3.6vw, 3rem)',
          lineHeight: 1.15, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 16px', maxWidth: 720,
        }}>The context for first responders: Drowning in informational chaos.</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 17, lineHeight: 1.65,
          color: WC.inkSoft, maxWidth: 720, margin: '0 0 36px',
        }}>
          Since April 2023, the conflict between the Sudanese Armed Forces and the Rapid
          Support Forces has created the world's largest displacement crisis. Understanding
          the scale is the first step to understanding why Sawtna exists.
        </p>

        <div style={{
          position: 'relative', borderRadius: 12, overflow: 'hidden',
          boxShadow: '0 4px 8px rgba(20,24,15,.06), 0 24px 48px rgba(20,24,15,.10)',
        }}>
          <div style={{ position: 'relative', paddingBottom: '56.25%' }}>
            <iframe
              src="https://www.youtube.com/embed/k1THI8AWGUk?rel=0&modestbranding=1"
              style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              sandbox="allow-scripts allow-same-origin allow-presentation allow-fullscreen"
              title="UNHCR's Omer El Naiem explains what is happening in his home country, Sudan"
            />
          </div>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            background: 'rgba(20,24,15,0.90)',
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            pointerEvents: 'none',
          }}>
            {stats.map((s, i) => (
              <div key={s.label} style={{
                padding: '14px 22px',
                borderLeft: i > 0 ? `1px solid rgba(201,181,131,0.2)` : 'none',
              }}>
                <div style={{ fontFamily: WF.serif, fontWeight: 700, fontSize: 26, color: WC.gold, lineHeight: 1.1 }}>{s.value}</div>
                <div style={{ fontFamily: WF.sans, fontSize: 11, fontWeight: 600, color: WC.cream, marginTop: 3, lineHeight: 1.3 }}>{s.label}</div>
                <div style={{ fontFamily: WF.sans, fontSize: 10, color: 'rgba(241,236,219,0.45)', marginTop: 2 }}>{s.source}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ fontFamily: WF.sans, fontSize: 12, color: WC.inkSoft, marginTop: 10, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          <span>Video: UNHCR, the UN Refugee Agency · <em>Omer El Naiem on Sudan</em> · CC BY · youtube.com/@UNHCR</span>
          <span style={{ margin: '0 4px' }}>·</span>
          <span>Statistics: UNHCR (Feb 2025) · IPC (2024) · UNICEF (2024) · WHO (2024)</span>
        </div>

        <div style={{
          background: '#ffffff', border: `1px solid ${WC.creamWarm}`,
          borderLeft: `4px solid ${WC.gold}`,
          borderRadius: 8, padding: '22px 28px', marginTop: 32,
          boxShadow: '0 1px 2px rgba(20,24,15,.06), 0 4px 16px rgba(20,24,15,.04)',
        }}>
          <p style={{ fontFamily: WF.serif, fontSize: 21, fontStyle: 'italic', lineHeight: 1.5, color: WC.ink, margin: '0 0 12px' }}>
            "This is a forgotten crisis of extraordinary scale. The people of Sudan need
            the world to pay attention — and to act."
          </p>
          <cite style={{ fontFamily: WF.sans, fontSize: 13, color: WC.inkSoft, fontStyle: 'normal' }}>
            OCHA Sudan Humanitarian Needs Overview, 2024
          </cite>
        </div>
      </div>
    </section>
  );
}

// ─── Context page: Section 2 — informational chaos ───────────────────────────

function Waveform() {
  const heights = [38, 62, 78, 52, 88, 68, 42, 82, 58, 72, 48, 34, 76, 55, 90, 44, 66];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 2.5, height: 28, flex: 1 }}>
      {heights.map((h, i) => (
        <div key={i} style={{
          width: 3, height: `${h}%`,
          background: WC.signalNormal,
          borderRadius: 2, flexShrink: 0,
        }} />
      ))}
    </div>
  );
}

function VoiceRow({ app, time, duration, last }) {
  const appColors = { WA: '#25D366', TG: '#229ED9' };
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px',
      borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.05)',
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%',
        background: appColors[app] || '#666',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: WF.sans, fontSize: 9, fontWeight: 700,
        color: '#fff', flexShrink: 0,
      }}>{app}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <Waveform />
          <span style={{ fontFamily: WF.mono, fontSize: 10, color: 'rgba(241,236,219,0.38)', flexShrink: 0 }}>{time}</span>
        </div>
        <div style={{ fontFamily: WF.mono, fontSize: 10, color: 'rgba(241,236,219,0.5)' }}>▶ {duration}</div>
      </div>
    </div>
  );
}

function PhoneMockup() {
  const messages = [
    { app: 'WA', time: '07:54', duration: '0:23' },
    { app: 'TG', time: '06:55', duration: '0:31' },
    { app: 'WA', time: '07:31', duration: '0:18' },
    { app: 'WA', time: '07:02', duration: '0:41' },
    { app: 'WA', time: '06:30', duration: '0:12', last: true },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{
        width: 270, borderRadius: 34,
        background: '#090C07',
        border: '2px solid rgba(255,255,255,0.10)',
        overflow: 'hidden',
        boxShadow: '0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)',
      }}>
        {/* Status bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '12px 18px 6px', background: WC.night,
        }}>
          <span style={{ fontFamily: WF.mono, fontSize: 12, fontWeight: 700, color: WC.creamSoft }}>05:30</span>
          <span style={{ fontFamily: WF.sans, fontSize: 11, color: WC.creamSoft, letterSpacing: 2 }}>▲ ▲ ▲</span>
        </div>

        {/* App header */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 14px 10px', background: WC.night,
        }}>
          <span style={{ fontFamily: WF.sans, fontWeight: 700, fontSize: 16, color: WC.cream, flex: 1 }}>Incoming</span>
          <span style={{
            background: WC.signalUrgent, color: '#fff',
            fontSize: 10, fontWeight: 700, padding: '3px 8px',
            borderRadius: 999, display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#fff', display: 'inline-block' }} />
            LIVE
          </span>
          <span style={{
            background: WC.signalNormal, color: '#fff',
            fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 999,
          }}>36+</span>
        </div>

        <div style={{ height: 1, background: 'rgba(201,181,131,0.15)', margin: '0 14px' }} />

        {/* Messages */}
        <div style={{ background: WC.night }}>
          {messages.map((m, i) => <VoiceRow key={i} {...m} />)}
        </div>

        {/* Footer */}
        <div style={{
          padding: '10px 14px 14px', background: WC.night,
          textAlign: 'center',
          fontFamily: WF.sans, fontSize: 11, fontWeight: 500,
          color: WC.gold, letterSpacing: '0.02em',
        }}>+ 35 more unread audio messages</div>
      </div>
      <div style={{
        marginTop: 14, fontFamily: WF.mono, fontSize: 9.5,
        color: 'rgba(241,236,219,0.28)', letterSpacing: '0.06em', textAlign: 'center',
        textTransform: 'uppercase',
      }}>AACR · Voice-to-Action Agent · ERR Volunteer · North Darfur</div>
    </div>
  );
}

function InformationalChaosSection() {
  const paras = [
    'Mohhamad is a volunteer. His shift starts at dawn, 5:30am. He walks to the FSC office in Tawila, North Darfur and connects online.',
    'He receives 36+ voice messages from field volunteers across North Darfur — WhatsApp and Telegram, mixed Arabic dialects.',
    'No titles. No priority flags. No way to know what is urgent without listening to each one. Inundated by information overload.',
    'He plays the first message. Then the second. By the time he reaches number twelve, a new batch has already started coming in.',
  ];
  return (
    <section style={{ background: WC.night, padding: '96px 0 88px' }}>
      <div style={{
        maxWidth: 1120, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 72, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: WF.sans, fontSize: 10.5, fontWeight: 600,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: WC.gold, marginBottom: 26,
          }}>ERR Volunteer · Tawila, North Darfur, Sudan · 05:30 AM</div>
          <h2 style={{
            fontFamily: WF.serif, fontWeight: 700,
            fontSize: 'clamp(1.875rem, 3.8vw, 3.25rem)',
            lineHeight: 1.08, letterSpacing: '-0.01em',
            color: WC.cream, margin: '0 0 36px',
          }}>
            The context: ERRs are drowning in informational chaos.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {paras.map((text, i) => (
              <p key={i} style={{
                fontFamily: WF.sans, fontSize: 16, lineHeight: 1.7,
                color: WC.creamDim, margin: 0,
                paddingLeft: 18,
                borderLeft: `2px solid rgba(201,181,131,0.18)`,
              }}>{text}</p>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneMockup />
        </div>
      </div>
    </section>
  );
}

// ─── Context page: Section 3 — the problem ───────────────────────────────────

function TheProblemSection() {
  const problems = [
    {
      num: '01',
      title: '40+ voice messages per hour',
      body: 'Emergency reports arrive as unstructured WhatsApp and Telegram voice notes. Volunteers manually listen, replay, and transcribe under extreme pressure. Urgent cases get buried. 30–60 minutes to process a batch. Seconds lost are lives lost.',
    },
    {
      num: '02',
      title: 'Misinformation spreads faster than truth',
      body: 'Unverified rumours about aid convoys, attacks, and health emergencies spread rapidly. They cause dangerous crowding, unsafe movement, and panic — while eroding trust between communities and response teams.',
    },
    {
      num: '03',
      title: 'Knowledge never travels',
      body: 'A volunteer in Darfur learns to administer first aid using locally available materials, counter misinformation or treat water. This knowledge never reaches South Kordofan. Every region re-learns the same lessons at a cost of lives.',
    },
  ];
  const stats = [
    { value: '11M+', label: 'people displaced', sub: 'Sudan 2025',               color: WC.signalUrgent },
    { value: '40+',  label: 'voice messages',   sub: 'per hour',                  color: WC.fieldGreen   },
    { value: '+45′', label: 'to listen to &',   sub: 'prioritize messages',       color: WC.fieldGreen   },
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.5rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 12px',
        }}>Components of chaos</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 17, lineHeight: 1.6,
          color: WC.inkSoft, margin: '0 0 40px', maxWidth: 720,
        }}>Three compounding failures make coordinated emergency response nearly impossible.</p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 156px', gap: 18, alignItems: 'start' }}>
          {problems.map((p) => (
            <div key={p.num} style={{
              background: WC.creamWarm,
              border: `1px solid rgba(168,148,95,0.2)`,
              borderRadius: 8, padding: '22px 22px',
            }}>
              <div style={{
                fontFamily: WF.serif, fontWeight: 600, fontSize: 24,
                color: WC.goldDeep, marginBottom: 14, lineHeight: 1,
              }}>{p.num}</div>
              <h3 style={{
                fontFamily: WF.sans, fontWeight: 700, fontSize: 14.5,
                color: WC.ink, margin: '0 0 12px', lineHeight: 1.4,
              }}>{p.title}</h3>
              <p style={{
                fontFamily: WF.sans, fontSize: 13.5, lineHeight: 1.65,
                color: WC.inkSoft, margin: 0,
              }}>{p.body}</p>
            </div>
          ))}

          {/* Stats column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {stats.map((s) => (
              <div key={s.value} style={{
                background: WC.creamWarm,
                border: `1px solid rgba(168,148,95,0.2)`,
                borderRadius: 8, padding: '14px 16px',
              }}>
                <div style={{
                  fontFamily: WF.serif, fontWeight: 700, fontSize: 32,
                  color: s.color, lineHeight: 1.05, marginBottom: 4,
                }}>{s.value}</div>
                <div style={{ fontFamily: WF.sans, fontSize: 12, color: WC.inkSoft, lineHeight: 1.4 }}>
                  {s.label}<br />{s.sub}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: WC.inkSoft, marginTop: 28, opacity: 0.6,
        }}>AACR · AI Assistant for Crisis Response · April 2026</div>
      </div>
    </section>
  );
}

// ─── Shared primitives ────────────────────────────────────────────────────────

function SectionNumber({ number }) {
  return (
    <>
      <div style={{ fontFamily: WF.serif, fontWeight: 600, fontSize: 13, color: WC.goldDeep, letterSpacing: '0.12em' }}>{number}</div>
      <hr style={{ height: 2, width: 56, background: WC.gold, border: 0, margin: '16px 0 28px' }} />
    </>
  );
}

function NumberedSection({ id, number, title, children, alt = false }) {
  return (
    <section id={id} style={{
      background: alt ? WC.creamWarm : WC.cream,
      padding: '80px 0',
      borderTop: `1px solid ${WC.creamWarm}`,
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <SectionNumber number={number} />
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(1.875rem, 3.6vw, 3rem)',
          lineHeight: 1.15, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 36px', maxWidth: 720,
        }}>{title}</h2>
        {children}
      </div>
    </section>
  );
}

function FeatureCard({ accent = 'green', title, body, meta }) {
  const colors = { green: WC.fieldGreen, gold: WC.gold, sage: WC.sage, urgent: WC.signalUrgent };
  return (
    <div style={{
      background: '#ffffff', border: `1px solid ${WC.creamWarm}`,
      borderLeft: `4px solid ${colors[accent]}`,
      borderRadius: 8, padding: '20px 22px',
      boxShadow: '0 1px 2px rgba(20,24,15,.06), 0 4px 16px rgba(20,24,15,.04)',
    }}>
      {meta && <div style={{
        fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: WC.sage, marginBottom: 10,
      }}>{meta}</div>}
      <h3 style={{ fontFamily: WF.serif, fontWeight: 700, fontSize: 20, color: WC.ink, margin: '0 0 8px', lineHeight: 1.2 }}>{title}</h3>
      <p style={{ fontFamily: WF.sans, fontSize: 14, lineHeight: 1.6, color: WC.inkSoft, margin: 0 }}>{body}</p>
    </div>
  );
}

// ─── Product page: Section 1 — Introducing AACR ─────────────────────────────

function IntroducingAACRSection() {
  const principles = [
    { title: 'Offline-first',       body: 'Core functions work without internet. Connectivity improves quality. It never blocks action.' },
    { title: 'Arabic-first',        body: 'Transcription and guidance in Sudanese Arabic. Built for the people using it, not translated for them.' },
    { title: 'Human in the loop',   body: 'Every AI output requires confirmation from a volunteer before any action is taken. No automated decisions.' },
    { title: 'No hallucinations',   body: 'The system never generates medical advice. It retrieves validated protocols from WHO, MSF, and ICRC only.' },
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 14px',
        }}>Introducing AACR</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 18, fontWeight: 600,
          color: WC.fieldGreen, margin: '0 0 16px', lineHeight: 1.4,
        }}>Android mobile app with several essential features that save lives.</p>
        <p style={{
          fontFamily: WF.sans, fontSize: 16, lineHeight: 1.65,
          color: WC.inkSoft, margin: '0 0 40px', maxWidth: 820,
        }}>
          The AI Assistant for Crisis Response <strong style={{ color: WC.ink }}>is a mobile application</strong> that
          automatically transcribes, prioritises, and suggests the best practice. It is built specifically
          for first responders operating in conflict-affected Sudan.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {principles.map(p => (
            <div key={p.title} style={{
              background: WC.creamWarm,
              border: `1px solid rgba(168,148,95,0.2)`,
              borderLeft: `4px solid ${WC.fieldGreen}`,
              borderRadius: 8, padding: '24px 26px',
            }}>
              <h3 style={{
                fontFamily: WF.sans, fontWeight: 700, fontSize: 17,
                color: WC.ink, margin: '0 0 12px', lineHeight: 1.3,
              }}>{p.title}</h3>
              <p style={{
                fontFamily: WF.sans, fontSize: 15, lineHeight: 1.65,
                color: WC.inkSoft, margin: 0,
              }}>{p.body}</p>
            </div>
          ))}
        </div>
        <div style={{
          fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: WC.inkSoft, marginTop: 32, opacity: 0.6,
        }}>AACR · AI Assistant for Crisis Response · April 2026</div>
      </div>
    </section>
  );
}

// ─── Product page: Section 2 — Five agents ───────────────────────────────────

function AgentCard({ num, title, connectivity, connColor, accent, body }) {
  return (
    <div style={{
      background: WC.cream,
      border: `1px solid rgba(168,148,95,0.2)`,
      borderLeft: `4px solid ${accent}`,
      borderRadius: 8, padding: '22px 22px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
        <div style={{
          fontFamily: WF.serif, fontWeight: 600, fontSize: 18,
          color: WC.goldDeep, lineHeight: 1,
        }}>{num}</div>
        <span style={{
          fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
          color: connColor, border: `1px solid ${connColor}`,
          borderRadius: 4, padding: '3px 8px',
        }}>{connectivity}</span>
      </div>
      <h3 style={{
        fontFamily: WF.sans, fontWeight: 700, fontSize: 16,
        color: WC.ink, margin: '0 0 10px', lineHeight: 1.35,
      }}>{title}</h3>
      <p style={{
        fontFamily: WF.sans, fontSize: 14, lineHeight: 1.65,
        color: WC.inkSoft, margin: 0,
      }}>{body}</p>
    </div>
  );
}

function FiveAgentsSection() {
  const agents = [
    { num: '01', title: 'Voice-to-action',     connectivity: 'Offline',       connColor: WC.fieldGreen, accent: WC.fieldGreen,
      body: 'Transcribes audio, strips personal identifiers, scores urgency, generates a prioritised task list.' },
    { num: '02', title: 'Emergency guidance',  connectivity: 'Offline',       connColor: WC.fieldGreen, accent: WC.fieldGreen,
      body: 'Matches incident type to WHO, MSF, ICRC protocols. Delivers step-by-step guidance in Sudanese Arabic.' },
    { num: '03', title: 'Best practices hub',  connectivity: 'Offline + sync', connColor: WC.goldDeep,   accent: WC.gold,
      body: 'Captures and shares field-tested knowledge from ERR volunteers. Community-ranked. Syncs when connected.' },
    { num: '04', title: 'Rumour guard',        connectivity: 'Online',        connColor: WC.sage,       accent: WC.sage,
      body: 'Monitors messaging channels for unverified claims. Scores risk and drafts a counter-message for volunteer review.' },
    { num: '05', title: 'SitRep studio',       connectivity: 'Online',        connColor: WC.sage,       accent: WC.sage,
      body: 'Auto-drafts bilingual situation reports in Arabic and English, ready for coordinator review before sending.' },
  ];
  return (
    <section style={{ background: WC.creamWarm, padding: '80px 0', borderTop: `1px solid rgba(168,148,95,0.2)` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 40px',
        }}>Five agents. One coordinated system.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginBottom: 18 }}>
          {agents.slice(0, 3).map(a => <AgentCard key={a.num} {...a} />)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {agents.slice(3).map(a => <AgentCard key={a.num} {...a} />)}
        </div>
        <p style={{
          fontFamily: WF.sans, fontSize: 14, fontStyle: 'italic',
          color: WC.inkSoft, margin: '28px 0 0', lineHeight: 1.6,
        }}>
          A sixth <strong style={{ fontStyle: 'normal' }}>watchdog layer</strong> runs across all agents —
          detecting geographic patterns, flagging surges, escalating to coordinators.
        </p>
        <div style={{
          fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: WC.inkSoft, marginTop: 20, opacity: 0.6,
        }}>AACR · AI Assistant for Crisis Response · April 2026</div>
      </div>
    </section>
  );
}

// ─── Product page: Section 3 — Offline-first architecture ────────────────────

function ArchitectureColumn({ heading, items, accent, bg }) {
  return (
    <div style={{ background: bg, border: `1px solid rgba(168,148,95,0.18)`, borderRadius: 8, padding: '24px 28px' }}>
      <div style={{
        fontFamily: WF.sans, fontSize: 10.5, fontWeight: 700,
        letterSpacing: '0.10em', textTransform: 'uppercase',
        color: accent, marginBottom: 20,
      }}>{heading}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {items.map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: 4, height: 18, borderRadius: 2, background: accent, flexShrink: 0, marginTop: 2 }} />
            <span style={{ fontFamily: WF.sans, fontSize: 15, color: WC.ink, lineHeight: 1.5 }}>{item}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function OfflineArchitectureSection() {
  const alwaysOn = [
    'On-device transcription (Whisper Small, 40MB)',
    'Instant classification (TFLite, 15MB)',
    'Rule-based urgency scoring',
    'WHO, MSF and ICRC protocols pre-loaded',
    'PII stripping on device',
    'Full data persistence',
    'Task list generation',
  ];
  const whenConnected = [
    'Higher-accuracy transcription (Whisper Large-v3)',
    'Richer guidance via RAG',
    'Dialect normalisation',
    'Rumour guard channel monitoring',
    'SitRep auto-drafting',
    'Model updates via delta sync (500KB)',
    'Cross-region coordinator dashboard',
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 12px',
        }}>Offline-first architecture</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 18, fontWeight: 600,
          color: WC.fieldGreen, margin: '0 0 14px', lineHeight: 1.4,
        }}>Connectivity upgrades quality. It never blocks action.</p>
        <p style={{
          fontFamily: WF.sans, fontSize: 16, lineHeight: 1.65,
          color: WC.inkSoft, margin: '0 0 36px', maxWidth: 820,
        }}>
          In El Fasher and Tawila, connectivity is intermittent, expensive, and at times dangerous to seek.
          Every agent is designed to function without internet.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <ArchitectureColumn
            heading="Always available — no internet required"
            items={alwaysOn}
            accent={WC.fieldGreen}
            bg="rgba(63,84,36,0.06)"
          />
          <ArchitectureColumn
            heading="When connected — upgrades quality only"
            items={whenConnected}
            accent={WC.sage}
            bg="rgba(90,106,64,0.05)"
          />
        </div>
        <div style={{
          fontFamily: WF.sans, fontSize: 12, color: WC.inkSoft,
          marginTop: 24, opacity: 0.75,
        }}>~150MB total on-device · Android 8.0+ · Offline mode never blocks frontline action</div>
      </div>
    </section>
  );
}

// ─── Team section ─────────────────────────────────────────────────────────────

function TeamSection() {
  const members = [
    {
      name: 'Musa Mohamed Hassan',
      role: 'Founder & Director',
      org:  'Future Stars Centre, El Fasher, North Darfur',
      bio:  'FSC has offices in El Fasher and Tawila. Musa leads the organisation whose staff are the primary users.',
    },
    {
      name: 'Saifuddin Ahmed',
      role: 'Engineer Team Leader',
      org:  'Future Stars Centre, North Darfur',
      bio:  'Local engineer leading technical development. Ground truth from the field in every design decision.',
    },
    {
      name: 'Dave Levin',
      role: 'Co-Founder & Advisor',
      org:  'Hala Systems',
      bio:  'Decade of experience building life-saving technology in Syria, Yemen, and Ukraine.',
    },
    {
      name: 'Bojan Boskovic',
      role: 'Humanitarian Tech & Product Advisor',
      org:  null,
      bio:  'Humanitarian technology and product strategy across conflict-affected contexts. Syria. Ukraine. Sudan.',
    },
    {
      name: 'Abdallah Masoud',
      role: 'Founder & Director',
      org:  'G-Artistic, Gedarif, Sudan',
      bio:  'Sudanese civil society leadership and community engagement.',
    },
    {
      name: 'Ayman Al Maki',
      role: 'Founder & Director',
      org:  'Dual Track, Barada Labs',
      bio:  'Technology and innovation in humanitarian response. Syria. Ukraine.',
    },
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 12px',
        }}>Our team</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 18, fontWeight: 600,
          color: WC.fieldGreen, margin: '0 0 40px', lineHeight: 1.55,
        }}>
          Lessons from Syria, Yemen and Ukraine.<br />
          Built locally, for Sudanese by Sudanese.&nbsp; One team.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {members.map(m => (
            <div key={m.name} style={{
              background: WC.creamWarm,
              border: `1px solid rgba(168,148,95,0.2)`,
              borderRadius: 8, padding: '24px 26px',
            }}>
              <h3 style={{
                fontFamily: WF.sans, fontWeight: 700, fontSize: 16,
                color: WC.ink, margin: '0 0 5px', lineHeight: 1.3,
              }}>{m.name}</h3>
              <div style={{ fontFamily: WF.sans, fontSize: 13, color: WC.inkSoft, lineHeight: 1.4, marginBottom: 2 }}>{m.role}</div>
              {m.org && <div style={{ fontFamily: WF.sans, fontSize: 13, color: WC.inkSoft, lineHeight: 1.4, marginBottom: 16 }}>{m.org}</div>}
              {!m.org && <div style={{ marginBottom: 16 }} />}
              <p style={{ fontFamily: WF.sans, fontSize: 14, lineHeight: 1.65, color: WC.ink, margin: 0 }}>{m.bio}</p>
            </div>
          ))}
        </div>
        <div style={{
          fontFamily: WF.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: WC.inkSoft, marginTop: 32, opacity: 0.6,
        }}>AACR · AI Assistant for Crisis Response · April 2026</div>
      </div>
    </section>
  );
}

// ─── Donor section ────────────────────────────────────────────────────────────

// ─── Donors page — 12-month roadmap ──────────────────────────────────────────

function RoadmapItem({ text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 14 }}>
      <div style={{ width: 4, height: 18, borderRadius: 2, background: WC.gold, flexShrink: 0, marginTop: 2 }} />
      <span style={{ fontFamily: WF.sans, fontSize: 14, color: WC.ink, lineHeight: 1.5 }}>{text}</span>
    </div>
  );
}

function RoadmapColumn({ quarter, months, phase, items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', border: `1px solid rgba(168,148,95,0.25)`, borderRadius: 8, overflow: 'hidden' }}>
      <div style={{ background: WC.fieldGreen, padding: '14px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 2 }}>
          <span style={{ fontFamily: WF.serif, fontWeight: 700, fontSize: 26, color: WC.gold, lineHeight: 1 }}>{quarter}</span>
          <span style={{ fontFamily: WF.sans, fontSize: 12, color: WC.creamDim }}>{months}</span>
        </div>
        <div style={{ fontFamily: WF.sans, fontWeight: 700, fontSize: 14, color: WC.cream }}>{phase}</div>
      </div>
      <div style={{ background: WC.creamWarm, padding: '18px 18px 8px', flex: 1 }}>
        {items.map((item, i) => <RoadmapItem key={i} text={item} />)}
      </div>
    </div>
  );
}

function DonorSection() {
  const quarters = [
    {
      quarter: 'Q1', months: 'Months 1–3', phase: 'Build & prepare',
      items: [
        'Flutter app + offline voice triage',
        'Whisper fine-tuning on Sudanese Arabic',
        'Device testing on Tecno and Infinix',
        'WHO, MSF, ICRC protocol loading',
        'ERR onboarding — FSC Tawila teams',
      ],
    },
    {
      quarter: 'Q2', months: 'Months 4–6', phase: 'Pilot deployment',
      items: [
        'Live deployment — 2 pilot regions',
        'Voice triage with 3+ ERR teams',
        'Emergency guidance modules live',
        'Rumour guard MVP',
        'Data collection begins',
      ],
    },
    {
      quarter: 'Q3', months: 'Months 7–9', phase: 'Learn & improve',
      items: [
        'Volunteer feedback analysis',
        'ASR model updated on field audio',
        'Best practices hub expanded',
        'Admin dashboard for coordinators',
        'Mid-pilot donor report',
      ],
    },
    {
      quarter: 'Q4', months: 'Months 10–12', phase: 'Evaluate & scale',
      items: [
        'Full impact assessment',
        'Lessons documented for replication',
        'Scale plan for additional regions',
        'Phase 2 funding proposal',
        'Final report and presentation',
      ],
    },
  ];
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 12px',
        }}>12-month roadmap</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 18, fontWeight: 600,
          color: WC.fieldGreen, margin: '0 0 36px', lineHeight: 1.4,
        }}>12-month proof of concept — four phases</p>

        {/* Timeline connector */}
        <div style={{ position: 'relative', marginBottom: 20, height: 28 }}>
          <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 2, background: WC.creamWarm }} />
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              position: 'absolute', top: '50%', left: `${i * 25 + 12.5}%`,
              transform: 'translate(-50%, -50%)',
              width: 14, height: 14, background: WC.fieldGreen,
              borderRadius: 2, border: `2px solid ${WC.gold}`,
            }} />
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {quarters.map(q => <RoadmapColumn key={q.quarter} {...q} />)}
        </div>

        <div style={{ fontFamily: WF.sans, fontSize: 12, color: WC.inkSoft, marginTop: 24, opacity: 0.75 }}>
          KPIs: Response time reduction · Incidents processed per shift · Volunteer adoption rate · ASR accuracy improvement · Rumours neutralised
        </div>
      </div>
    </section>
  );
}

// ─── Open source section ──────────────────────────────────────────────────────

function OpenSourceSection() {
  return (
    <section style={{ background: WC.cream, padding: '80px 0', borderTop: `1px solid ${WC.creamWarm}` }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <h2 style={{
          fontFamily: WF.serif, fontWeight: 700,
          fontSize: 'clamp(2.25rem, 5vw, 4rem)',
          lineHeight: 1.05, letterSpacing: '-0.01em',
          color: WC.ink, margin: '0 0 12px',
        }}>Built to be replicated.</h2>
        <p style={{
          fontFamily: WF.sans, fontSize: 18, fontWeight: 600,
          color: WC.fieldGreen, margin: '0 0 40px', lineHeight: 1.4,
        }}>AI-native crisis response for global communities.</p>

        <h3 style={{
          fontFamily: WF.sans, fontWeight: 700, fontSize: 14,
          color: WC.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase',
          margin: '0 0 12px',
        }}>Violence and Conflict Hotspots</h3>
        <div style={{
          borderRadius: 12, overflow: 'hidden',
          border: `1px solid rgba(168,148,95,0.2)`,
          boxShadow: '0 4px 8px rgba(20,24,15,.06), 0 24px 48px rgba(20,24,15,.10)',
        }}>
          <img
            src="/assets/acled-conflict-map.png"
            alt="ACLED Conflict Index world map showing violence and conflict hotspots by country"
            style={{ display: 'block', width: '100%', height: 'auto' }}
          />
        </div>
        <div style={{ fontFamily: WF.sans, fontSize: 12, color: WC.inkSoft, marginTop: 10, opacity: 0.75 }}>
          Source: ACLED 2026 · <a href="https://acleddata.com/series/acled-conflict-index/" target="_blank" rel="noopener noreferrer" style={{ color: WC.inkSoft }}>acleddata.com</a>
        </div>
      </div>
    </section>
  );
}

// ─── Exports — expose to inline script (Babel standalone isolates scopes) ────

Object.assign(window, {
  ErrorBoundary,
  SiteHeader, SiteFooter,
  HomePage, ContextPage, ProductPage, TeamPage, DonorsPage, OpenSourcePage,
});

window.__componentsReady = true;
document.dispatchEvent(new Event('components-ready'));

// ─── Footer ───────────────────────────────────────────────────────────────────

function FooterLinkCol({ heading, links }) {
  return (
    <div>
      <div style={{ fontFamily: WF.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: WC.creamSoft, marginBottom: 16 }}>{heading}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(l => (
          <a key={l} href="#" onClick={e => e.preventDefault()}
             aria-disabled="true" title="Coming soon"
             style={{ fontFamily: WF.sans, fontSize: 14, color: WC.creamDim, textDecoration: 'none', cursor: 'default' }}
             onMouseEnter={e => e.currentTarget.style.color = WC.cream}
             onMouseLeave={e => e.currentTarget.style.color = WC.creamDim}
          >{l}</a>
        ))}
      </div>
    </div>
  );
}

function LicenceBadge({ label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '3px 8px', borderRadius: 4,
      border: '1px solid rgba(241,236,219,0.18)',
      fontFamily: WF.mono, fontSize: 10.5, fontWeight: 500,
      color: 'rgba(241,236,219,0.55)', letterSpacing: '0.04em',
    }}>{label}</span>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: WC.night, color: WC.cream }}>
      <div style={{
        maxWidth: 1120, margin: '0 auto', padding: '48px 32px 40px',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 40,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <img src={LOGO.markDark} alt="Sawtna" style={{ width: 28, height: 28 }} />
            <span style={{ fontFamily: WF.serif, fontWeight: 700, fontSize: 20, color: WC.cream }}>Sawtna</span>
          </div>
          <div style={{ fontFamily: WF.sans, fontSize: 13, color: 'rgba(241,236,219,0.65)', lineHeight: 1.5, marginBottom: 14 }}>
            AI Assistant for Crisis Response
          </div>
          <div dir="rtl" style={{ fontFamily: WF.arSerif, fontSize: 18, color: WC.gold, marginBottom: 18, textAlign: 'right' }}>صوتنا</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <LicenceBadge label="MIT" />
            <LicenceBadge label="CC BY-SA 4.0" />
            <LicenceBadge label="SIL OFL" />
          </div>
        </div>
        <FooterLinkCol heading="Product"      links={['Mission', 'The five agents', 'The app', 'Download brief']} />
        <FooterLinkCol heading="Open source"  links={['GitHub', 'Design system', 'Fork the model', 'Licence']} />
        <FooterLinkCol heading="Organisation" links={['Future Stars Centre', 'Support our cause', 'Partner with us', 'Contact']} />
      </div>
      <div style={{ borderTop: '1px solid rgba(241,236,219,0.08)', padding: '16px 32px' }}>
        <div style={{
          maxWidth: 1120, margin: '0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10,
        }}>
          <div style={{ fontFamily: WF.sans, fontSize: 12, color: 'rgba(241,236,219,0.45)' }}>
            © 2026 Future Stars Centre · North Darfur, Sudan
          </div>
          <div dir="rtl" style={{ fontFamily: WF.ar, fontSize: 13, color: 'rgba(241,236,219,0.45)' }}>
            مساعد الذكاء الاصطناعي للاستجابة للأزمات
          </div>
        </div>
      </div>
    </footer>
  );
}