www_mycelium_cloud2/src/components/UseCases.tsx

'use client'

import React, { useEffect, useMemo, useRef, useState } from 'react'
import clsx from 'clsx'
import { useInView } from 'framer-motion'
import {
  ArchiveBoxIcon,
  CodeBracketIcon,
  CpuChipIcon,
  GlobeAltIcon,
  MagnifyingGlassIcon,
  ShareIcon,
  UserGroupIcon,
  CheckBadgeIcon,
} from '@heroicons/react/24/solid'

import { Container } from '@/components/Container'

interface Review {
  title: string
  body: string
}

const reviews: Array<Review> = [
  {
    title: 'FungiStor: Long-Term AI Memory',
    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
  },
  {
    title: 'HeroDB: Active AI Memory',
    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
  },
  {
    title: 'MOS Sandboxes: Secure Agent Workspaces',
    body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
  },
  {
    title: 'Mycelium Mesh: Secure Communication Network',
    body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
  },
  {
    title: 'Deterministic Deployment: Verifiable Code Execution',
    body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
  },
  {
    title: 'Agent Coordination: Sovereign Workflow Management',
    body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
  },
  {
    title: 'Universal Interface Layer: AI Service Gateway',
    body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
  },
  {
    title: 'Semantic Index & Search: Navigable Knowledge Fabric',
    body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
  },
]


function getReviewIcon(title: string) {
  if (title.startsWith('FungiStor')) return ArchiveBoxIcon;
  if (title.startsWith('HeroDB')) return CpuChipIcon;
  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
  if (title.startsWith('Mycelium Mesh')) return ShareIcon;
  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
  if (title.startsWith('Agent Coordination')) return UserGroupIcon;
  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
  return GlobeAltIcon; // default
}

function Review({
  title,
  body,
  className,
  ...props
}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
  let animationDelay = useMemo(() => {
    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
    return possibleAnimationDelays[
      Math.floor(Math.random() * possibleAnimationDelays.length)
    ]
  }, [])

  return (
    <figure
      className={clsx(
        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
        className,
      )}
      style={{ animationDelay }}
      {...props}
    >
      <blockquote className="text-gray-900">
        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-gray-700 mb-2" })}
        <p className="mt-4 text-lg/6 font-semibold">
          {title}
        </p>
        <p className="mt-3 text-sm text-gray-600">{body}</p>
      </blockquote>

    </figure>
  )
}

function splitArray<T>(array: Array<T>, numParts: number) {
  let result: Array<Array<T>> = []
  for (let i = 0; i < array.length; i++) {
    let index = i % numParts
    if (!result[index]) {
      result[index] = []
    }
    result[index].push(array[i])
  }
  return result
}

function ReviewColumn({
  reviews,
  className,
  reviewClassName,
  msPerPixel = 0,
}: {
  reviews: Array<Review>
  className?: string
  reviewClassName?: (reviewIndex: number) => string
  msPerPixel?: number
}) {
  let columnRef = useRef<React.ElementRef<'div'>>(null)
  let [columnHeight, setColumnHeight] = useState(0)
  let duration = `${columnHeight * msPerPixel}ms`

  useEffect(() => {
    if (!columnRef.current) {
      return
    }

    let resizeObserver = new window.ResizeObserver(() => {
      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
    })

    resizeObserver.observe(columnRef.current)

    return () => {
      resizeObserver.disconnect()
    }
  }, [])

  return (
    <div
      ref={columnRef}
      className={clsx('animate-marquee space-y-8 py-4', className)}
      style={{ '--marquee-duration': duration } as React.CSSProperties}
    >
      {reviews.concat(reviews).map((review, reviewIndex) => (
        <Review
          key={reviewIndex}
          aria-hidden={reviewIndex >= reviews.length}
          className={reviewClassName?.(reviewIndex % reviews.length)}
          {...review}
        />
      ))}
    </div>
  )
}

function ReviewGrid() {
  let containerRef = useRef<React.ElementRef<'div'>>(null)
  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
  let columns = splitArray(reviews, 3)
  let column1 = columns[0]
  let column2 = columns[1]
  let column3 = splitArray(columns[2], 2)

  return (
    <div
      ref={containerRef}
      className="relative -mx-4 mt-16 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
    >
      {isInView && (
        <>
          <ReviewColumn
            reviews={[...column1, ...column3.flat(), ...column2]}
            reviewClassName={(reviewIndex) =>
              clsx(
                reviewIndex >= column1.length + column3[0].length &&
                  'md:hidden',
                reviewIndex >= column1.length && 'lg:hidden',
              )
            }
            msPerPixel={10}
          />
          <ReviewColumn
            reviews={[...column2, ...column3[1]]}
            className="hidden md:block"
            reviewClassName={(reviewIndex) =>
              reviewIndex >= column2.length ? 'lg:hidden' : ''
            }
            msPerPixel={15}
          />
          <ReviewColumn
            reviews={column3.flat()}
            className="hidden lg:block"
            msPerPixel={10}
          />
        </>
      )}
      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-white" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-white" />
    </div>
  )
}

export function UseCases() {
  return (
    <section
      id="usecases"
      aria-labelledby="usecases-title"
      className="pt-20 pb-16 sm:pt-32 sm:pb-24"
    >
      <Container className=''>
        <div className="mx-auto max-w-2xl  lg:max-w-5xl">
          <h2
            id="usecases-title"
            className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
          >
            Coming Soon: The Future of Mycelium
          </h2>
          <p className="mt-6 text-lg text-gray-600 sm:text-center">
          Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
          </p>
        </div>
        <ReviewGrid />
      </Container>
    </section>
  )
}