// Secondary pages — Systems, Community, About, Contact, Build (parked)

const PageHero = ({ eyebrow, title, sub, children }) => (
  <section style={{ position: 'relative', paddingTop: 148, paddingBottom: 56, overflow: 'hidden' }}>
    <div className="spatial" style={{ top: -140, right: -100, width: 400, height: 400,
      background: 'radial-gradient(circle, rgba(162,187,85,0.22), transparent 70%)' }} />
    <div className="container" style={{ position: 'relative' }}>
      <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>
      <h1 className="oblik" style={{ fontSize: 'clamp(40px, 5.4vw, 72px)', lineHeight: 0.98, letterSpacing: '-0.03em', marginBottom: 20, textWrap: 'balance', maxWidth: 980 }}>
        {title}
      </h1>
      {sub && <p style={{ color: 'var(--fg-2)', fontSize: 'clamp(15px, 1.25vw, 18px)', lineHeight: 1.6, maxWidth: 680, textWrap: 'pretty' }}>{sub}</p>}
      {children}
    </div>
  </section>
);

/* ============ SYSTEMS PAGE ============ */
const SystemsPage = ({ setRoute }) => {
  const [filter, setFilter] = React.useState('all');
  const all = [
    { id: 1, tag: 'OPS',       cat: 'ops',        name: 'Atlas', sub: 'Operations copilot',
      desc: 'Conversational ops layer over ERP, CRM and documents.', status: 'IN DESIGN' },
    { id: 2, tag: 'COMMERCE',  cat: 'commerce',   name: 'Throughline', sub: 'Quote-to-cash automation',
      desc: 'Quoting, PO matching and reconciliation for distributors.', status: 'IN DESIGN' },
    { id: 3, tag: 'KNOWLEDGE', cat: 'knowledge',  name: 'Archive', sub: 'Institutional memory',
      desc: 'SOPs, contracts and field reports — queryable org-wide.', status: 'IN DESIGN' },
    { id: 4, tag: 'SUPPORT',   cat: 'support',    name: 'Lineup', sub: 'Customer copilot',
      desc: 'Grounded replies, rich escalations, product insight loop.', status: 'PLANNED' },
    { id: 5, tag: 'XR+AI',     cat: 'xr',         name: 'Fieldview', sub: 'Spatial ops',
      desc: 'XR + AI for inspection, training and remote guidance.', status: 'RESEARCH' },
    { id: 6, tag: 'PROCUREMENT', cat: 'commerce', name: 'Intake', sub: 'Procurement intelligence',
      desc: 'Contract-aware procurement assistant with price memory.', status: 'PLANNED' },
    { id: 7, tag: 'OPS',       cat: 'ops',        name: 'Metric', sub: 'Automated reporting',
      desc: 'Weekly ops reports assembled from your systems, on schedule.', status: 'PLANNED' },
    { id: 8, tag: 'XR+AI',     cat: 'xr',         name: 'Presence', sub: 'Meeting intelligence',
      desc: 'Multi-party meeting capture with spatial recall.', status: 'RESEARCH' },
  ];
  const shown = filter === 'all' ? all : all.filter(x => x.cat === filter);
  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'ops', label: 'Operations' },
    { id: 'commerce', label: 'Commerce' },
    { id: 'knowledge', label: 'Knowledge' },
    { id: 'support', label: 'Support' },
    { id: 'xr', label: 'XR + AI' },
  ];
  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Systems / Catalogue"
        title={<>A catalogue of systems <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>in design</em> and in-flight.</>}
        sub="Each system is designed for a real operating environment. We’re a new division — these are the first AT systems we’re bringing to market through partner engagements."
      />
      <section style={{ padding: '32px 0 120px' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 6, marginBottom: 36, flexWrap: 'wrap',
            borderBottom: '1px solid var(--line)', paddingBottom: 14 }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setFilter(t.id)} style={{
                padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500,
                color: filter === t.id ? 'var(--on-accent)' : 'var(--fg-2)',
                background: filter === t.id ? 'var(--green)' : 'transparent',
                border: filter === t.id ? 'none' : '1px solid var(--line-2)'
              }}>{t.label}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
            {shown.map(s => (
              <div key={s.id} className="hover-lift" style={{
                background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14,
                padding: 24, minHeight: 220, display: 'flex', flexDirection: 'column'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                  <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-4)', letterSpacing: '0.16em' }}>{s.tag}</span>
                  <span className="mono" style={{
                    fontSize: 9.5, letterSpacing: '0.18em',
                    color: s.status === 'IN DESIGN' ? 'var(--green)' : s.status === 'PLANNED' ? 'var(--blue)' : 'var(--fg-3)',
                    padding: '4px 8px', borderRadius: 999,
                    border: `1px solid ${s.status === 'IN DESIGN' ? 'var(--green)' : s.status === 'PLANNED' ? 'var(--blue)' : 'var(--line-2)'}`,
                    opacity: 0.9
                  }}>{s.status}</span>
                </div>
                <h3 className="oblik" style={{ fontSize: 24, letterSpacing: '-0.02em', marginBottom: 4 }}>{s.name}</h3>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 12 }}>{s.sub}</div>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, textWrap: 'pretty', marginBottom: 18 }}>{s.desc}</p>
                <a style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--green)', cursor: 'pointer' }}>
                  Read brief <Icon name="arrowUpRight" size={12} />
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTASection setRoute={setRoute} />
    </div>
  );
};

