// Home page sections

const Hero = ({ setRoute, headlineVariant = 'a' }) => {
  const HEADLINES = {
    a: (<>AI systems that <em className="oblik" style={{ fontStyle: 'italic', color: 'var(--green)' }}>actually run</em> your business.</>),
    b: (<>Practical AI, <em className="oblik" style={{ fontStyle: 'italic', color: 'var(--green)' }}>deployed</em> — not demoed.</>),
    c: (<>Operational AI, built for African <em className="oblik" style={{ fontStyle: 'italic', color: 'var(--green)' }}>business realities</em>.</>),
  };

  return (
    <section style={{ position: 'relative', paddingTop: 148, paddingBottom: 80, overflow: 'hidden' }}>
      {/* Spatial glows — very restrained */}
      <div className="spatial" style={{ top: -120, right: -120, width: 420, height: 420,
        background: 'radial-gradient(circle, rgba(162,187,85,0.35), transparent 70%)' }} />
      <div className="spatial" style={{ top: 260, left: -160, width: 380, height: 380,
        background: 'radial-gradient(circle, rgba(0,175,239,0.16), transparent 70%)', opacity: 0.4 }} />

      <div className="container" style={{ position: 'relative' }}>
        {/* Top meta row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
          <div className="eyebrow">AT · AI DIVISION / v2026</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--green)', animation: 'pulseDot 1.8s infinite' }} />
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '0.16em' }}>
              NOW ENGAGING · Q2 2026
            </span>
          </div>
        </div>

        {/* Headline + support */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <h1 className="oblik" style={{
              fontSize: 'clamp(44px, 6vw, 82px)',
              lineHeight: 0.98,
              letterSpacing: '-0.035em',
              marginBottom: 28,
              textWrap: 'balance'
            }}>
              {HEADLINES[headlineVariant]}
            </h1>
            <p style={{
              fontSize: 'clamp(16px, 1.35vw, 19px)',
              color: 'var(--fg-2)',
              lineHeight: 1.55, maxWidth: 560, marginBottom: 40,
              textWrap: 'pretty'
            }}>
              African Technopreneurs’ AI division designs, deploys and operates
              AI systems inside real operating environments — automations, copilots,
              dashboards and XR workflows engineered for African enterprise.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setRoute('systems')}>
                See our roadmap <Icon name="arrow" size={14} />
              </button>
              <a href="https://luma.com/z4r92yo3?tk=hEuUZ8" target="_blank" rel="noopener" className="btn btn-secondary">
                Meet us at GAIC <Icon name="arrowUpRight" size={14} />
              </a>
            </div>

            {/* proof row */}
            <div style={{
              display: 'flex', gap: 28, marginTop: 56, paddingTop: 28,
              borderTop: '1px solid var(--line)', flexWrap: 'wrap'
            }}>
              {[
                { k: 'African Technopreneurs · since', v: '2017' },
                { k: 'AI division',         v: 'Launching 2026' },
                { k: 'Community',           v: 'Active in GAIC' },
                { k: 'Base',                v: 'South Africa' },
              ].map(m => (
                <div key={m.k} style={{ minWidth: 120 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{m.k}</div>
                  <div className="oblik" style={{ fontSize: 22, marginTop: 4 }}>{m.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right visual — stacked mini-dash + spatial planes */}
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <MiniDashboard />
            </div>
            <div style={{
              position: 'absolute', top: 180, right: -24, width: '82%', zIndex: 1,
              transform: 'translateY(0)'
            }}>
              <SpatialPlanes label="CORE · SYSTEMS MESH" />
            </div>
            <div style={{ height: 280 }} />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

const Marquee = () => {
  const items = [
    'AI SYSTEMS', 'WORKFLOW AUTOMATION', 'APPLIED ADVISORY',
    'COMMUNITY · GAIC', 'XR + AI EXPERIMENTS', 'OPS INTELLIGENCE',
    'INTERNAL KNOWLEDGE', 'CUSTOMER COPILOTS',
  ];
  return (
    <section style={{
      borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
      padding: '22px 0', overflow: 'hidden', background: 'var(--bg-1)'
    }}>
      <div style={{ display: 'flex', gap: 48, animation: 'marquee 44s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items, ...items].map((x, i) => (
          <span key={i} className="mono" style={{ fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.22em' }}>
            <span style={{ color: 'var(--green)', marginRight: 12 }}>◆</span>{x}
          </span>
        ))}
      </div>
    </section>
  );
};

const WhatWeDo = ({ setRoute }) => {
  const cards = [
    {
      num: '01', title: 'AI Systems',
      line: 'End-to-end AI systems that plug into your ops, not your demo deck.',
      body: 'We design, build and operate production AI systems — ingestion, reasoning, retrieval, action — integrated with your ERP, CRM, inbox and docs.',
      bullets: ['Retrieval + reasoning stacks', 'Production-grade evals', 'Private deployments, SOC-aware'],
      icon: 'grid',
    },
    {
      num: '02', title: 'Workflow Automation',
      line: 'Automations that close loops, not just fire webhooks.',
      body: 'Quoting, reconciliation, reporting, onboarding, procurement — automated with full audit trails and human-in-the-loop where it matters.',
      bullets: ['Accounts + reporting', 'Sales + commerce ops', 'Internal service desks'],
      icon: 'flow',
    },
    {
      num: '03', title: 'Applied AI Advisory',
      line: 'Strategy sessions for executives who need to make real calls.',
      body: 'Capability mapping, vendor selection, risk framing and build-vs-buy — delivered in weeks, not quarterly retainers.',
      bullets: ['AI readiness audits', 'Architecture reviews', 'Exec enablement'],
      icon: 'compass',
    },
    {
      num: '04', title: 'Community & Events',
      line: 'Convening practitioners through the Gauteng AI Community.',
      body: 'We’re active in the Gauteng AI Community (GAIC) — meetups, roundtables and field workshops that keep the conversation grounded in work that ships.',
      bullets: ['GAIC monthly builds', 'Enterprise roundtables', 'Field workshops'],
      icon: 'users',
    },
  ];

  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What we do</div>
            <h2 className="oblik" style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, letterSpacing: '-0.03em', textWrap: 'balance' }}>
              Four practices, one operating philosophy.
            </h2>
          </div>
          <p style={{ color: 'var(--fg-3)', fontSize: 15, maxWidth: 360, textWrap: 'pretty' }}>
            We don't sell AI by the hour. We ship systems that our clients depend on, measured by what they remove from the ops team's inbox.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--line)',
          border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden' }} className="do-grid">
          {cards.map((c, i) => (
            <div key={c.num} className="hover-lift" style={{
              background: 'var(--bg)', padding: '36px 32px',
              display: 'flex', flexDirection: 'column', minHeight: 340,
              position: 'relative'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.16em' }}>
                  {c.num} / 04
                </span>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  border: '1px solid var(--line-2)',
                  display: 'grid', placeItems: 'center', color: 'var(--green)'
                }}>
                  <Icon name={c.icon} size={18} />
                </div>
              </div>
              <h3 className="oblik" style={{ fontSize: 26, letterSpacing: '-0.02em', marginBottom: 10 }}>{c.title}</h3>
              <p style={{ color: 'var(--fg)', fontSize: 15.5, lineHeight: 1.55, marginBottom: 12, fontWeight: 500 }}>{c.line}</p>
              <p style={{ color: 'var(--fg-3)', fontSize: 14, lineHeight: 1.6, marginBottom: 20, textWrap: 'pretty' }}>{c.body}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8, marginTop: 'auto' }}>
                {c.bullets.map(b => (
                  <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-2)' }}>
                    <span style={{ width: 14, height: 1, background: 'var(--green)' }} />
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .do-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const SystemsShowcase = ({ setRoute }) => {
  const [active, setActive] = React.useState(0);
  const systems = [
    {
      tag: 'OPS INTELLIGENCE',
      name: 'Atlas / Ops Copilot',
      desc: 'A conversational ops layer over ERP, CRM and docs — answers questions, drafts reports, raises anomalies before they become issues.',
      aims: [
        'Reclaim ops hours spent on repeat questions',
        'Unify answers across disconnected systems',
        'Surface anomalies before they become incidents',
      ],
      stack: ['Private LLM', 'RAG', 'Postgres', 'Webhooks'],
      status: 'IN DESIGN',
    },
    {
      tag: 'COMMERCE AUTOMATION',
      name: 'Throughline / Quote-to-Cash',
      desc: 'Automated quoting, PO matching and reconciliation for distributors — built to collapse the manual finance cycle.',
      aims: [
        'Near-zero manual reconciliation',
        'Minutes, not days, on a new quote',
        'Auditable end-to-end trail',
      ],
      stack: ['Python', 'Sage / Xero', 'Vision OCR'],
      status: 'IN DESIGN',
    },
    {
      tag: 'KNOWLEDGE',
      name: 'Archive / Institutional Memory',
      desc: 'A private knowledge system for SOPs, contracts and field reports — queryable org-wide with permissioning that actually works.',
      aims: [
        'One place to ask, one place to find',
        'Policy-aware access for every tier',
        'Grounded answers with citations',
      ],
      stack: ['Vector store', 'SSO', 'Policy engine'],
      status: 'IN DESIGN',
    },
    {
      tag: 'SUPPORT',
      name: 'Lineup / Customer Copilot',
      desc: 'A front-line support copilot that drafts grounded replies, escalates with full context, and feeds product insight back to the team.',
      aims: [
        'Faster first responses',
        'Rich, context-aware escalations',
        'Closed-loop product feedback',
      ],
      stack: ['Freshdesk / Zendesk', 'RAG', 'Eval loop'],
      status: 'PLANNED',
    },
    {
      tag: 'XR + AI',
      name: 'Fieldview / Spatial Ops',
      desc: 'An XR + AI initiative pairing Quest-class headsets with AI agents for field inspection, training and remote ops guidance.',
      aims: [
        'Shorter time-to-competence for field teams',
        'Higher-throughput inspection workflows',
        'Expert-in-the-ear remote guidance',
      ],
      stack: ['WebXR', 'Agents', 'On-device STT'],
      status: 'RESEARCH',
    },
  ];

  const cur = systems[active];
  const statusColor = (s) => s === 'IN DESIGN' ? 'var(--green)' : s === 'PLANNED' ? 'var(--blue)' : 'var(--fg-3)';

  return (
    <section style={{ padding: '120px 0', borderTop: '1px solid var(--line)', background: 'var(--bg-1)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Roadmap / First systems</div>
            <h2 className="oblik" style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, letterSpacing: '-0.03em', textWrap: 'balance' }}>
              The systems we’re bringing to market.
            </h2>
            <p style={{ color: 'var(--fg-3)', fontSize: 15, lineHeight: 1.6, marginTop: 16, maxWidth: 560 }}>
              We’re a new division. These are the first AT systems in design — shipped through partner engagements in 2026.
            </p>
          </div>
          <button className="btn btn-secondary" onClick={() => setRoute('systems')}>
            See full roadmap <Icon name="arrowUpRight" size={14} />
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 32, alignItems: 'stretch' }} className="sys-grid">
          {/* Left: list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--line)',
            border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }}>
            {systems.map((s, i) => (
              <button key={s.name} onClick={() => setActive(i)} style={{
                background: i === active ? 'var(--bg-3)' : 'var(--bg)',
                padding: '18px 18px', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6,
                color: 'var(--fg)', transition: 'background 180ms'
              }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em',
                  color: i === active ? 'var(--green)' : 'var(--fg-4)' }}>
                  {String(i+1).padStart(2,'0')} · {s.tag}
                </span>
                <span style={{ fontSize: 15, fontWeight: 500 }}>{s.name}</span>
              </button>
            ))}
          </div>

          {/* Right: detail */}
          <div className="page-fade" key={active} style={{
            background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14,
            padding: '36px 36px', display: 'flex', flexDirection: 'column', minHeight: 440
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.18em' }}>{cur.tag}</span>
              <span className="mono" style={{
                fontSize: 10, color: statusColor(cur.status),
                letterSpacing: '0.18em', padding: '4px 10px', borderRadius: 999,
                border: `1px solid ${statusColor(cur.status)}`,
                opacity: 0.9
              }}>{cur.status}</span>
            </div>
            <h3 className="oblik" style={{ fontSize: 36, letterSpacing: '-0.025em', marginBottom: 14 }}>{cur.name}</h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 640, marginBottom: 28, textWrap: 'pretty' }}>{cur.desc}</p>

            <div style={{ marginBottom: 28 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>
                What it’s designed to do
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {cur.aims.map(a => (
                  <li key={a} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>
                    <span style={{ width: 14, height: 1, background: 'var(--green)', marginTop: 10, flexShrink: 0 }} />
                    {a}
                  </li>
                ))}
              </ul>
            </div>

            {/* Visual */}
            <div style={{ marginTop: 'auto' }}>
              <SpatialPlanes label={cur.name.toUpperCase()} hue={cur.status === 'PLANNED' ? '#00AFEF' : '#A2BB55'} />
              <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
                {cur.stack.map(s => (
                  <span key={s} className="mono" style={{
                    fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '0.12em',
                    padding: '5px 10px', borderRadius: 6, border: '1px solid var(--line)'
                  }}>{s}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .sys-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const GAICSection = ({ setRoute }) => {
  return (
    <section style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="spatial" style={{ bottom: -160, right: -140, width: 500, height: 500,
        background: 'radial-gradient(circle, rgba(162,187,85,0.18), transparent 70%)', opacity: 0.6 }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }} className="gaic-grid">
          <div>
            <a href="https://www.gaic.co.za" target="_blank" rel="noopener" className="eyebrow" style={{ marginBottom: 16, textDecoration: 'none' }}>Gauteng AI Community · GAIC</a>
            <h2 className="oblik" style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 24, textWrap: 'balance' }}>
              Builders, operators and executives —<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>in the same room, on the same problem.</em>
            </h2>
            <p style={{ color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.6, maxWidth: 560, marginBottom: 20, textWrap: 'pretty' }}>
              We’re active in the <strong style={{ color: 'var(--fg)' }}>Gauteng AI Community</strong> — meetups, builds and roundtables that keep the conversation grounded in what actually ships.
            </p>
            <p style={{ color: 'var(--fg-3)', fontSize: 14.5, lineHeight: 1.65, maxWidth: 560, marginBottom: 28 }}>
              Our next meetup is open to the community — RSVP on Luma.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="https://luma.com/z4r92yo3?tk=hEuUZ8" target="_blank" rel="noopener" className="btn btn-primary">
                RSVP on Luma <Icon name="arrowUpRight" size={14} />
              </a>
              <a href="https://www.gaic.co.za" target="_blank" rel="noopener" className="btn btn-secondary">
                Visit gaic.co.za <Icon name="arrowUpRight" size={14} />
              </a>
            </div>
          </div>

          {/* Event card */}
          <div style={{ position: 'relative' }}>
            <a href="https://luma.com/z4r92yo3?tk=hEuUZ8" target="_blank" rel="noopener" style={{
              display: 'block', textDecoration: 'none', color: 'inherit',
              background: 'var(--bg-1)', border: '1px solid var(--green)',
              borderRadius: 20, padding: 28,
              boxShadow: '0 40px 80px -40px rgba(0,0,0,0.7)'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--green)', letterSpacing: '0.22em' }}>
                  ◆ RSVP OPEN · GAIC MEETUP
                </span>
                <Icon name="calendar" size={16} style={{ color: 'var(--fg-3)' }} />
              </div>
              <h3 className="oblik" style={{ fontSize: 30, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 14 }}>
                Gauteng AI Community<br/>Meetup
              </h3>
              <div style={{ color: 'var(--fg-2)', fontSize: 14, display: 'grid', gap: 10, marginBottom: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="calendar" size={14} style={{ color: 'var(--fg-3)' }} />
                  Saturday · 25 April 2026 · 10:00 – 15:00 SAST
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="pin" size={14} style={{ color: 'var(--fg-3)' }} />
                  Gauteng · details on Luma
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="users" size={14} style={{ color: 'var(--fg-3)' }} />
                  Open to builders, operators and executives
                </div>
              </div>
              <div style={{ height: 1, background: 'var(--line)', margin: '8px 0 18px' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '0.18em' }}>
                  LUMA.COM/Z4R92YO3
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--green)', fontSize: 13, fontWeight: 500 }}>
                  RSVP <Icon name="arrowUpRight" size={13} />
                </span>
              </div>
            </a>
            <div style={{ position: 'absolute', top: -20, right: -20, zIndex: -1,
              width: 160, height: 160, border: '1px solid var(--line-2)', borderRadius: 20,
              transform: 'rotate(4deg)' }} />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .gaic-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const WhyAT = () => {
  const pillars = [
    {
      num: '01',
      title: 'Operational DNA from EARN.',
      body: 'AT is the technology subsidiary of the <strong>Enterprising Africa Regional Network</strong> (EARN) — a purpose-driven, for-profit South African group established in 2014, headquartered in Centurion. AT itself was founded in 2017. We inherit EARN’s operating values, engineering discipline and pan-African field footprint, and apply them specifically to AI and emerging-tech systems.',
    },
    {
      num: '02',
      title: 'XR and emerging tech, in-house.',
      body: 'Our roots in XR, hardware and spatial computing mean our AI work doesn’t stop at the screen. Agents, devices and environments are all on the table.',
    },
    {
      num: '03',
      title: 'Built for African realities.',
      body: 'Intermittent connectivity, local regulation, mixed-fluency users, tight budgets, high ambition. Our systems are engineered for the terrain, not the brochure.',
    },
    {
      num: '04',
      title: 'Execution over theory.',
      body: 'We measure our work by what runs next Monday — not by what could theoretically be possible. Every engagement produces a system you can point at.',
    },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }} className="why-grid">
          <div style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Why African Technopreneurs</div>
            <h2 className="oblik" style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 24, textWrap: 'balance' }}>
              A serious AI partner, <em style={{ fontStyle: 'italic', color: 'var(--green)' }}>not</em> another AI startup.
            </h2>
            <p style={{ color: 'var(--fg-3)', fontSize: 15, lineHeight: 1.65, maxWidth: 420 }}>
              What it takes to make AI useful inside a real business isn’t a model —
              it’s integration, governance, operational trust and follow-through.
              We’re a new division, with seasoned operating discipline behind us.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {pillars.map((p, i) => (
              <div key={p.num} style={{
                padding: '32px 0',
                borderTop: i === 0 ? 'none' : '1px solid var(--line)',
                display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24
              }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.18em', paddingTop: 6 }}>{p.num}</div>
                <div>
                  <h3 className="oblik" style={{ fontSize: 24, letterSpacing: '-0.02em', marginBottom: 10 }}>{p.title}</h3>
                  <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 560, textWrap: 'pretty' }}
                    dangerouslySetInnerHTML={{__html: p.body}} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .why-grid { grid-template-columns: 1fr !important; }
          .why-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
};

const CTASection = ({ setRoute }) => {
  return (
    <section style={{ padding: '40px 0 0' }}>
      <div className="container">
        <div style={{
          position: 'relative',
          background: 'var(--bg-1)', border: '1px solid var(--line-2)',
          borderRadius: 24, padding: 'clamp(36px, 6vw, 72px)',
          overflow: 'hidden'
        }}>
          <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.6 }} />
          <div className="spatial" style={{ top: '-30%', left: '-10%', width: 400, height: 400,
            background: 'radial-gradient(circle, rgba(162,187,85,0.25), transparent 70%)' }} />

          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}
            className="cta-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Next step</div>
              <h2 className="oblik" style={{ fontSize: 'clamp(32px, 4.4vw, 60px)', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 20, textWrap: 'balance' }}>
                Bring us a real problem.<br/>We’ll bring a system.
              </h2>
              <p style={{ color: 'var(--fg-2)', fontSize: 16.5, lineHeight: 1.6, maxWidth: 520, marginBottom: 28, textWrap: 'pretty' }}>
                We’re taking a small number of discovery conversations through the launch of the AI division.
                Drop us a line and tell us what you’re actually trying to do.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="mailto:info@africantechno.com" className="btn btn-primary">
                  info@africantechno.com <Icon name="arrow" size={14} />
                </a>
                <a href="https://luma.com/z4r92yo3?tk=hEuUZ8" target="_blank" rel="noopener" className="btn btn-secondary">
                  Meet us at GAIC <Icon name="arrowUpRight" size={14} />
                </a>
              </div>
            </div>
            <div style={{ display: 'grid', gap: 12 }}>
              {[
                { k: 'Email',    v: 'info@africantechno.com' },
                { k: 'Phone',    v: '+27 12 946 2665' },
                { k: 'HQ',       v: 'Centurion, Gauteng · ZA' },
                { k: 'Next',     v: 'GAIC meetup · 25 Apr 2026' },
              ].map(m => (
                <div key={m.k} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '16px 20px', background: 'var(--bg)', border: '1px solid var(--line)',
                  borderRadius: 12
                }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{m.k}</span>
                  <span style={{ fontSize: 14.5, color: 'var(--fg)', fontWeight: 500 }}>{m.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .cta-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

// Abstract hero image using systems mesh — also shown on home, as a section break
const SystemsMeshBand = () => (
  <section style={{ padding: '120px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--bg-1)' }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>System diagram · AT / CORE</div>
          <h3 className="oblik" style={{ fontSize: 'clamp(26px, 3vw, 36px)', letterSpacing: '-0.025em', maxWidth: 640, textWrap: 'balance' }}>
            Every AT engagement resolves into one picture: your data → our core → real-world actions.
          </h3>
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.18em' }}>FIG. 01</span>
      </div>
      <div style={{ position: 'relative', border: '1px solid var(--line)', borderRadius: 16, background: 'var(--bg)', overflow: 'hidden' }}>
        <div style={{ aspectRatio: '760 / 540', maxHeight: 540 }}>
          <SystemsMesh />
        </div>
      </div>
    </div>
  </section>
);

const HomePage = ({ setRoute, tweaks }) => (
  <div className="page-fade">
    <Hero setRoute={setRoute} headlineVariant={tweaks.headline} />
    <Marquee />
    <WhatWeDo setRoute={setRoute} />
    <SystemsMeshBand />
    <SystemsShowcase setRoute={setRoute} />
    <GAICSection setRoute={setRoute} />
    <WhyAT />
    <CTASection setRoute={setRoute} />
  </div>
);

Object.assign(window, { HomePage });