/* ──────────────────────────────────────────────────────────
   "What sets us apart" — bento with 4 tiles + centered title.
   Colored: Six-Pillar Framework (top-right) + 5×5 Readiness
   Diagnostics (bottom-left).
   ────────────────────────────────────────────────────────── */
const { useState, useEffect, useRef, useMemo } = React;

/* ─── Tile graphics ──────────────────────────────────────── */

function NetworkGraphic({ active, dark }) {
  // Symmetrical concentric orbits — "specialization" reads as focus,
  // not chaos. Two rings, evenly spaced nodes, glowing central core.
  const cx = 80, cy = 60;
  const ringStroke = dark ? 'rgba(217,194,154,0.35)' : 'rgba(20,24,31,0.20)';
  const spoke      = dark ? 'rgba(217,194,154,0.22)' : 'rgba(20,24,31,0.14)';
  const node       = dark ? '#F5E7C7' : 'var(--ink)';
  const glow       = dark ? 'rgba(217,194,154,0.55)' : 'rgba(184,153,104,0.45)';
  const core       = dark ? '#D9C29A' : 'var(--gold-deep)';

  const nodesA = Array.from({ length: 6 }, (_, i) => {
    const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
    return { x: cx + Math.cos(a) * 28, y: cy + Math.sin(a) * 28 };
  });
  const nodesB = Array.from({ length: 8 }, (_, i) => {
    const a = (i / 8) * Math.PI * 2 - Math.PI / 2 + Math.PI / 8;
    return { x: cx + Math.cos(a) * 42, y: cy + Math.sin(a) * 42 };
  });

  return (
    <svg viewBox="34 14 92 92" width="100%" height="100%">
      <g style={{
        transformOrigin:`${cx}px ${cy}px`,
        transform: active ? 'rotate(20deg)' : 'rotate(0deg)',
        transition:'transform 1.8s cubic-bezier(.2,.7,.2,1)',
      }}>
        <circle cx={cx} cy={cy} r="28" fill="none" stroke={ringStroke} strokeWidth="0.6"/>
        <circle cx={cx} cy={cy} r="42" fill="none" stroke={ringStroke} strokeWidth="0.6"
          strokeDasharray="1.5 3"/>

        {nodesA.map((p, i) => (
          <line key={'s'+i} x1={cx} y1={cy} x2={p.x} y2={p.y}
            stroke={spoke} strokeWidth="0.4"/>
        ))}

        {nodesA.map((p, i) => (
          <g key={'a'+i}>
            <circle cx={p.x} cy={p.y} r={active ? 5 : 0} fill={glow}
              style={{ transition:`r .7s ${i*0.05}s` }}/>
            <circle cx={p.x} cy={p.y} r="2.2" fill={node}/>
          </g>
        ))}

        {nodesB.map((p, i) => (
          <circle key={'b'+i} cx={p.x} cy={p.y} r="1.3"
            fill={node} opacity={active ? 0.95 : 0.55}
            style={{ transition:`opacity .6s ${i*0.04}s` }}/>
        ))}
      </g>

      <circle cx={cx} cy={cy} r={active ? 6 : 4} fill={core}
        style={{ transition:'r .5s' }}/>
      <circle cx={cx} cy={cy} r={active ? 11 : 8} fill={glow} opacity="0.35"
        style={{ transition:'r .6s' }}/>
    </svg>
  );
}

