const { useState, useEffect } = React;

// ========= MODULES =========
function Modules() {
  return (
    <section className="block" id="modules">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Core modules</div>
          <h2 className="section-h">A platform, not a <span className="serif grad-text">patchwork.</span></h2>
          <p className="section-lede">Nine tightly-integrated modules that replace your spreadsheets, screenshots, and group chats — so every team sees the same live truth.</p>
        </div>

        <div className="modules-grid">
          <div className="mod wide reveal">
            <div className="mod-ico">⌬</div>
            <div className="mod-h">Messenger Hub</div>
            <div className="mod-promise"><span className="grad-text">Every channel, one queue.</span></div>
            <ul className="mod-bullets">
              <li>Unified WhatsApp, Facebook & Instagram inbox</li>
              <li>Customer profile, assignments, SLAs, fast replies</li>
              <li>Internal notes and explicit ownership</li>
            </ul>
            <div className="mod-visual">
              <div className="fui-row"><span className="av">M</span><span className="txt">Marina · refund on #4421</span><span className="chip">WhatsApp</span></div>
              <div className="fui-row"><span className="av">A</span><span className="txt">Alex · pricing 200 units</span><span className="chip">IG DM</span></div>
              <div className="fui-row"><span className="av">T</span><span className="txt">Teo · billing issue</span><span className="chip">FB</span></div>
            </div>
          </div>

          <div className="mod wide reveal">
            <div className="mod-ico">⌁</div>
            <div className="mod-h">AI Signal Layer</div>
            <div className="mod-promise"><span className="grad-text">Every message read. Every risk flagged.</span></div>
            <ul className="mod-bullets">
              <li>Auto-tag churn risk, wrong promises, intent, urgency</li>
              <li>Complaint patterns & follow-up needs, in real time</li>
              <li>Arabic and English understanding, side by side</li>
            </ul>
            <div className="mod-visual">
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
                <span className="tag intent">buying_intent · 0.94</span>
                <span className="tag complaint">complaint · 0.87</span>
                <span className="tag urgent">urgent · 0.91</span>
                <span className="tag">wrong_promise · 0.79</span>
                <span className="tag followup">follow_up · 0.76</span>
              </div>
            </div>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">◫</div>
            <div className="mod-h">Orders & Ops</div>
            <div className="mod-promise"><span className="grad-text">Full order visibility, end to end.</span></div>
            <ul className="mod-bullets">
              <li>Live order flow & status</li>
              <li>Exceptions surface early</li>
              <li>Operational control, not chaos</li>
            </ul>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">▦</div>
            <div className="mod-h">Warehouse & Pick-Pack</div>
            <div className="mod-promise"><span className="grad-text">Pick accurately. Scan faster.</span></div>
            <ul className="mod-bullets">
              <li>Barcode scanning & pick lists</li>
              <li>Print slips & shipping labels</li>
              <li>Shortage alerts before they hurt</li>
            </ul>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">◈</div>
            <div className="mod-h">Shipping Tracker</div>
            <div className="mod-promise"><span className="grad-text">Real-time AWB visibility.</span></div>
            <ul className="mod-bullets">
              <li>Status across carriers</li>
              <li>Customer-facing update awareness</li>
              <li>Flags delayed shipments before complaints land</li>
            </ul>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">⎔</div>
            <div className="mod-h">Automations</div>
            <div className="mod-promise"><span className="grad-text">Trigger workflows from any signal.</span></div>
            <ul className="mod-bullets">
              <li>Message-, order-, and event-based triggers</li>
              <li>Webhooks, flows, and connectors</li>
              <li>n8n-compatible, no-code friendly</li>
            </ul>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">◉</div>
            <div className="mod-h">Customers 2.0 (CRM)</div>
            <div className="mod-promise"><span className="grad-text">The customer memory your team never had.</span></div>
            <ul className="mod-bullets">
              <li>RFM, LTV, churn risk</li>
              <li>Segmentation & smart targeting</li>
              <li>Full conversation & order history</li>
            </ul>
          </div>

          <div className="mod reveal">
            <div className="mod-ico">△</div>
            <div className="mod-h">Growth Campaigns</div>
            <div className="mod-promise"><span className="grad-text">Turn ops data into revenue.</span></div>
            <ul className="mod-bullets">
              <li>WhatsApp, Email, SMS campaigns</li>
              <li>Conversion tracking</li>
              <li>Repeat purchase analytics</li>
            </ul>
          </div>

          <div className="mod full reveal">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '32px', alignItems: 'center' }}>
              <div>
                <div className="mod-ico">⋔</div>
                <div className="mod-h">AI-Agent-Ready Layer</div>
                <div className="mod-promise"><span className="grad-text">Built for humans. Discoverable by AI.</span></div>
                <ul className="mod-bullets">
                  <li>REST API + typed OpenAPI schema</li>
                  <li>llms.txt for agent discovery</li>
                  <li>Scoped API keys & agent-friendly actions</li>
                </ul>
              </div>
              <div className="code-block">
                <span className="cm"># llms.txt</span><br />
                <span className="kw">Platform</span>: Nexus — AI-native Ops OS<br />
                <span className="kw">API</span>: <span className="str">https://api.nexus.app/v1</span><br />
                <span className="kw">Schema</span>: <span className="str">/openapi.json</span><br />
                <span className="kw">Actions</span>: orders.list, messages.reply,<br />
                &nbsp;&nbsp;shipments.track, customers.segment,<br />
                &nbsp;&nbsp;campaigns.send, automations.trigger
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ========= WHATSAPP SPOTLIGHT =========
function WhatsAppSpot() {
  return (
    <section className="block" id="whatsapp">
      <div className="wrap">
        <div className="spot-grid">
          <div className="reveal">
            <div className="section-label">WhatsApp, operationalized</div>
            <h2 className="section-h">WhatsApp is where the chaos starts. <span className="serif grad-text">Nexus is where structure begins.</span></h2>
            <p className="section-lede">Most of your sales, service, and order updates already happen on WhatsApp. But WhatsApp was built for chats, not operations. Nexus adds the missing layer — without asking your customers to change a thing.</p>
            <ul className="spot-list">
              <li><span className="idx">01</span><div><b>Unified inbox & routing</b><p>One queue across WhatsApp, FB, and IG — with SLA, ownership, and handoffs.</p></div></li>
              <li><span className="idx">02</span><div><b>Automation triggers</b><p>"Refund" escalates. "Quote" drafts a reply. "Where's my order" looks it up automatically.</p></div></li>
              <li><span className="idx">03</span><div><b>AI annotations</b><p>Every message tagged: urgency, intent, complaint, sentiment — Arabic and English.</p></div></li>
              <li><span className="idx">04</span><div><b>Faster replies, with context</b><p>Customer history, order status, and past issues are one click away.</p></div></li>
            </ul>
          </div>

          <div className="reveal">
            <div className="flow">
              <div className="flow-row">
                <div className="flow-node" style={{ flex: '0 0 auto', minWidth: '140px' }}>
                  <div className="label">Inbound</div>
                  <div className="val">"Need 200 units by Fri"</div>
                </div>
                <div className="flow-arrow">→</div>
                <div className="flow-node" style={{ flex: '0 0 auto' }}>
                  <div className="label">AI classify</div>
                  <div className="val grad-text">buying_intent</div>
                </div>
              </div>
              <div className="flow-branch">
                <div className="flow-node"><div className="label">Route</div><div className="val">Sales · Leo</div></div>
                <div className="flow-node"><div className="label">Draft</div><div className="val">Pricing reply v2</div></div>
              </div>
              <div style={{ height: '14px' }}></div>
              <div className="flow-branch">
                <div className="flow-node"><div className="label">SLA</div><div className="val">2h · countdown 01:47</div></div>
                <div className="flow-node"><div className="label">Follow-up</div><div className="val">Auto +48h</div></div>
              </div>
              <div style={{ height: '18px' }}></div>
              <div className="flow-node" style={{ background: 'rgba(255,255,255,0.04)', borderColor: 'var(--line-2)' }}>
                <div className="label">Outcome</div>
                <div className="val">Lead captured · conversation structured · SLA active</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ========= AI ANNOTATIONS =========
function AISpot() {
  const items = [
  { tag: <span className="tag urgent">urgency · high</span>, q: '"End of day or I need to cancel."', s: ['time_pressure', '0.93'] },
  { tag: <span className="tag intent">buying_intent</span>, q: '"Do you have volume pricing for 200+?"', s: ['sales_qualified', '0.94'] },
  { tag: <span className="tag complaint">complaint</span>, q: '"Third time this week same issue."', s: ['recurring_pain', '0.89'] },
  { tag: <span className="tag">wrong_promise</span>, q: '"Agent said it ships today — still waiting."', s: ['risk_flag', '0.86'] },
  { tag: <span className="tag followup">follow_up</span>, q: '"Let me check with my partner."', s: ['decision_pending', '0.82'] },
  { tag: <span className="tag">sentiment · negative</span>, q: '"هذا غير مقبول."', s: ['escalation_ar', '0.91'] },
  { tag: <span className="tag ok">resolved</span>, q: '"Perfect, thanks for fixing it."', s: ['csat_positive', '0.96'] },
  { tag: <span className="tag">theme · shipping</span>, q: '"Delivery is always late."', s: ['theme_cluster', '0.88'] }];

  return (
    <section className="block" id="ai">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">AI Signal Layer</div>
          <h2 className="section-h">Nexus reads every conversation <span className="serif grad-text">so your managers don't have to.</span></h2>
          <p className="section-lede">Urgency, sentiment, intent, complaint detection, follow-up needs, recurring themes, wrong-promise risks — surfaced in real time. Arabic and English, on the same model.</p>
        </div>
        <div className="ann-grid">
          {items.map((it, i) =>
          <div className="ann-chip reveal" key={i}>
              <div className="tag-top">{it.tag}</div>
              <div className="quote">{it.q}</div>
              <div className="sig"><span>{it.s[0]}</span><span>{it.s[1]}</span></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ========= OPS & FULFILLMENT =========
function Ops() {
  const [tab, setTab] = useState('orders');
  return (
    <section className="block" id="ops">
      <div className="wrap">
        <div className="ops-grid">
          <div className="reveal">
            <div className="section-label">Operations & fulfillment</div>
            <h2 className="section-h">Beyond messaging. <span className="serif grad-text">All the way to shipped.</span></h2>
            <p className="section-lede">Nexus doesn't stop at the inbox. Orders move through pick-pack, shipping, and delivery — all visible in one view, all connected to the conversations that started them.</p>
            <ul className="spot-list">
              <li><span className="idx">→</span><div><b>Pick-pack with barcodes</b><p>Scan-based workflows reduce mispicks to near zero.</p></div></li>
              <li><span className="idx">→</span><div><b>Shipping visibility</b><p>AWB-level tracking across carriers including Bosta and global providers.</p></div></li>
              <li><span className="idx">→</span><div><b>Internal coordination</b><p>Warehouse, sales, and CS all working from the same order truth.</p></div></li>
            </ul>
          </div>
          <div className="reveal">
            <div className="ops-dashboard">
              <div className="ops-tabs">
                <div className={'ops-tab' + (tab === 'orders' ? ' on' : '')} onClick={() => setTab('orders')}>ORDERS</div>
                <div className={'ops-tab' + (tab === 'pick' ? ' on' : '')} onClick={() => setTab('pick')}>PICK-PACK</div>
                <div className={'ops-tab' + (tab === 'ship' ? ' on' : '')} onClick={() => setTab('ship')}>SHIPPING</div>
              </div>
              {tab === 'orders' && <>
                <div className="ops-row"><span className="order-id">#4421</span><span className="cust">Marina R.</span><span className="stage"><span className="tag urgent">at-risk</span></span></div>
                <div className="ops-row"><span className="order-id">#4418</span><span className="cust">Alex K.</span><span className="stage"><span className="tag ok">paid</span></span></div>
                <div className="ops-row"><span className="order-id">#4417</span><span className="cust">Teo P.</span><span className="stage"><span className="tag">packed</span></span></div>
                <div className="ops-row"><span className="order-id">#4415</span><span className="cust">Sara A.</span><span className="stage"><span className="tag ok">shipped</span></span></div>
                <div className="ops-row"><span className="order-id">#4412</span><span className="cust">Omar F.</span><span className="stage"><span className="tag followup">followup</span></span></div>
              </>}
              {tab === 'pick' && <>
                <div className="ops-row"><span className="order-id">SKU-8842</span><span className="cust">Sneakers · Blk 42</span><span className="stage"><span className="tag ok">scanned</span></span></div>
                <div className="ops-row"><span className="order-id">SKU-2210</span><span className="cust">Hoodie · Gry L</span><span className="stage"><span className="tag ok">scanned</span></span></div>
                <div className="ops-row"><span className="order-id">SKU-7771</span><span className="cust">Cap · Navy</span><span className="stage"><span className="tag urgent">short</span></span></div>
                <div className="ops-row"><span className="order-id">SKU-4420</span><span className="cust">Tee · Wht M</span><span className="stage"><span className="tag">pending</span></span></div>
                <div className="ops-row"><span className="order-id">SKU-9910</span><span className="cust">Socks · 3pk</span><span className="stage"><span className="tag ok">scanned</span></span></div>
              </>}
              {tab === 'ship' && <>
                <div className="ops-row"><span className="order-id">AWB-29048</span><span className="cust">Out for delivery</span><span className="stage"><span className="tag followup">2h ETA</span></span></div>
                <div className="ops-row"><span className="order-id">AWB-29045</span><span className="cust">In transit · hub</span><span className="stage"><span className="tag">on-track</span></span></div>
                <div className="ops-row"><span className="order-id">AWB-29040</span><span className="cust">Delivered</span><span className="stage"><span className="tag ok">✓</span></span></div>
                <div className="ops-row"><span className="order-id">AWB-29038</span><span className="cust">Delayed · Bosta</span><span className="stage"><span className="tag urgent">+24h</span></span></div>
                <div className="ops-row"><span className="order-id">AWB-29030</span><span className="cust">Pickup scheduled</span><span className="stage"><span className="tag">prep</span></span></div>
              </>}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ========= CRM & GROWTH =========
function CRM() {
  return (
    <section className="block" id="crm">
      <div className="wrap">
        <div className="crm-grid">
          <div className="reveal">
            <div className="crm-card">
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '16px' }}>Customer intelligence</div>
              <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '4px' }}>Marina R.</div>
              <div style={{ fontSize: '12px', color: 'var(--fg-mute)', marginBottom: '18px', fontFamily: "'JetBrains Mono', monospace" }}>customer_id · CUS-00482 · 14 months</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '10px', marginBottom: '20px' }}>
                <div><div style={{ fontSize: '10px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace" }}>LTV</div><div style={{ fontSize: '22px', fontWeight: 500, letterSpacing: '-0.02em' }}>$2,180</div></div>
                <div><div style={{ fontSize: '10px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace" }}>RFM</div><div style={{ fontSize: '22px', fontWeight: 500, letterSpacing: '-0.02em' }}>4-3-5</div></div>
                <div><div style={{ fontSize: '10px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace" }}>Churn risk</div><div style={{ fontSize: '22px', fontWeight: 500, letterSpacing: '-0.02em', color: 'oklch(0.78 0.16 70)' }}>med</div></div>
              </div>
              <div style={{ fontSize: '11px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace", marginBottom: '8px' }}>RFM HEATMAP</div>
              <div className="rfm">
                {Array.from({ length: 25 }).map((_, i) => {
                  const v = Math.random();
                  let bg = 'rgba(255,255,255,0.04)';
                  if (i === 12) bg = 'var(--grad)';else
                  if (v > 0.7) bg = 'oklch(0.65 0.22 290 / 0.4)';else
                  if (v > 0.4) bg = 'oklch(0.65 0.22 290 / 0.18)';
                  return <span key={i} style={{ background: bg }}></span>;
                })}
              </div>
              <div style={{ marginTop: '20px', fontSize: '11px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace", marginBottom: '8px' }}>SEGMENTS</div>
              <div className="seg-row"><span>High-intent repeat</span><span className="cnt">1,284</span></div>
              <div className="seg-row"><span>Churn risk (30d)</span><span className="cnt">412</span></div>
              <div className="seg-row"><span>Re-engage · Arabic</span><span className="cnt">906</span></div>
            </div>
          </div>
          <div className="reveal">
            <div className="section-label">CRM & growth</div>
            <h2 className="section-h">From operations into <span className="serif grad-text">revenue.</span></h2>
            <p className="section-lede">Every conversation, order, and interaction feeds a living customer profile. Segment it. Score it. Send campaigns on WhatsApp, Email, or SMS. Measure the repeat revenue you earn back.</p>
            <ul className="spot-list">
              <li><span className="idx">→</span><div><b>Customers 2.0</b><p>RFM, LTV, churn risk, and full memory — on every customer, every channel.</p></div></li>
              <li><span className="idx">→</span><div><b>Segmentation & targeting</b><p>Build smart segments from behavior, not guesswork.</p></div></li>
              <li><span className="idx">→</span><div><b>Campaigns that measure</b><p>WhatsApp, Email, and SMS with conversion and repeat-purchase analytics.</p></div></li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

// ========= SOLUTIONS =========
function Solutions() {
  const [tab, setTab] = useState('ops');
  const data = {
    ops: [
    { h: 'Reduce coordination chaos', p: 'Ops, CS, and warehouse working from one live truth — no more screenshot threads.', m: 'coord. overhead: ↓ 56%' },
    { h: 'Track status clearly', p: 'Every order, shipment, and conversation in one view.', m: 'structured coverage: 100%' },
    { h: 'Connect teams faster', p: 'Handoffs are explicit. Ownership is visible. Nothing falls through.', m: 'handoff errors: ↓ 88%' }],

    cs: [
    { h: 'Detect issues earlier', p: 'Sentiment and complaint flags surface before quiet frustration escalates.', m: 'early-detect rate: 3.2×' },
    { h: 'See customer context', p: 'Past orders, conversations, and risk scores — one click away.', m: 'resolution time: ↓ 42%' },
    { h: 'Reduce missed complaints', p: 'Every urgent message routes to the right person with an SLA.', m: 'missed cases: ↓ 71%' }],

    sales: [
    { h: 'Spot buying intent', p: 'AI flags qualified leads the moment a question signals purchase.', m: 'detect: < 30s avg' },
    { h: 'Reduce missed leads', p: 'Follow-ups, auto-drafts, and ownership close the gaps that cost deals.', m: 'missed leads: ↓ 64%' },
    { h: 'Follow up with context', p: 'Every conversation and order history, instantly searchable.', m: 'time-to-reply: ↓ 71%' }],

    ecom: [
    { h: 'Shopify & Woo, connected', p: 'Orders, customers, and products live in sync across the platform.', m: 'sync latency: seconds' },
    { h: 'Campaign-driven repeats', p: 'Turn one-time buyers into repeat revenue with targeted sends.', m: 'repeat rate: ↑ 2.1×' },
    { h: 'WhatsApp commerce', p: 'Conversational checkout paths that convert without friction.', m: 'cart recovery: ↑ 38%' }],

    wh: [
    { h: 'Pick accurately', p: 'Scan-based workflows catch errors before they ship.', m: 'mispicks: ↓ 93%' },
    { h: 'Scan faster', p: 'Barcode pick lists, print slips, labels — one flow.', m: 'pick time: ↓ 40%' },
    { h: 'Reduce shipping mistakes', p: 'Shortage alerts and label validation, before the courier arrives.', m: 'returns: ↓ 28%' }],

    mgmt: [
    { h: 'Gain visibility', p: 'See what\'s happening across hundreds of conversations and orders — without reading any of them.', m: 'audit time: ↓ 80%' },
    { h: 'Identify recurring issues', p: 'Patterns surface as trends, not surprises.', m: 'pattern-to-action: 5d → 4h' },
    { h: 'Measure performance', p: 'Team-level metrics, SLAs, and customer signals in one dashboard.', m: 'decision cycle: ↓ 3×' }]

  };
  const tabs = [
  ['ops', 'Operations'], ['cs', 'Customer Service'], ['sales', 'Sales'],
  ['ecom', 'Ecommerce'], ['wh', 'Warehouse'], ['mgmt', 'Management']];

  return (
    <section className="block" id="solutions">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Solutions by role</div>
          <h2 className="section-h">One platform. <span className="serif grad-text">Wins for every team.</span></h2>
          <p className="section-lede">Whether you're closing deals, serving customers, running the warehouse, or running the whole company — Nexus gives you the visibility and automation you need to stop firefighting.</p>
        </div>
        <div className="sol-tabs">
          {tabs.map(([k, label]) =>
          <button key={k} className={'sol-tab' + (tab === k ? ' active' : '')} onClick={() => setTab(k)}>{label}</button>
          )}
        </div>
        <div className="sol-panel">
          {data[tab].map((b, i) =>
          <div className="sol-benefit" key={i}>
              <div className="b-h">{b.h}</div>
              <div className="b-p">{b.p}</div>
              <div className="b-metric">{b.m}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ========= WHY =========
function Why() {
  const items = [
  { h: 'Fast setup', p: 'Connect your stack and be live the same afternoon. No rip-and-replace.' },
  { h: 'No credit card required', p: 'Full 14-day trial. Every feature, no gate, no surprises.' },
  { h: 'Clear ROI', p: 'Fewer missed leads. Faster replies. Lower return rates. Measurable on day one.' },
  { h: 'Arabic-first & MENA-ready', p: 'Built from day one for bilingual teams and regional workflows.' },
  { h: 'Works with your stack', p: 'Shopify, WooCommerce, WhatsApp Business, Bosta, Issabel, n8n — already wired.' },
  { h: 'Serious use cases', p: 'From a 5-person brand to a 500-person ops org — without rebuilding.' },
  { h: 'Commerce + fulfillment + comms', p: 'Orders, pick-pack, shipping, and conversations in one platform.' },
  { h: 'Built for real teams', p: 'Not a demo-only dashboard. A product that holds up on a bad Monday.' }];

  return (
    <section className="block" id="why">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Why teams pick Nexus</div>
          <h2 className="section-h">Built for the way <span className="serif grad-text">your business actually runs.</span></h2>
        </div>
        <div className="why-grid">
          {items.map((it, i) =>
          <div className="why-card reveal" key={i}>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ========= TRUST =========
function Trust() {
  return (
    <section className="block" id="trust">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Credibility & scale</div>
          <h2 className="section-h">Built for ecommerce SMEs. <span className="serif grad-text">Trusted by teams across MENA.</span></h2>
        </div>
        <div className="trust-grid">
          <div className="reveal">
            <p className="section-lede" style={{ marginBottom: '28px' }}>A serious platform for serious operations — with data isolation, multi-tenant architecture, and a roadmap built alongside the teams running real businesses on it every day.</p>
            <ul className="spot-list">
              <li><span className="idx">✓</span><div><b>Built for ecommerce SMEs</b><p>From local brands to regional operators — scales with you, not against you.</p></div></li>
              <li><span className="idx">✓</span><div><b>Built for Egypt & MENA teams</b><p>Arabic-first UI, regional carriers, PBX integrations, and currency support out of the box.</p></div></li>
              <li><span className="idx">✓</span><div><b>Secure, multi-tenant architecture</b><p>Data isolation, encryption in transit, role-based access, SOC 2 Type II in progress.</p></div></li>
            </ul>
          </div>
          <div className="trust-stats reveal">
            <div className="trust-stat"><div className="big"><span className="grad-text">50k+</span></div><div className="sm">Orders processed</div></div>
            <div className="trust-stat"><div className="big"><span className="serif grad-text">200k+</span></div><div className="sm">Messages handled</div></div>
            <div className="trust-stat"><div className="big"><span className="grad-text">30+</span></div><div className="sm">Organizations running on Nexus</div></div>
            <div className="trust-stat"><div className="big"><span className="serif grad-text">99.9%</span></div><div className="sm">Platform uptime</div></div>
          </div>
        </div>
        <div className="logo-strip reveal">
          <div className="logo-slot">ECOM · BRAND</div>
          <div className="logo-slot">RETAIL · CO</div>
          <div className="logo-slot">B2B · OPS</div>
          <div className="logo-slot">SERVICE · GROUP</div>
          <div className="logo-slot">LOGISTICS · LTD</div>
        </div>
      </div>
    </section>);

}

// ========= AI READY =========
function AIReady() {
  return (
    <section className="block" id="ai-ready">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Built for humans. Discoverable by AI.</div>
          <h2 className="section-h">An <span className="serif grad-text">agent-ready</span> operations platform.</h2>
          <p className="section-lede">Machine-readable APIs, OpenAPI schemas, and an llms.txt manifest so autonomous agents can discover, act, and extend Nexus safely — under your policies, with your keys.</p>
        </div>
        <div className="airead reveal">
          <div>
            <ul className="spot-list" style={{ marginTop: 0 }}>
              <li><span className="idx">→</span><div><b>REST APIs, clean and typed</b><p>Every core resource — messages, orders, customers, shipments — exposed with versioning.</p></div></li>
              <li><span className="idx">→</span><div><b>OpenAPI schema</b><p>Generate SDKs, validate payloads, and let agents reason about endpoints.</p></div></li>
              <li><span className="idx">→</span><div><b>llms.txt manifest</b><p>A standard, agent-readable description of what Nexus does and how to interact.</p></div></li>
              <li><span className="idx">→</span><div><b>Scoped API keys</b><p>Per-integration keys, per-agent policies, audit logs — production-grade safety.</p></div></li>
            </ul>
          </div>
          <div className="code-block">
            <span className="cm">$ curl https://api.nexus.app/v1/messages</span><br />
            <span className="cm">  -H "Authorization: Bearer $NEXUS_KEY"</span><br /><br />
            {'{'}<br />
            &nbsp;&nbsp;<span className="kw">"id"</span>: <span className="str">"msg_01H..."</span>,<br />
            &nbsp;&nbsp;<span className="kw">"channel"</span>: <span className="str">"whatsapp"</span>,<br />
            &nbsp;&nbsp;<span className="kw">"annotations"</span>: [<br />
            &nbsp;&nbsp;&nbsp;&nbsp;{'{'} <span className="kw">"type"</span>:<span className="str">"intent"</span>, <span className="kw">"value"</span>:<span className="str">"buy"</span>, <span className="kw">"conf"</span>:0.94 {'}'},<br />
            &nbsp;&nbsp;&nbsp;&nbsp;{'{'} <span className="kw">"type"</span>:<span className="str">"urgency"</span>, <span className="kw">"value"</span>:<span className="str">"high"</span>, <span className="kw">"conf"</span>:0.91 {'}'}<br />
            &nbsp;&nbsp;],<br />
            &nbsp;&nbsp;<span className="kw">"customer"</span>: {'{'} <span className="kw">"id"</span>:<span className="str">"CUS-00482"</span>, <span className="kw">"ltv"</span>:2180 {'}'},<br />
            &nbsp;&nbsp;<span className="kw">"suggested_actions"</span>: [<span className="str">"route:sales"</span>, <span className="str">"draft_reply"</span>]<br />
            {'}'}
          </div>
        </div>
      </div>
    </section>);

}

// ========= PRICING =========
function Pricing() {
  return (
    <section className="block" id="pricing">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Pricing</div>
          <h2 className="section-h">Start free for 14 days. <span className="serif grad-text">Pay only when it's earning.</span></h2>
          <p className="section-lede">Full access during trial. No credit card required. Larger teams can book a demo for a guided onboarding.</p>
        </div>
        <div className="pricing-grid">
          <div className="plan trial reveal">
            <div className="plan-name">Free trial</div>
            <div className="plan-price">14 days<span className="per"> · full access</span></div>
            <div className="plan-for">Explore every module on real data. No credit card.</div>
            <ul className="plan-list">
              <li>All modules unlocked</li>
              <li>Guided onboarding option</li>
              <li>Keep your data on export</li>
              <li>No commitment</li>
            </ul>
            <a href="https://nexus.aiforstartups.io" className="btn btn-ghost">Start free trial</a>
          </div>

          <div className="plan reveal">
            <div className="plan-name">Starter</div>
            <div className="plan-price">$99<span className="per"> / mo</span></div>
            <div className="plan-for">Small teams starting to operate.</div>
            <ul className="plan-list">
              <li>CRM, orders, messaging</li>
              <li>Shopify sync</li>
              <li>Essential workflows</li>
              <li>Email support</li>
            </ul>
            <a href="https://nexus.aiforstartups.io" className="btn btn-ghost">Choose Starter</a>
          </div>

          <div className="plan featured reveal">
            <div className="plan-name">Growth</div>
            <div className="plan-price">$199<span className="per"> / mo</span></div>
            <div className="plan-for">Scaling operations across teams.</div>
            <ul className="plan-list">
              <li>Unlimited orders</li>
              <li>Higher message limits</li>
              <li>Unlimited warehouses</li>
              <li>VoIP / PBX integration</li>
              <li>n8n workflows</li>
              <li>Advanced admin control</li>
            </ul>
            <a href="https://nexus.aiforstartups.io" className="btn btn-primary">Choose Growth</a>
          </div>

          <div className="plan reveal">
            <div className="plan-name">Scale</div>
            <div className="plan-price">$599<span className="per"> / mo</span></div>
            <div className="plan-for">Advanced AI & custom workflows.</div>
            <ul className="plan-list">
              <li>AI sentiment & transcription</li>
              <li>Embeddings & AI CS dashboards</li>
              <li>Custom integrations</li>
              <li>Guided onboarding</li>
              <li>SLA-backed support</li>
              <li>Optional AI agents add-on</li>
            </ul>
            <a href="mailto:info@aiforstartups.io" className="btn btn-ghost">Talk to sales</a>
          </div>
        </div>
        <div style={{ marginTop: '28px', fontSize: '13px', color: 'var(--fg-mute)', fontFamily: "'JetBrains Mono', monospace", textAlign: 'center' }}>Trial applies before paid conversion · Larger team? <a href="mailto:info@aiforstartups.io" style={{ color: 'var(--fg)', textDecoration: 'underline' }}>Book a demo</a></div>
      </div>
    </section>);

}

// ========= FAQ =========
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  ['What is Nexus?', 'Nexus is an AI-native operations platform for ecommerce and communication-heavy businesses. It unifies orders, inventory, messaging, shipping, CRM, and growth — with an AI signal layer that reads every conversation and operational event.'],
  ['Is Nexus only for WhatsApp?', 'No. WhatsApp is a popular entry point, but Nexus covers the full operating stack: orders, warehouse, shipping, CRM, campaigns, and multi-channel messaging (WhatsApp, Facebook, Instagram, and more).'],
  ['How long does setup take?', 'Most teams go live in a single afternoon. Connect your channels and stores, invite your team, and start seeing structured signal right away. No developer or integration project required.'],
  ['Does Nexus support Arabic?', 'Yes — Arabic-first from day one. AI annotations work in Arabic and English, the UI is fully localized, and regional carriers and PBX integrations are supported out of the box.'],
  ['What integrations are available?', 'WhatsApp Business, Facebook Messenger, Instagram DMs, Shopify, WooCommerce, Bosta, Issabel PBX, n8n, plus REST APIs and webhooks for anything else.'],
  ['Is my data secure?', 'Nexus runs on a secure multi-tenant architecture with data isolation, encryption in transit, role-based access, and scoped API keys. SOC 2 Type II is in progress.'],
  ['Can AI agents use Nexus?', 'Yes. REST APIs, OpenAPI schemas, and an llms.txt manifest make Nexus discoverable and operable by autonomous agents — under your keys and policies.'],
  ['What happens during the 14-day trial?', 'Full access to every feature, no credit card required. Connect your channels, run real conversations and orders through the platform, and walk away with your data if it is not a fit.']];

  return (
    <section className="block" id="faq">
      <div className="wrap" style={{ maxWidth: '960px' }}>
        <div className="reveal">
          <div className="section-label">FAQ</div>
          <h2 className="section-h">Questions, <span className="serif grad-text">straight answers.</span></h2>
        </div>
        <div className="faq-list">
          {items.map(([q, a], i) =>
          <div className={'faq-item' + (open === i ? ' open' : '')} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">{q} <span className="caret2">+</span></div>
              <div className="faq-a">{a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ========= FINAL CTA =========
function FinalCTA() {
  return (
    <section id="cta" className="wrap">
      <div className="final-cta reveal">
        <h2>From chat chaos<br />to <span className="serif grad-text">shipped.</span></h2>
        <p>Unify your orders, conversations, shipping, and growth on one platform. Go live in an afternoon. Pay only when it's earning its keep.</p>
        <div className="hero-cta">
          <a href="https://nexus.aiforstartups.io" className="btn btn-primary btn-lg">Start your 14-day free trial <span aria-hidden="true">→</span></a>
          <a href="mailto:info@aiforstartups.io" className="btn btn-ghost btn-lg">Book a demo</a>
          <a href="https://wa.me/201040030090" className="btn btn-ghost btn-lg">WhatsApp us</a>
        </div>
        <div className="hero-trust" style={{ justifyContent: 'center', marginTop: '28px' }}>
          <span><span className="check">✓</span> No credit card</span>
          <span><span className="check">✓</span> Full access · 14 days</span>
          <span><span className="check">✓</span> Arabic-first</span>
          <span><span className="check">✓</span> Cancel anytime</span>
        </div>
      </div>
    </section>);

}

// ========= BLOG =========
function Blog() {
  const posts = [
    {
      date: 'April 20, 2026',
      title: 'What an AI Agent Actually Does When You Give It Access to Your E-commerce Operations',
      excerpt: 'We gave an AI agent full MCP access to a real e-commerce operation. Here\'s what happened in the first 24 hours.',
      url: 'https://aiforstartups.io/blog/what-an-ai-agent-actually-does-ecommerce-ops',
      tags: ['AI Agents', 'E-commerce', 'Operations'],
    },
    {
      date: 'April 15, 2026',
      title: 'The Future of SaaS Isn\'t Selling to Humans. It\'s Selling to Their Agents.',
      excerpt: 'The future of SaaS isn\'t selling to humans — it\'s selling to their AI agents.',
      url: 'https://aiforstartups.io/blog/the-future-of-saas-selling-to-agents',
      tags: ['SaaS', 'AI Agents', 'MCP'],
    },
    {
      date: 'March 26, 2026',
      title: 'The Agent Pricing Model: Why We Made Our Free Tier Read-Only',
      excerpt: 'Most SaaS free tiers are limited by seat count or feature flags. We took a different approach.',
      url: 'https://aiforstartups.io/blog/agent-pricing-model-read-only-free-tier',
      tags: ['SaaS', 'Pricing', 'AI Agents'],
    },
    {
      date: 'March 26, 2026',
      title: 'Why We Ditched 6 APIs and Built One MCP Server for Our Entire Ecommerce Stack',
      excerpt: 'Managing 6 separate APIs was killing our AI agent workflows.',
      url: 'https://aiforstartups.io/blog/one-mcp-server-entire-ecommerce-stack',
      tags: ['MCP', 'AI Agents', 'API'],
    },
    {
      date: 'March 25, 2026',
      title: 'How I Built an Agent-Native SaaS Platform in One Night',
      excerpt: 'How we made Nexus fully accessible to AI agents in under 3 hours.',
      url: 'https://aiforstartups.io/blog/agent-native-saas-one-night',
      tags: ['MCP', 'AI Agents', 'SaaS'],
    },
  ];

  return (
    <section className="block" id="blog">
      <div className="wrap">
        <div className="reveal">
          <div className="section-label">Blog</div>
          <h2 className="section-h">Insights on <span className="serif grad-text">AI-native operations.</span></h2>
          <p className="section-lede">Thoughts on AI agents, ecommerce ops, and the future of communication-heavy businesses.</p>
        </div>
        <div className="blog-grid">
          {posts.map((post, i) =>
            <a className="blog-card reveal" href={post.url} key={i} target="_blank" rel="noopener noreferrer">
              <div className="blog-date">{post.date}</div>
              <div className="blog-title">{post.title}</div>
              <div className="blog-excerpt">{post.excerpt}</div>
              <div className="blog-tags">{post.tags.map((t, j) => <span className="blog-tag" key={j}>{t}</span>)}</div>
            </a>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: '40px' }}>
          <a href="https://aiforstartups.io/blog" className="btn btn-ghost" target="_blank" rel="noopener noreferrer">View all posts →</a>
        </div>
      </div>
    </section>);

}

// ========= FOOTER =========
function Footer() {
  return (
    <footer id="company">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand" style={{ marginBottom: '14px' }}>
              <img src="assets/logo.png" alt="Nexus" />
              <span>Nexus <span className="sub">by AiForStartups</span></span>
            </div>
            <p style={{ color: 'var(--fg-dim)', fontSize: '14px', maxWidth: '320px', lineHeight: 1.55, margin: 0 }}>The AI-native Ops OS for ecommerce and communication-heavy businesses.</p>
          </div>
          <div className="footer-col">
            <h4>Platform</h4>
            <a href="#modules">Messenger Hub</a>
            <a href="#modules">AI Signal Layer</a>
            <a href="#modules">Orders</a>
            <a href="#modules">Warehouse</a>
            <a href="#modules">Shipping</a>
            <a href="#modules">Automations</a>
            <a href="#modules">CRM</a>
            <a href="#modules">Growth</a>
          </div>
          <div className="footer-col">
            <h4>Solutions</h4>
            <a href="#solutions">Operations</a>
            <a href="#solutions">Customer Service</a>
            <a href="#solutions">Sales</a>
            <a href="#solutions">Ecommerce</a>
            <a href="#solutions">Warehouse</a>
            <a href="#solutions">Management</a>
          </div>
          <div className="footer-col">
            <h4>Developers</h4>
            <a href="https://nexus-docs.aiforstartups.io/" target="_blank" rel="noopener noreferrer">Docs</a>
            <a href="#ai-ready">API access</a>
            <a href="#ai-ready">OpenAPI</a>
            <a href="#ai-ready">llms.txt</a>
            <a href="#ai-ready">Webhooks</a>
            <a href="#ai-ready">n8n</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="https://aiforstartups.io/blog" target="_blank" rel="noopener noreferrer">Blog</a>
            <a href="#">About</a>
            <a href="#">Customers</a>
            <a href="#">Careers</a>
            <a href="mailto:info@aiforstartups.io">Contact</a>
            <a href="https://wa.me/201040030090">WhatsApp us</a>
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 AiForStartups · Nexus · Cairo, Egypt</span>
          <span>
            <a href="mailto:info@aiforstartups.io" style={{ color: 'inherit', textDecoration: 'underline' }}>info@aiforstartups.io</a>
            {' · '}
            <a href="https://wa.me/201040030090" style={{ color: 'inherit', textDecoration: 'underline' }}>+20 104 003 0090</a>
            {' · '}
            <a href="privacy.html" style={{ color: 'inherit', textDecoration: 'underline' }}>Privacy</a>
            {' · '}
            <a href="terms.html" style={{ color: 'inherit', textDecoration: 'underline' }}>Terms</a>

          </span>
        </div>
      </div>
    </footer>);

}

// MOUNT
const mounts = [
['modules-root', Modules],
['whatsapp-root', WhatsAppSpot],
['ai-root', AISpot],
['ops-root', Ops],
['crm-root', CRM],
['solutions-root', Solutions],
['why-root', Why],
['trust-root', Trust],
['airready-root', AIReady],
['pricing-root', Pricing],
['faq-root', FAQ],
['cta-root', FinalCTA],
['blog-root', Blog],
['footer-root', Footer]];

mounts.forEach(([id, Comp]) => {
  const el = document.getElementById(id);
  if (el) ReactDOM.createRoot(el).render(<Comp />);
});

// reveal on scroll — rerun after mount
setTimeout(() => {
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}});
  }, { threshold: 0.08, rootMargin: '0px 0px -50px 0px' });
  document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
}, 300);