/* ────────────────────────────────────────────────────────── "How Matai Solves the Problem" Dark ocean-blue section between iceberg and What We Do. Continues the depth narrative: midnight → ocean → surface. ────────────────────────────────────────────────────────── */ const { useState, useEffect, useRef } = React; /* ─── Icon palette on dark ──────────────────────────────── pale champagne lines + ice highlights. Single-thickness, dotted orbit ring, gold tick markers. */ const ICE = '#D3DEE8'; // pale ice line const SOFT = '#D9C29A'; // pale champagne const GOLD = '#B89968'; // base champagne const RING = 'rgba(217,194,154,0.40)'; // dotted orbit function TargetIcon({ size = 92 }) { return ( ); } function ShieldCheckIcon({ size = 92 }) { return ( ); } function GrowthIcon({ size = 92 }) { return ( ); } /* ─── Background: subtle bubbles drifting upward ────────── Tiny pale-ice circles scattered across the section, each slowly rising with its own duration + delay. A faint depth falloff at the bottom keeps the section feeling submerged. */ const BUBBLES = [ // x%, y% (start), r, opacity, dur, delay [ 6, 88, 2.5, 0.55, 22, 0 ], [12, 62, 1.8, 0.38, 28, 3 ], [16, 94, 3.2, 0.42, 19, 6 ], [22, 74, 2.1, 0.48, 25, 1 ], [27, 40, 1.4, 0.32, 32, 4 ], [31, 86, 4.0, 0.50, 17, 9 ], [36, 58, 2.6, 0.40, 24, 2 ], [41, 82, 1.6, 0.36, 30, 11 ], [45, 30, 1.2, 0.28, 34, 7 ], [49, 70, 2.8, 0.46, 21, 5 ], [53, 90, 1.9, 0.40, 27, 8 ], [57, 50, 2.2, 0.42, 23, 13 ], [62, 78, 3.4, 0.52, 18, 10 ], [66, 34, 1.5, 0.30, 33, 2 ], [70, 64, 2.0, 0.40, 26, 6 ], [74, 92, 2.7, 0.46, 20, 14 ], [78, 46, 1.8, 0.34, 29, 4 ], [82, 80, 3.0, 0.48, 22, 12 ], [86, 56, 1.4, 0.30, 31, 1 ], [89, 84, 2.4, 0.44, 24, 8 ], [93, 38, 1.7, 0.32, 33, 5 ], [96, 72, 2.9, 0.46, 21, 11 ], [ 3, 50, 1.5, 0.30, 34, 15 ], [19, 22, 1.3, 0.26, 36, 9 ], [44, 14, 1.1, 0.24, 38, 13 ], [71, 18, 1.2, 0.26, 37, 6 ], [88, 24, 1.4, 0.28, 35, 10 ], ]; function OceanBubbles() { return ( <>
{BUBBLES.map(([x, y, r, o, dur, delay], i) => ( ))} {/* faint depth falloff toward the bottom */}
); } function HowMataiSolves() { const isMobile = useIsMobile(); const principles = [ { Icon: TargetIcon, label: 'Clarity on What Matters', body: 'We help you see where AI can create real value—aligned to strategy, not hype.' }, { Icon: ShieldCheckIcon, label: 'Built for Trust', body: 'We embed governance, risk management, and responsible AI into everything we build.' }, { Icon: GrowthIcon, label: 'Designed to Scale', body: 'Our solutions are architected to integrate, adapt, and deliver long-term impact.' }, ]; return (
{/* Intro */}
From AI Ambition to AI Adoption

Matai solves
the problem.

Agentic AI transformation requires more than deploying new technology. Organizations must understand their readiness, establish a clear transformation strategy, and build solutions that are trusted, governed, and scalable.

Matai addresses these challenges through a set of proprietary methodologies designed to guide organizations from assessment through implementation and operationalization.

{/* Principles */}
{principles.map((p, i) => (
0) ? '1px solid rgba(211,222,232,0.12)' : 'none', borderTop: (isMobile && i > 0) ? '1px solid rgba(211,222,232,0.12)' : 'none', display:'flex', flexDirection: isMobile ? 'row' : 'column', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? '20px' : '0', textAlign: isMobile ? 'left' : 'center', }}>
{!isMobile &&
}
{p.label}

{p.body}

))}
); } Object.assign(window, { HowMataiSolves });