function HexPillarsGraphic({ active, dark }) {
  // Six Greek-style pillars. At rest: a uniform short height.
  // On hover: each pillar rises to its target height with a staggered
  // delay, forming a smooth arch (taller in the middle).
  const pillarCount = 6;
  const baseY   = 100;          // ground line
  const minTop  = 78;           // resting top y
  const targetTops = [50, 34, 22, 26, 38, 54];  // arch
  const pillarW = 11;
  const gap     = 4;
  const totalW  = pillarCount * pillarW + (pillarCount - 1) * gap;
  const startX  = 80 - totalW / 2;

  const shaft  = dark ? 'rgba(217,194,154,0.85)' : 'var(--ink)';
  const cap    = dark ? '#F5E7C7' : 'var(--ink)';
  const flute  = dark ? 'rgba(7,16,27,0.45)'    : 'rgba(255,255,255,0.35)';
  const ground = dark ? 'rgba(217,194,154,0.50)' : 'rgba(20,24,31,0.35)';
  const accent = dark ? '#D9C29A'                : 'var(--gold-deep)';

  const ease = 'cubic-bezier(.2,.7,.2,1)';

  return (
    <svg viewBox="30 12 100 100" width="100%" height="100%">
      {/* ground line */}
      <line x1={startX - 6} y1={baseY + 4} x2={startX + totalW + 6} y2={baseY + 4}
        stroke={ground} strokeWidth="0.7"/>

      {Array.from({ length: pillarCount }).map((_, i) => {
        const x = startX + i * (pillarW + gap);
        const topY = active ? targetTops[i] : minTop;
        const capH = 4;
        const baseH = 4;
        const shaftY = topY + capH;
        const shaftH = Math.max(0, baseY - baseH - shaftY);
        const delay = `${i * 0.06}s`;
        const tr = `.7s ${ease} ${delay}`;

        return (
          <g key={i}>
            {/* shaft */}
            <rect x={x} y={shaftY} width={pillarW} height={shaftH}
              fill={shaft}
              style={{ transition:`y ${tr}, height ${tr}` }}/>

            {/* fluting — thin vertical lines on the shaft */}
            {[0.28, 0.5, 0.72].map((p, j) => (
              <line key={j}
                x1={x + pillarW * p} y1={shaftY + 1}
                x2={x + pillarW * p} y2={baseY - baseH - 1}
                stroke={flute} strokeWidth="0.5"
                style={{ transition:`y1 ${tr}` }}/>
            ))}

            {/* capital */}
            <rect x={x - 1.5} y={topY} width={pillarW + 3} height={capH}
              fill={cap}
              style={{ transition:`y ${tr}` }}/>
            {/* gold accent line atop the capital */}
            <rect x={x - 0.5} y={topY - 1.2} width={pillarW + 1} height={1.2}
              fill={accent} opacity={active ? 1 : 0.55}
              style={{ transition:`y ${tr}, opacity .5s ${delay}` }}/>

            {/* base */}
            <rect x={x - 1.5} y={baseY - baseH}
              width={pillarW + 3} height={baseH} fill={cap}/>
          </g>
        );
      })}
    </svg>
  );
}