/* ============ COMMUNITY PAGE ============ */
const CommunityPage = ({ setRoute }) => {
  const events = [
    {
      d: '25', m: 'APR', yr: '2026',
      t: 'Gauteng AI Community Meetup',
      p: 'Gauteng', tag: 'GAIC · MEETUP',
      time: 'Saturday · 10:00 – 15:00 SAST',
      url: 'https://luma.com/z4r92yo3?tk=hEuUZ8',
      live: true,
    },
  ];
  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Community / GAIC"
        title={<>Where African AI <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>practitioners</em> gather.</>}
        sub={<>The <a href="https://www.gaic.co.za" target="_blank" rel="noopener" style={{ color: 'var(--green)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Gauteng AI Community</a> (GAIC) is a builder-first community for AI practitioners across Gauteng — meetups, builds and roundtables grounded in work that ships. AT is an active participant.</>}
      />
      <section style={{ padding: '32px 0 60px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>Upcoming</div>
          <div style={{ display: 'grid', gap: 12 }}>
            {events.map(e => (
              <a key={e.t} href={e.url} target="_blank" rel="noopener" className="hover-lift" style={{
                display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 24, alignItems: 'center',
                padding: '22px 24px', border: '1px solid var(--green)', borderRadius: 14, background: 'var(--bg-1)',
                textDecoration: 'none', color: 'inherit'
              }}>
                <div style={{ textAlign: 'center' }}>
                  <div className="oblik" style={{ fontSize: 32, lineHeight: 1 }}>{e.d}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '0.16em', marginTop: 4 }}>{e.m} {e.yr}</div>
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--green)', letterSpacing: '0.18em',
                      padding: '3px 8px', border: '1px solid var(--green)', borderRadius: 999 }}>{e.tag}</span>
                    {e.live && <span className="mono" style={{ fontSize: 10, color: 'var(--green)', letterSpacing: '0.18em' }}>◆ RSVP OPEN</span>}
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.015em' }}>{e.t}</div>
                  <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 4 }}>{e.time} · {e.p}</div>
                </div>
                <button className="btn btn-primary" style={{ fontSize: 12.5 }}>
                  RSVP on Luma <Icon name="arrowUpRight" size={13} />
                </button>
              </a>
            ))}
            <div style={{
              padding: '22px 24px', border: '1px dashed var(--line-2)', borderRadius: 14,
              color: 'var(--fg-3)', fontSize: 13.5, lineHeight: 1.6
            }}>
              More events will be announced here as they’re scheduled.
            </div>
          </div>
        </div>
      </section>
      <GAICSection setRoute={setRoute} />
    </div>
  );
};

