import { Container } from '@/components/Container'
import { Eyebrow, SectionHeader } from '@/components/Texts'

const components = [
  {
    component: 'Long-Term Memory (FungiStor)',
    purpose: 'Durable, distributed memory with erasure-coded resilience',
    backedBy: 'Mycelium Storage',
  },
  {
    component: 'Active Retrieval (HeroDB)',
    purpose: 'Fast multimodal vector + keyword retrieval',
    backedBy: 'Compute + Storage',
  },
  {
    component: 'Secure Agent Workspaces (MOS Sandboxes)',
    purpose: 'Ephemeral, isolated execution for agent actions',
    backedBy: 'Mycelium Compute',
  },
  {
    component: 'Private Communication (Mycelium Mesh)',
    purpose: 'Peer-to-peer encrypted network',
    backedBy: 'Mycelium Network',
  },
  {
    component: 'Verifiable Execution (Deterministic Deploy)',
    purpose: 'Ensure the code running is exactly what you signed',
    backedBy: 'The Stack',
  },
  {
    component: 'Agent Coordination Engine (coming online next)',
    purpose: 'Orchestrate multi-step workflows and tool use',
    backedBy: 'Hero Orchestrator',
  },
]

export function AgentComponents() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>AGENT COMPONENTS</Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            The Building Blocks of Sovereign Agents
          </SectionHeader>
        </div>

        <div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
          <table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
            <thead>
              <tr className="bg-cyan-50 border-b border-gray-100">
                <th className="py-3 px-4 font-semibold text-gray-900">Component</th>
                <th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
                <th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
              </tr>
            </thead>
            <tbody>
              {components.map((item) => (
                <tr
                  key={item.component}
                  className="border-b border-gray-100 hover:bg-cyan-50/40 transition"
                >
                  <td className="py-4 px-4 font-medium text-gray-900">{item.component}</td>
                  <td className="py-4 px-4">{item.purpose}</td>
                  <td className="py-4 px-4 text-cyan-700 font-medium">{item.backedBy}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Container>
    </section>
  )
}