function ReadinessGraphic({ active, dark }) {
  // Clean 5×5 readiness matrix. At rest: outlined cells with one
  // gold accent at the center. On hover: a diagonal scanning wave
  // sweeps across the grid, lighting cells in sequence — like a
  // diagnostic reading capabilities row by row.
  const cell = 13;
  const startX = 80 - cell * 2.5;
  const startY = 60 - cell * 2.5;
  const baseLine = dark ? 'rgba(217,194,154,0.40)' : 'rgba(20,24,31,0.30)';
  const goldFill = dark ? '#D9C29A' : 'var(--gold)';
  const accent   = dark ? '#F5E7C7' : 'var(--gold-deep)';

  // unique animation name so multiple instances don't collide
  const animName = dark ? 'readinessPulseDark' : 'readinessPulseLight';

  return (
    <svg viewBox="38 18 84 84" width="100%" height="100%">
      <style>{`
        @keyframes ${animName} {
          0%, 100% { fill: transparent; opacity: 1; }
          35%      { fill: ${dark ? '#D9C29A' : '#B89968'}; opacity: 1; }
          55%      { fill: ${dark ? '#D9C29A' : '#B89968'}; opacity: 0.85; }
        }
        .${animName}-cell {
          fill: transparent;
          transition: fill .3s;
        }
        .${animName}-active .${animName}-cell {
          animation: ${animName} 2.4s ease-in-out infinite;
        }
      `}</style>

      <g className={active ? `${animName}-active` : ''}
        style={{
          transformOrigin:'80px 60px',
          transform: active ? 'scale(1.04)' : 'scale(1)',
          transition:'transform .8s cubic-bezier(.2,.7,.2,1)',
        }}>
        {Array.from({ length: 5 }).map((_, y) =>
          Array.from({ length: 5 }).map((_, x) => {
            const isCenter = x === 2 && y === 2;
            // diagonal sweep delay — top-left to bottom-right
            const delay = (x + y) * 110;
            return (
              <rect key={`${y}-${x}`}
                className={isCenter ? '' : `${animName}-cell`}
                x={startX + x * cell + 1.4}
                y={startY + y * cell + 1.4}
                width={cell - 2.8} height={cell - 2.8} rx="1.6"
                fill={isCenter ? accent : 'transparent'}
                stroke={isCenter ? 'none' : baseLine}
                strokeWidth="0.6"
                style={{ animationDelay: `${delay}ms` }}/>
            );
          })
        )}

        {/* corner registration ticks — give the grid a "diagnostic" feel */}
        {[[startX - 3, startY - 3, 1, 0],
          [startX + 5 * cell + 3, startY - 3, -1, 0],
          [startX - 3, startY + 5 * cell + 3, 1, 0],
          [startX + 5 * cell + 3, startY + 5 * cell + 3, -1, 0]
        ].map(([cx, cy, sx], i) => (
          <g key={'t'+i} stroke={baseLine} strokeWidth="0.6">
            <line x1={cx} y1={cy} x2={cx + 3 * sx} y2={cy}/>
            <line x1={cx} y1={cy} x2={cx} y2={cy + (i < 2 ? -3 : 3)}/>
          </g>
        ))}
      </g>
    </svg>
  );
}

function ShieldGraphic({ active, dark }) {
  const stroke = dark ? 'rgba(217,194,154,0.55)' : 'rgba(20,24,31,0.45)';
  const innerS = dark ? 'rgba(217,194,154,0.35)' : 'rgba(20,24,31,0.22)';
  const check  = dark ? '#F5E7C7' : 'var(--gold-deep)';
  const dots   = dark ? '#D9C29A' : 'var(--gold)';
  return (
    <svg viewBox="34 14 92 92" width="100%" height="100%">
      <defs>
        <linearGradient id="shieldGrad1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#D9C29A" stopOpacity="0.20"/>
          <stop offset="1" stopColor="#D9C29A" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <g style={{ transformOrigin:'80px 60px',
        transform: active ? 'scale(1.06)' : 'scale(1)', transition:'transform .8s' }}>
        <path d="M 80 18 L 116 30 V 62 C 116 86 80 102 80 102 C 80 102 44 86 44 62 V 30 Z"
          fill="url(#shieldGrad1)" stroke={stroke} strokeWidth="0.8"/>
        <path d="M 80 30 L 106 38 V 62 C 106 80 80 92 80 92 C 80 92 54 80 54 62 V 38 Z"
          fill="none" stroke={innerS} strokeWidth="0.6" strokeDasharray="2 3"/>
        <path d="M 68 60 L 76 70 L 92 50"
          fill="none" stroke={check} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
          strokeDasharray="40" strokeDashoffset={active ? 0 : 40}
          style={{ transition:'stroke-dashoffset .7s ease' }}/>
        {[[80, 18], [116, 30], [116, 62], [80, 102], [44, 62], [44, 30]].map(([x,y], i) => (
          <circle key={i} cx={x} cy={y} r={active ? 2.2 : 1.5} fill={dots}
            style={{ transition:'r .4s' }}/>
        ))}
      </g>
    </svg>
  );
}