/* ============ ABOUT PAGE ============ */
const AboutPage = ({ setRoute }) => (
  <div className="page-fade">
    <PageHero
      eyebrow="About / AT AI"
      title={<>A South African technology company, <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>building for the continent</em>.</>}
      sub="African Technopreneurs (Pty) Ltd (AT) is the technology subsidiary of the Enterprising Africa Regional Network (EARN) — a South African purpose-driven, for-profit group established in September 2014, headquartered in Centurion, Gauteng. AT focuses on practical AI, XR and emerging-tech systems for African business."
    />
    <section style={{ padding: '40px 0 100px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="about-grid">
          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14, padding: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Origin</div>
            <h3 className="oblik" style={{ fontSize: 26, letterSpacing: '-0.02em', marginBottom: 14 }}>EARN since 2014 · AT since 2017</h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.65, textWrap: 'pretty' }}>
              The <strong style={{ color: 'var(--fg)' }}>Enterprising Africa Regional Network</strong> (EARN) is a purpose-driven, for-profit South African company established in September 2014, with the goal of developing a new generation of young African entrepreneurs. African Technopreneurs (AT) was founded in 2017 as EARN’s technology subsidiary — today focused on practical AI, XR and emerging-tech systems for African business.
            </p>
          </div>
          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14, padding: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Thesis</div>
            <h3 className="oblik" style={{ fontSize: 26, letterSpacing: '-0.02em', marginBottom: 14 }}>Practical, grounded, African.</h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.65, textWrap: 'pretty' }}>
              The AI that matters to African enterprise is the AI that integrates, runs reliably, respects local context and replaces a real line item on an ops sheet. We don’t chase capability frontiers. We ship systems that work on Monday morning.
            </p>
          </div>
        </div>

        <div style={{ marginTop: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Timeline</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--line)',
            border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }} className="timeline-grid">
            {[
              { y: '2014', t: 'EARN founded', d: 'Enterprising Africa Regional Network established in Centurion — purpose-driven, for-profit.' },
              { y: '2017', t: 'AT formed', d: 'African Technopreneurs launched as EARN’s technology subsidiary.' },
              { y: '2020', t: 'XR / hardware', d: 'AT grows as a VR/AR hardware & software provider and XR consumer electronics distributor.' },
              { y: '2026', t: 'AI division', d: 'ai.africantechno.com goes live; AT begins active participation in GAIC.' },
              { y: 'Next',  t: 'First deployments', d: 'Partner pilots in ops, commerce and knowledge — in engagement now.' },
            ].map((e, i) => (
              <div key={e.y} style={{ background: 'var(--bg)', padding: 24, minHeight: 200 }}>
                <div className="mono oblik" style={{ fontSize: 22, color: 'var(--green)', letterSpacing: '0.04em', marginBottom: 12 }}>{e.y}</div>
                <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 8 }}>{e.t}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.55 }}>{e.d}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 80, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14,
          padding: 'clamp(28px, 4vw, 48px)' }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>The EARN group</div>
          <p style={{ color: 'var(--fg-3)', fontSize: 14, lineHeight: 1.6, maxWidth: 720, marginBottom: 24 }}>
            AT operates alongside three sister subsidiaries of Enterprising Africa Regional Network (Pty) Ltd. The group shares a single operating identity and headquarters in Centurion, Gauteng.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }} className="group-grid">
            {[
              { n: 'EARN',                        role: 'Enterprising Africa Regional Network · parent group', status: 'SINCE 2014' },
              { n: 'African Technopreneurs (AT)', role: 'Technology subsidiary · AI, XR, consumer electronics', status: 'SINCE 2017', hl: true },
              { n: 'African Greeneurs (AG)',      role: 'Agripreneur training · food & fresh produce',         status: 'OPERATING' },
              { n: 'African Lakeside Properties', role: 'Property, development & hospitality',                status: 'OPERATING' },
              { n: 'EARN Business Solutions',    role: 'Business support solutions',                         status: 'OPERATING' },
              { n: 'Gauteng AI Community',        role: 'Community AT participates in · AI practitioner meetups',    status: 'ACTIVE', url: 'https://www.gaic.co.za' },
            ].map(d => (
              <a key={d.n} href={d.url || undefined} target={d.url ? '_blank' : undefined} rel={d.url ? 'noopener' : undefined} style={{
                display: 'block', textDecoration: 'none', color: 'inherit',
                padding: '20px 18px', background: 'var(--bg)',
                border: `1px solid ${d.hl ? 'var(--green)' : 'var(--line)'}`,
                borderRadius: 10,
                cursor: d.url ? 'pointer' : 'default'
              }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.14em', marginBottom: 8 }}>{d.n}</div>
                <div style={{ fontSize: 14, color: 'var(--fg)', marginBottom: 10 }}>{d.role}</div>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em',
                  color: d.hl ? 'var(--green)' : 'var(--fg-4)' }}>◆ {d.status}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-grid, .group-grid { grid-template-columns: 1fr !important; }
          .timeline-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
    <CTASection setRoute={setRoute} />
  </div>
);

/* ============ CONTACT PAGE ============ */
const ContactPage = ({ setRoute }) => {
  const [form, setForm] = React.useState({ name: '', email: '', org: '', brief: '', intent: 'consult' });
  const [sent, setSent] = React.useState(false);
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Contact / Engage"
        title={<>Tell us what you’re actually trying to do.</>}
        sub="We read every enquiry. Most turn into a 45-minute discovery call within a week."
      />
      <section style={{ padding: '40px 0 100px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 32 }} className="contact-grid">
            <form onSubmit={submit} style={{
              background: 'var(--bg-1)', border: '1px solid var(--line)',
              borderRadius: 16, padding: 'clamp(24px, 4vw, 40px)'
            }}>
              {sent ? (
                <div style={{ minHeight: 400, display: 'grid', placeItems: 'center', textAlign: 'center', padding: 24 }}>
                  <div>
                    <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--green-dim)',
                      border: '1px solid var(--green)', margin: '0 auto 20px', display: 'grid', placeItems: 'center', color: 'var(--green)' }}>
                      <Icon name="check" size={28} />
                    </div>
                    <h3 className="oblik" style={{ fontSize: 28, letterSpacing: '-0.02em', marginBottom: 10 }}>We’ve got it.</h3>
                    <p style={{ color: 'var(--fg-2)', fontSize: 15, maxWidth: 360, margin: '0 auto' }}>
                      A member of the AT team will be in touch within two business days.
                    </p>
                  </div>
                </div>
              ) : (
                <>
                  <div className="eyebrow" style={{ marginBottom: 24 }}>New enquiry</div>

                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 24 }} className="intent-grid">
                    {[
                      { id: 'consult', l: 'Consult' },
                      { id: 'system',  l: 'Build a system' },
                      { id: 'event',   l: 'GAIC event' },
                      { id: 'press',   l: 'Press / other' },
                    ].map(o => (
                      <button type="button" key={o.id} onClick={() => setForm(f => ({ ...f, intent: o.id }))} style={{
                        padding: '10px 12px', fontSize: 13, borderRadius: 10,
                        color: form.intent === o.id ? 'var(--on-accent)' : 'var(--fg-2)',
                        background: form.intent === o.id ? 'var(--green)' : 'var(--bg-2)',
                        border: '1px solid ' + (form.intent === o.id ? 'var(--green)' : 'var(--line)')
                      }}>{o.l}</button>
                    ))}
                  </div>

                  <div style={{ display: 'grid', gap: 14 }}>
                    <Field label="Your name" v={form.name} onChange={upd('name')} required />
                    <Field label="Work email" v={form.email} onChange={upd('email')} type="email" required />
                    <Field label="Organisation" v={form.org} onChange={upd('org')} />
                    <Field label="What’s on your mind?" v={form.brief} onChange={upd('brief')} area />
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 24 }}>
                    Send enquiry <Icon name="arrow" size={14} />
                  </button>
                </>
              )}
            </form>

            <aside style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
              <InfoCard icon="mail"     k="Email"    v="info@africantechno.com" />
              <InfoCard icon="terminal" k="Call"     v="+27 12 946 2665" />
              <InfoCard icon="pin"      k="HQ"       v={<>116 Knopjeslaagte 385JR<br/>M26, Centurion 0158</>} />
              <InfoCard icon="calendar" k="Hours"    v={<>Mon–Fri · 08:30 – 17:30 SAST</>} />
              <div style={{ padding: 20, border: '1px dashed var(--line-2)', borderRadius: 14 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.18em', marginBottom: 10 }}>ALSO</div>
                <p style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 12 }}>
                  Interested in the labs layer, experiments or event demos? Head to the builder layer.
                </p>
                <a onClick={() => setRoute('build')} className="mono" style={{
                  fontSize: 11, color: 'var(--green)', letterSpacing: '0.2em', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 8
                }}>
                  BUILD.AFRICANTECHNO.COM <Icon name="arrowUpRight" size={12} />
                </a>
              </div>
            </aside>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .contact-grid { grid-template-columns: 1fr !important; }
            .intent-grid { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
};