/* ─── Tile ──────────────────────────────────────────────── */
function BentoTile({ tone = 'paper', eyebrow, title, mark, body, Graphic, forceActive = false }) {
  const [hover, setHover] = useState(false);
  const active = hover || forceActive;   // mobile passes forceActive when the card is in view
  const dark = tone === 'forest' || tone === 'night' || tone === 'ocean' || tone === 'clay';
  const bg = tone === 'forest' ? 'var(--forest)'
    : tone === 'night' ? 'var(--night-2)'
    : tone === 'ocean' ? 'var(--ocean)'
    : tone === 'clay' ? 'var(--clay-deep)'
    : 'var(--paper)';
  const border = dark ? '1px solid rgba(211,222,232,0.10)' : '1px solid var(--line)';
  const titleColor = dark ? '#FFFFFF' : 'var(--ink)';
  const bodyColor  = dark ? 'rgba(232,238,246,0.66)' : 'var(--ink-2)';

  return (
    <div
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        position:'relative', padding:'34px 32px 30px', borderRadius:'18px',
        background: bg, border, color: titleColor,
        display:'flex', flexDirection:'column', gap:'18px',
        width:'100%', height:'100%', minHeight:'380px', overflow:'hidden',
        transition:'transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover
          ? (dark ? '0 24px 48px -20px rgba(0,0,0,0.45)' : '0 24px 48px -20px rgba(20,24,31,0.16)')
          : 'none',
      }}>

      {dark && (
        <div aria-hidden style={{ position:'absolute', inset:0, pointerEvents:'none',
          background: tone === 'forest'
            ? 'radial-gradient(circle at 85% 0%, rgba(217,194,154,0.12), transparent 50%)'
            : 'radial-gradient(circle at 90% 90%, rgba(217,194,154,0.12), transparent 55%)',
        }} />
      )}

      <div style={{ position:'relative' }}>
        {eyebrow && (
          <div style={{ fontFamily:"'Inter',sans-serif", fontSize:'10px', fontWeight:500,
            letterSpacing:'0.22em', textTransform:'uppercase',
            color: dark ? 'rgba(217,194,154,0.85)' : 'var(--gold-deep)',
            marginBottom:'14px' }}>{eyebrow}</div>
        )}
        <div style={{ fontFamily:"'Bodoni Moda', serif", fontVariationSettings:"'opsz' 14",
          fontWeight:400,
          fontSize:'25px', lineHeight:1.14, letterSpacing:'-0.012em',
          color: titleColor, marginBottom:'12px', textWrap:'balance' }}>
          {title}{mark && <sup style={{ fontSize:'15px', fontWeight:400, marginLeft:'3px',
            color: dark ? 'var(--gold-soft)' : 'var(--gold-deep)' }}>{mark}</sup>}
        </div>
        <div style={{ width:'24px', height:'1px',
          background: dark ? 'rgba(217,194,154,0.55)' : 'var(--gold)',
          marginBottom:'14px' }} />
        <p style={{ fontFamily:"'Inter',sans-serif", fontWeight:400, fontSize:'13.5px',
          color: bodyColor, lineHeight:1.65, maxWidth:'340px' }}>
          {body}
        </p>
      </div>

      <div style={{ marginTop:'auto', display:'flex', justifyContent:'flex-end',
        alignItems:'flex-end', minHeight:'104px' }}>
        <div style={{ width:'104px', height:'104px', pointerEvents:'none' }}>
          <Graphic active={active} dark={dark} />
        </div>
      </div>
    </div>
  );
}

const BENTO_TILES = [
  { tone:'forest', eyebrow:'Assessment',     title:<>The 5×5 Readiness<br/>Diagnostics</>,  mark:'™', body:"MATAI's assessment methodology for evaluating an organization's readiness for Agentic AI transformation. It identifies capability gaps, determines operational readiness, and helps prioritize transformation initiatives.",                                                    Graphic:ReadinessGraphic },
  { tone:'night',  eyebrow:'Methodology',    title:<>Six-Pillar Agentic AI<br/>Transformation Framework</>, mark:'™', body:"A structured approach for planning and executing Agentic AI transformation. It helps organizations align strategy, governance, architecture, operations, and optimization to achieve business value at scale.",                                                     Graphic:HexPillarsGraphic },
  { tone:'clay',   eyebrow:'Architecture',   title:<>Trust-by-Design<br/>Architecture</>,   mark:'™', body:"Embeds governance, security, human oversight, observability, and policy controls directly into Agentic AI solutions—enabling organizations to scale AI responsibly while maintaining transparency, accountability, and control.", Graphic:ShieldGraphic },
  { tone:'ocean',  eyebrow:'Our Difference', title:<>Agentic AI<br/>Specialization</>,      mark:null, body:"Agentic AI is our starting point — not an add-on. We design proactive systems built to adapt, evolve, and deliver lasting business value far beyond task-level automation.",                                                                                                                                                      Graphic:NetworkGraphic },
];

/* ─── Mobile carousel — arrows + dots below the cards, plus a
       slow auto-advance that stops permanently on first user input ── */
function BentoCarousel() {
  const scrollRef = useRef(null);
  const [idx, setIdx] = useState(0);
  const [activeIdx, setActiveIdx] = useState(-1);
  const count = BENTO_TILES.length;

  const autoOn      = useRef(true);   // auto-drift still allowed?
  const rafRef      = useRef(null);
  const lastTsRef   = useRef(0);
  const startedRef  = useRef(false);  // auto drift already started?

  // Flip the in-view card's animation AFTER paint so the rest→active
  // transition fires (first card on load + every card scrolled to).
  useEffect(() => {
    const raf = requestAnimationFrame(() => setActiveIdx(idx));
    return () => cancelAnimationFrame(raf);
  }, [idx]);

  // One card's scroll distance = card width + flex gap (14px).
  const stepWidth = () => {
    const el = scrollRef.current;
    if (!el) return 0;
    const card = el.querySelector('[data-bento-card]');
    return card ? card.getBoundingClientRect().width + 14 : 0;
  };
  const curIndex = () => {
    const el = scrollRef.current, step = stepWidth();
    return (!el || !step) ? 0 : Math.round(el.scrollLeft / step);
  };
  const scrollToIndex = (i) => {
    const el = scrollRef.current, step = stepWidth();
    if (!el || !step) return;
    el.scrollTo({ left: Math.max(0, Math.min(count - 1, i)) * step, behavior: 'smooth' });
  };
  const stopAuto = () => {
    autoOn.current = false;
    if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
    const el = scrollRef.current;
    if (el) el.style.scrollSnapType = 'x mandatory';   // restore snap for manual swipes
  };

  // Controls count as deliberate navigation → also end auto-advance.
  const go   = (dir) => { stopAuto(); scrollToIndex(curIndex() + dir); };
  const goTo = (i)   => { stopAuto(); scrollToIndex(i); };

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const reduced = window.matchMedia
      && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const onScroll = () => {
      const step = stepWidth(); if (!step) return;
      setIdx(Math.max(0, Math.min(count - 1, Math.round(el.scrollLeft / step))));
    };
    el.addEventListener('scroll', onScroll, { passive: true });

    // Any real user gesture on the strip stops auto-scroll for good.
    const onUser = () => stopAuto();
    el.addEventListener('touchstart', onUser, { passive: true });
    el.addEventListener('wheel',      onUser, { passive: true });
    el.addEventListener('pointerdown',onUser, { passive: true });

    // Begin a slow, continuous drift once the carousel scrolls into view.
    const SPEED = 34; // px / second — a gentle glide
    const drift = (ts) => {
      if (!autoOn.current) return;
      if (!lastTsRef.current) lastTsRef.current = ts;
      const dt = (ts - lastTsRef.current) / 1000;
      lastTsRef.current = ts;
      const max = el.scrollWidth - el.clientWidth;
      el.scrollLeft = Math.min(max, el.scrollLeft + SPEED * dt);
      if (el.scrollLeft >= max - 0.5) { stopAuto(); return; }  // reached the end
      rafRef.current = requestAnimationFrame(drift);
    };
    const startAuto = () => {
      if (startedRef.current || !autoOn.current || reduced) return;
      startedRef.current = true;
      el.style.scrollSnapType = 'none';   // glide freely between cards while drifting
      lastTsRef.current = 0;
      rafRef.current = requestAnimationFrame(drift);
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) startAuto(); });
    }, { threshold: 0.35 });
    io.observe(el);

    return () => {
      el.removeEventListener('scroll', onScroll);
      el.removeEventListener('touchstart', onUser);
      el.removeEventListener('wheel', onUser);
      el.removeEventListener('pointerdown', onUser);
      io.disconnect();
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, [count]);

  const ctrlBtn = (disabled) => ({
    width:'40px', height:'40px', borderRadius:'50%',
    display:'flex', alignItems:'center', justifyContent:'center',
    background:'rgba(250,246,236,0.9)', border:'1px solid var(--line)',
    boxShadow: disabled ? 'none' : '0 6px 20px -6px rgba(20,24,31,0.28)',
    color:'var(--ink)', padding:0,
    cursor: disabled ? 'default' : 'pointer',
    opacity: disabled ? 0.32 : 1, transition:'opacity .25s',
  });

  return (
    <div>
      <div ref={scrollRef} className="bento-scroll" style={{
        display:'flex', overflowX:'auto', gap:'14px',
        scrollSnapType:'x mandatory', WebkitOverflowScrolling:'touch',
        scrollbarWidth:'none', padding:'0 24px 6px',
      }}>
        <style>{`.bento-scroll::-webkit-scrollbar { display: none; }`}</style>
        {BENTO_TILES.map((tile, i) => (
          <div key={i} data-bento-card style={{
            flex:'0 0 82vw', maxWidth:'320px', scrollSnapAlign:'start',
            minHeight:'400px', display:'flex',
          }}>
            <BentoTile {...tile} forceActive={i === activeIdx} />
          </div>
        ))}
      </div>

      {/* Controls below the cards — no overlap with the content */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center',
        gap:'16px', marginTop:'20px' }}>
        <button aria-label="Previous card" disabled={idx === 0}
          onClick={() => go(-1)} style={ctrlBtn(idx === 0)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </button>

        <div style={{ display:'flex', gap:'8px', alignItems:'center' }}>
          {BENTO_TILES.map((_, i) => (
            <button key={i} aria-label={`Go to card ${i + 1}`} onClick={() => goTo(i)}
              style={{
                width: i === idx ? '20px' : '7px', height:'7px', borderRadius:'4px',
                border:'none', padding:0, cursor:'pointer',
                background: i === idx ? 'var(--gold-deep)' : 'rgba(20,24,31,0.2)',
                transition:'width .3s, background .3s',
              }} />
          ))}
        </div>

        <button aria-label="Next card" disabled={idx === count - 1}
          onClick={() => go(1)} style={ctrlBtn(idx === count - 1)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </button>
      </div>
    </div>
  );
}