const Field = ({ label, v, onChange, type = 'text', required, area }) => (
  <label style={{ display: 'block' }}>
    <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 8 }}
      dangerouslySetInnerHTML={{ __html: label }} />
    {area ? (
      <textarea value={v} onChange={onChange} rows={5} required={required}
        style={{ width: '100%', background: 'var(--bg-2)', border: '1px solid var(--line-2)',
          borderRadius: 10, padding: '12px 14px', color: 'var(--fg)', fontFamily: 'inherit',
          fontSize: 14.5, resize: 'vertical', outline: 'none' }} />
    ) : (
      <input type={type} value={v} onChange={onChange} required={required}
        style={{ width: '100%', background: 'var(--bg-2)', border: '1px solid var(--line-2)',
          borderRadius: 10, padding: '12px 14px', color: 'var(--fg)', fontFamily: 'inherit',
          fontSize: 14.5, outline: 'none' }} />
    )}
  </label>
);
const InfoCard = ({ icon, k, v }) => (
  <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14,
    padding: '18px 20px', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
    <div style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--line-2)',
      display: 'grid', placeItems: 'center', color: 'var(--green)', flexShrink: 0 }}>
      <Icon name={icon} size={16} />
    </div>
    <div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 4 }}>{k}</div>
      <div style={{ fontSize: 14.5, color: 'var(--fg)', lineHeight: 1.5 }}>{v}</div>
    </div>
  </div>
);

/* ============ BUILD PAGE (parked / teaser) ============ */
const BuildPage = ({ setRoute }) => (
  <div className="page-fade">
    <section style={{ position: 'relative', padding: '148px 0 120px', overflow: 'hidden' }}>
      <div className="spatial" style={{ top: -100, left: '30%', width: 500, height: 500,
        background: 'radial-gradient(circle, rgba(0,175,239,0.2), transparent 70%)' }} />
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.5, maskImage: 'radial-gradient(ellipse at center, black, transparent 70%)' }} />
      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex', marginBottom: 20 }}>
          Build · labs layer
        </div>
        <h1 className="oblik" style={{ fontSize: 'clamp(44px, 6.5vw, 92px)', lineHeight: 0.95, letterSpacing: '-0.035em', marginBottom: 24, textWrap: 'balance', maxWidth: 1040, margin: '0 auto 24px' }}>
          The <em style={{ fontStyle: 'italic', color: 'var(--blue)' }}>execution</em> and <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>labs</em> layer.<br/>Coming soon.
        </h1>
        <p style={{ color: 'var(--fg-2)', fontSize: 18, lineHeight: 1.6, maxWidth: 680, margin: '0 auto 40px', textWrap: 'pretty' }}>
          The AT builder layer will publish experiments, event artefacts and open briefs from our XR + AI work —
          a home for the GAIC community, our labs and practitioners who want to build alongside us.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 960, margin: '0 auto 48px' }} className="build-grid">
          {[
            { t: 'Experiments',  d: 'Public prototypes from our XR + AI lab.', icon: 'spatial' },
            { t: 'Event artefacts', d: 'Talks, diagrams and demo sources from GAIC.', icon: 'calendar' },
            { t: 'Open briefs', d: 'Problems we’re inviting the community into.', icon: 'grow' },
          ].map(f => (
            <div key={f.t} style={{
              background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 14,
              padding: 24, textAlign: 'left'
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--line-2)',
                display: 'grid', placeItems: 'center', color: 'var(--blue)', marginBottom: 16 }}>
                <Icon name={f.icon} size={16} />
              </div>
              <h3 className="oblik" style={{ fontSize: 20, letterSpacing: '-0.02em', marginBottom: 8 }}>{f.t}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--fg-3)', lineHeight: 1.55, textWrap: 'pretty' }}
                dangerouslySetInnerHTML={{ __html: f.d }} />
            </div>
          ))}
        </div>

        <a href="https://luma.com/z4r92yo3?tk=hEuUZ8" target="_blank" rel="noopener" className="btn btn-primary">
          Be notified via GAIC <Icon name="arrowUpRight" size={14} />
        </a>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .build-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  </div>
);

Object.assign(window, { SystemsPage, CommunityPage, AboutPage, ContactPage, BuildPage });