/* ─── Section ───────────────────────────────────────────── */
function BentoSection() {
  const isMobile = useIsMobile();

  if (isMobile) {
    return (
      <section id="why-matai-bento" data-theme="light" data-screen-label="what-sets-us-apart" style={{
        padding:'72px 0 64px', background:'var(--paper)',
      }}>
        {/* Headline above carousel */}
        <Reveal style={{ padding:'0 24px', marginBottom:'36px', textAlign:'center' }}>
          <Eyebrow tone="gold" style={{ marginBottom:'18px' }}>Our Difference</Eyebrow>
          <h2 style={{ fontFamily:"'Bodoni Moda', serif", fontVariationSettings:"'opsz' 14", fontWeight:500,
            fontSize:'clamp(42px, 11vw, 62px)', lineHeight:0.98,
            letterSpacing:'-0.025em', marginBottom:'20px', color:'var(--ink)' }}>
            What sets<br/>us <span className="accent-italic">apart.</span>
          </h2>
          <p style={{ fontFamily:"'Inter',sans-serif", fontWeight:300, fontSize:'14.5px',
            color:'var(--ink-2)', lineHeight:1.75, maxWidth:'340px', margin:'0 auto' }}>
            We combine deep industry expertise with proprietary methodologies designed to help
            organizations assess readiness, establish trusted foundations, and successfully
            operationalize Agentic AI at enterprise scale.
          </p>
        </Reveal>

        {/* Horizontal swipe carousel with arrow navigation */}
        <BentoCarousel />
      </section>
    );
  }

  return (
    <section id="why-matai-bento" data-theme="light" data-screen-label="what-sets-us-apart" style={{
      padding:'140px 40px 130px', background:'var(--paper)',
    }}>
      <div style={{ maxWidth:'1320px', margin:'0 auto' }}>
        <div style={{ display:'grid',
          gridTemplateColumns:'1fr 1.1fr 1fr',
          gridTemplateRows:'1fr 1fr',
          gap:'24px', alignItems:'stretch' }}>

          <Reveal style={{ height:'100%' }}>
            <BentoTile tone="forest" eyebrow="Assessment"
              title={<>The 5×5 Readiness<br/>Diagnostics</>} mark="™"
              body="MATAI's assessment methodology for evaluating an organization's readiness for Agentic AI transformation. It identifies capability gaps, determines operational readiness, and helps prioritize transformation initiatives."
              Graphic={ReadinessGraphic} />
          </Reveal>

          {/* Center column — spans two rows */}
          <div style={{ gridRow:'1 / span 2', display:'flex', flexDirection:'column',
            justifyContent:'center', alignItems:'center', textAlign:'center', padding:'30px 24px' }}>
            <Reveal>
              <Eyebrow tone="gold" style={{ marginBottom:'26px' }}>Our Difference</Eyebrow>
              <h2 style={{ fontFamily:"'Bodoni Moda', serif", fontVariationSettings:"'opsz' 14", fontWeight:500,
                fontSize:'clamp(54px, 6.2vw, 88px)', lineHeight:0.98,
                letterSpacing:'-0.025em', marginBottom:'28px', color:'var(--ink)', textWrap:'balance' }}>
                What sets<br/>us <span className="accent-italic">apart.</span>
              </h2>
              <div style={{ width:'48px', height:'1px', background:'var(--line)', margin:'0 auto 28px' }} />
              <p style={{ fontFamily:"'Inter',sans-serif", fontWeight:300, fontSize:'15.5px',
                color:'var(--ink-2)', lineHeight:1.75, maxWidth:'380px', margin:'0 auto' }}>
                We combine deep industry expertise with proprietary methodologies
                designed to help organizations assess readiness, establish trusted
                foundations, and successfully operationalize Agentic AI at enterprise scale.
              </p>
            </Reveal>
          </div>

          <Reveal delay={0.05} style={{ height:'100%' }}>
            <BentoTile tone="night" eyebrow="Methodology"
              title={<>Six-Pillar Agentic AI<br/>Transformation Framework</>} mark="™"
              body="A structured approach for planning and executing Agentic AI transformation. It helps organizations align strategy, governance, architecture, operations, and optimization to achieve business value at scale."
              Graphic={HexPillarsGraphic} />
          </Reveal>

          <Reveal delay={0.1} style={{ height:'100%' }}>
            <BentoTile tone="clay" eyebrow="Architecture"
              title={<>Trust-by-Design<br/>Architecture</>} mark="™"
              body="Embeds governance, security, human oversight, observability, and policy controls directly into Agentic AI solutions—enabling organizations to scale AI responsibly while maintaining transparency, accountability, and control."
              Graphic={ShieldGraphic} />
          </Reveal>

          <Reveal delay={0.15} style={{ height:'100%' }}>
            <BentoTile tone="ocean" eyebrow="Our Difference"
              title={<>Agentic AI<br/>Specialization</>}
              body="Agentic AI is our starting point — not an add-on. We design proactive systems built to adapt, evolve, and deliver lasting business value far beyond task-level automation."
              Graphic={NetworkGraphic} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BentoSection });